CSS预处理语言less和Sass基础教程

本文最后更新于：1 年前

因为CSS是一门描述性语言，代码中基本没有逻辑性，所以会存在大量重复代码，不便于维护和扩展。因此CSS预处理器就诞生了：less和Sass都是CSS的预处理语言，先用预编译语言进行样式设计，然后再进行编译，生成CSS文件来使用，这些语言的出现让CSS编写起来更加方便快捷，更易于维护。

less的基础教程

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。

less变量

声明变量：使用@变量名: 变量值
使用变量：@变量名
举例：

1
2
$length: 100px;
$color: red;

less中变量的类型：

  • 数字类：10px；10
  • 字符串：
    ​ 有引号字符串：”red”
    ​ 无引号字符串：哈哈
  • 颜色类：
    颜色名称，如red；
    RGB格式，rgb(0,0,0)；
    十六进制，如#ffffff
  • 值列表类型：用逗号或空格分隔

变量使用原则：多次频繁出现的值设为变量，还有需要修改的值也可设为变量

混合（Mixins）：

  • 无参混合
    声明：.name{} ；选择器中调用：.name
  • 带参混合
    无默认值声明：.name(@param){} 调用：.name(paramValue);
    有默认值声明： .name(@param:value){} 调用：.name(paramValue);paramValue可省略

如果声明时没有默认值，则调用时必须赋值，否则报错
无参混合会在css中编译出同名的class选择器，有参的不会

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
.class{
    padding: 10px;
}
@mixin hong{
    color: blue;
}
#div1{
    width: $length;
    background-color: red;
    @extend.class;
    border-#{$left}:10px solid blue ;
    @include hong;
}

less匹配模式

使用混合进行匹配，类似if结构：
声明：.name(条件一，参数){} .name(条件二，参数){} .name(条件三，参数){}
调用：.name(条件值，参数值)
匹配规则：根据调用时提供的条件值，寻找与之匹配的Mixins执行，其中@_表示永远需要执行的部分

less的运算与嵌套

LESS中的运算：
使用运算符+、-、/、* 计算，可以带单位也可不带
进行颜色（十六进制形式）运算时，红绿蓝分开计算，即每组两位之间可以进位，组间不可进位
LESS中的嵌套：
保留html中的代码结构，嵌套默认是后代选择器，如果需要子代选择器，则在子代前面加>
&表示上一层，&:hover表示上一层的hover事件，&主要用来进行伪类事件的设置

代码嵌套示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
section{
    p{
        color: red;
        background-color: cyan;
    }
    ul{
        padding: 0;
        list-style: none;
        li{
            float: left;
            width: 100px;
            margin: 10px;
            border: {
                color: green;
                style:solid;
                width: 5px;
            };
            &:hover{
                background-color: yellow;
            }
        }
    }
}

less注释方式

less的注释方式有两种：
一种是使用双斜杠（//）来注释，使用这种方式注释的内容不会被编译
另一种是使用/**/，但可以被编译

Sass的基础教程

世界上最成熟、最稳定、最强大的专业级CSS扩展语言

sass是最早的css预处理语言，有比less更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受，所以使用率不高，不过由于其强大的功能和Ruby on Rails 的大力推动，逐渐被更多开发者使用。

sass是采用的Ruby语言编写的一款css预处理语言，它诞生于2007年，是最早成熟css预处理语言。最初它是为了配合haml而设计的，因此有着和haml一样的缩进式风格。

sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的css代码，这一代的sass也被称为scss。

特色功能 (Features)

  • 完全兼容 CSS3
  • 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
  • 通过函数进行颜色值与属性值的运算
  • 提供*控制指令 (control directives)*等高级功能
  • 自定义输出格式

变量

使用$变量名:变量值 来声明变量，即变量以$开头
如果变量需要在字符串中嵌套，则需要使用#{}包括，如

1
2
3
4
$left:left;
.div1 {
    border-#{$left}-radius: 5px;
}

计算

1
2
3
4
5
body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
}

需要注意的是，计算时会将单位也进行运算，所以使用时需注意最终单位：100px*10px = 1000 px2

嵌套

  • 选择器嵌套　ul{ li{} } 后代选择、ul{ >li{} } 子代选择、

    &表示外层的父选择器 div{ ul{ li{ &=="div ul li" } } }

  • 属性嵌套　　p{border:{color: green;style:solid;width: 5px;}}，注意里面的border要加上冒号

  • 伪类嵌套　　ul{ li{ &:hover{} } }

混合、继承、占位符

