Sass和Less

本文最后更新于：2 年前

Sass和Less

Sass和Less都属于CSS预处理器，CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，如：变量、语句、函数、继承等概念。将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。

官网地址： http://lesscss.org/

VSCode插件：Easy LESS

官网地址： https://sass-lang.com/

VSCode插件：Easy Sass

Sass

在Sass和Less文件夹中新建一个style2.scss文件

1
2
3
4
.box{
    width: 200px;
}

输入样式，会自动转换生成style2.css文件和压缩文件style2.min.css

1.注释

1
2
3
4
5
//单行注释不会被编译

/*  
	多行注释会被编译
*/

2.变量

1
2
3
4
5
6
$number:123px;
.box2{
    width:$number;
    height:$number;
}

3.插值

1
2
3
4
5
6
7
8
$number:123px;
$key:margin;
$i:2;
.box#{$i}{
    width:$number;
    height:$number;
    #{$key}:auto;
}

4.作用域

高输出123px；宽输出456px；有顺序要求

1
2
3
4
5
6
7
$number:123px;
.box3
{
    height: $number;
    $number:456px;
    width: $number;
}

5.选择器嵌套

1
2
3
4
5
6
7
8
ul{
    list-style: none;
    li{
        float:left;
        div{margin: 10px;}
        p{margin: 20px;}
    }
}

6.伪类嵌套

1
2
3
4
5
6
7
8
9
10
11
ul{
    list-style: none;
    li{
        float:left;
        div{margin: 10px;}
        p{margin: 20px;}
    }
    &:hover{//不加&符号会有空格
        color:red
    }
}

7.属性嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ul{
    list-style: none;
    li{
        float:left;
        div{margin: 10px;}
        p{margin: 20px;}
    }
    &:hover{//不加&符号会有空格
        color:red;
        font:{
            size:10px;
            weight:bold;
            family:宋体
        }
    }
}

8.运算

1
2
3
4
5
6
7
8
9
$num:100px;
.box4{
    width:$num*3;
    height: $num+10px;
    // height: $num+10em;//单位不同不能计算
    font:20px / 1.5;//斜杠默认是分割
    padding:(20px / 1.5);//加上括号可以计算
    color:#010203 * 2;//颜色也能进行运算
}

9.函数

1
2
3
4
5
6
7
8
9
10
11
//自定义函数
@function sum($n,$m){
    @return $n + $m;
}
.box5{
    width:round(3.4px);
    height: percentage(0.2);//百分比
    margin: random();//随机数可以产生
    padding: sqrt(25%);//不能开方
    font-size: sum(4px,5px);
}

10.混入

1
2
3
4
5
6
7
8
9
10
11
12
@mixin show {//只混入 不渲染
    display: inline;
}
@mixin hide($color) {//也能传参
    display: block;
    color: $color;
}
.box6{
    width: 100px;
    @include show;
    @include hide(red)
}

11.无命名空间

12.继承

继承和混入很像，只是最后生成的代码是分开，还是分组的形式

1
2
3
4
5
6
7
8
9
%line{//.换成百分号就不会被渲染出来
    display: inline;
}
.box7{
    @extend %line;
}
.box8{
    @extend %line;
}

13.合并

1
2
3
4
5
6
7
8
9
10
11
12
$background:(
    a:url(a.png),
    b:url(b.png)
);
$transform:(
    a:scale(2),
    b:rotate(30deg)
);
.box9{
    background: map-values($background);//逗号隔开效果
    transform:zip(map-values($transform)...);//空格隔开效果
}

14.媒体查询

1
2
3
4
5
6
7
8
9
10
.box10{
    width:100px;
    @media all and (min-width:768px) {
        width:600px;
    }
    @media all and (min-width:1440px) {
        width:900px;
    }
}

15.条件

1
2
3
4
5
6
7
8
9
$count:3;
.box11{
    @if($count > 4){
        width:100px + $count;
    }
    @else{
        width: 10px + $count;
    }
}

16.循环

1
2
3
4
5
6
@for $i from 0 through 2{
    .box-#{$i}{
        width: 100px + $i;
    }
}