混合宏：
声明：@mixin name($param:value){} 调用：@include name(value);
声明时可以有参可以无参，可以带默认值也可不带，但调用时必须符合声明规范，同less
优点：可以传参；缺点：会将混合宏中代码，copy到对应的选择器中，产生冗余代码
继承：
声明：.class{} 调用:@extend .class;
优点：继承的相同代码，会提取到并集选择器中，减少冗余代码；
缺点：无法进行传参，会在CSS中生成一个同名class
占位符：
声明：%class{} 调用：@extend %class;
优点：继承的相同代码，会提取到并集选择器中，减少冗余代码，不会在CSS中生成一个同名class；
缺点：无法进行传参
综上，当需要传递参数时用混合宏，当有现成class时用继承，当不需要参数也不需要class时用占位符

控制指令

if条件结构：
@if条件{} @else{}
for 循环结构:
@for $i from 1 to/through 10; (to不包括10，through包括10 )
whlie 循环结构：

1
2
3
4
$j;
@while $j<10{.while #{$j}{
background-color: red;
}$j:$j+1;}

each循环遍历
@each item in a,b,c,d{}

函数

Sass允许用户自己编写函数使用

1
2
3
4
5
6
　　@function double($n) {
　　　　@return $n * 2;
　　}
　　#sidebar {
　　　　width: double(5px);
　　}

注释

Sass和less一样，有两种注释方法

一种是单行注释，//注释一 不会被输出到编译后的CSS文件中；
另一种是多行注释，/*注释二*/ 这种注释会保留在编译后的文件中；
另外还有一种算是多行注释的升级版，/*!注释三 重要注释*/ 这种注释即使是压缩模式编译，也会被保留，通常可以用于声明版权信息。

两种预处理语言的编译方式

less和Sass的编译方式大同小异，他们可以通过下面几种方式进行编译：

1、命令行方式

使用这种方式编译需要先安装less和Sass，less可以通过npm安装，Sass的安装方式比较多，不仅可以通过npm安装，也可以通过Ruby安装，更多安装方式可以去官网查看。安装成功后就能使用命令行直接编译文件了。

less的编译命令

1
lessc styles.less styles.css

Sass的编译命令

1
sass test.scss test.css

SASS提供四个编译风格的选项：

  • nested：嵌套缩进的css代码，它是默认值。
  • expanded：没有缩进的、扩展的css代码。
  • compact：简洁格式的css代码。
  • compressed：压缩后的css代码。

生产环境当中，一般使用最后一个选项。

1
sass --style compressed test.sass test.css

命令行方式也可以对某个文件或者目录进行监听，在源文件产生变动时自动生成编译后版本，less可以通过安装一个插件watcher-lessc来监听编译，Sass直接使用命令行就能实现：

1
2
3
4
5
　　// 监听一个文件
　　sass --watch input.scss:output.css

　　// 监听一个文件夹目录
　　sass --watch app/sass:public/stylesheets

2、使用编译软件Koala编译

Koala是一个国产免费前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

前往官网下载安装，安装完成打开显示如下界面：

img

点击左侧的+号添加需要编译的文件夹，也可以直接将文件夹拖动进来，添加完成后就可以对文件进行编译了，点击一个文件可以设置编译选项。编译时软件默认是将less文件编译到同级目录下，如果想要改变可以在文件上进行单个文件的改变；缺点是不能实现批量的改变。使用koala的好处是有错误提示，可以比较方便的获取错误信息。

img

3、使用开发工具编译

可以使用一些常用的开发工具或开发工具中的某些插件来直接自动编译，如webstorm、sublime插件SASS-Build、vscode插件easy sass等等，具体操作方法自行搜索。

4、使用JS文件

这一条针对的是less文件，因为less基于js。去官网下载less.js文件，然后在文件中引入，或者直接使用CDN引入：

1
2
<link rel="stylesheet" href="less/test.less" type="text/less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

使用时注意以下几点：
link引入的是less文件，路径直接是less所在位置即可；
link内一定要注明type类型，因为默认为css；
顺序一定要是引入的less文件在less.js文件上面。

5、其他编译方式

前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等，具体用法自行搜索。

less与Sass的区别

区别 Sass less
环境 Sass基于Ruby，需要安装Ruby。属于服务端处理。 Less和Sass在Ruby中构建相似，但它已被移植到JavaScript中。less编译通过引入less.js文件或通过编译软件编译成css文件再将css文件放入项目中。属于客户端处理。
声明变量 Sass使用$ Less使用@
输出格式 nested：嵌套缩进的css代码；expanded：展开的多行css代码；compact：简洁格式的css代码；compressed：压缩后的css代码 Less无输出格式
继承 sass的继承：@extend less的继承：类似于mixins .block

以上是部分Sass和less的区别，仅供参考。

参考链接

less官网

less中文网

Koala官网

Sass中文网

SASS用法指南 - 阮一峰的网络日志

sass和less的区别

Sass与Less区别

CSS
CSS Web

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！