17.导入

在Sass和Less中新建一个文件reset.scss

1
2
3
*{margin: 0;padding: 0;}//写入样式
img{display: block;}

在Sass和Less\style2.scss中引入reset.scss

1
@import './reset.scss'

Less

在Sass和Less文件夹中新建一个style.less文件

1
2
3
4
.box{
    width: 100px;
}

输入样式，会自动转换生成style.css文件

1.注释

1
2
3
4
5
//单行注释不会被编译

/*  
	多行注释会被编译
*/

2.变量

1
2
3
4
5
@number:123px;
.box2{
    width:@number;
    height:@number;
}

3.插值

1
2
3
4
5
6
7
8
@number:123px;
@key:margin;
@i:2;
.box@{i}{
    width:@number;
    height:@number;
    @{key}:auto;
}

4.作用域

宽高输出的都是456px；作用域有就近原则，局部变量优先找同区块的

1
2
3
4
5
6
7
@number:123px;
.box3
{
    height:@number;
    @number:456px;
    width:@number;
}

5.选择器嵌套

1
2
3
4
5
6
7
8
ul{
    list-style: none;
    li{
        float:left;
        div{margin: 10px;}
        p{margin: 20px;}
    }
}

6.伪类嵌套

1
2
3
4
5
6
7
8
9
10
11
ul{
    list-style: none;
    li{
        float:left;
        div{margin: 10px;}
        p{margin: 20px;}
    }
    &:hover{//不加&符号会有空格
        color:red
    }
}

7.无属性嵌套

8.运算

1
2
3
4
5
6
7
8
9
10
@num:100px;
.box4{
    width:@num*3;
    height: @num+10em;
    margin: 10em+@num;//单位不同时，按照第一个计算
    font:20px / 1.5;//斜杠默认是分割
    padding:(20px / 1.5);//加上括号可以被计算转译
    padding:~'20px / 1.5';//加上~' '防止转译，直接变成除(但是我不加的时候暂时也没有转译)
    color:#010203 * 2;//颜色也能进行
}

9.函数

1
2
3
4
5
6
.box5{
    width:round(3.4px);
    height: percentage(0.2);//百分比
    margin: random();//随机数不能产生
    padding: sqrt(25%);//开方
}

10.混入

1
2
3
4
5
6
7
8
9
10
11
.show{//不加括号会生成，再混入
    display: block;
}
.hide(@color){//加括号不生成，直接混入,还能传参
    display: inline;
}
.box6{
    width: 100px;
    .show;
    .hide(blue);
}

11.命名空间

1
2
3
4
5
6
#nm(){
    .show{display: inline-block;}
}
.box7{
    #nm.show;
}

12.继承

1
2
3
4
5
6
7
8
9
.line{
    display: inline;
}
.box7{
    &:extend(.line);
}
.box8{
    &:extend(.line);
}

13.合并

1
2
3
4
5
6
.box9{
    background+: url(a.png);
    background+: url(b.png);//+号是用空格的形式隔开
    transform+_: scale(2);
    transform+_: rotate(30deg);//+_号是用空格隔开
}

14.媒体查询

1
2
3
4
5
6
7
8
9
10
.box10{
    width:100px;
    @media all and (min-width:768px) {
        width:600px;
    }
    @media all and (min-width:1440px) {
        width:900px;
    }
}

15.条件

1
2
3
4
5
6
7
8
9
10
11
@count:5;
.get(@cn) when(@cn > 4){
    width: 100px + @cn;
}
.get(@cn) when (@cn < 4){
    width: 10px + @cn;
}
.box11{
    .get(@count)
}

16.循环

1
2
3
4
5
6
7
8
9
10
@count2:0;
.get2(@cn) when (@cn<3){//用递归
    .get2((@cn+1));
    .box-@{cn}{
        width: 100px + @cn;
    }
}
.get2(@count2);


17.导入

在Sass和Less中新建一个文件reset.less

1
*{margin: 0;padding: 0;}//写入样式

在Sass和Less\style.less中引入reset.less

1
@import './reset.less';