manlili blog

SASS高级语法

发表于 | 分类于

github地址:[https://github.com/manlili/sass]

用到的sass语法是:

1
sass --watch test.scss:test.css --style expanded

SASS高级语法

导入外部文件,缺省文件后缀默认是sass/scss文件,一般在头部声明

test.scss内容是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@import "lili.scss";  //导入一个文件
@import "lili.scss", "haha.scss"; //导入两个文件 
/*但在以下情况下， 仅作为普通的 CSS @import 规则语句，不会导入任何 Sass 文件。
*(1) 如果文件的扩展名是 .css。
*(2) 如果文件名以 http:// 开始。
*(3) 如果文件名是 url()
*(4)如果@import 中包含任何的媒体查询（media queries)
*/
@import "lili.css";
@import "http://foo.com/bar";
@import url(lili);
@import "lili" screen;
/*在import里面插入动态变量,但是仅适用于url方式*/
$name:family;
@import url("http://fonts.googleapis.com/css?family=#{$name}");
/*导入scss文件,却不需要将它编译为css文件做法:
 *(1)新建一个文件夹,为了将不需要编译的文件和需要编译的文件分开,这点千万注意
 *(2)在已经建好的文件夹里面,将不要编译的*.scss文件命名为_*.scss
 *(3)导入的时候不要用下划线,直接@import("新建文件夹名字/*.scss")
 */

其中lili.scss内容是:

1
2
3
.test1 {
    color: black;
}

其中haha.scss内容是:

1
2
3
.test11 {
    color: deeppink;
}

编译成test.css内容是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@import url(lili.css);
@import "http://foo.com/bar";
@import url(lili);
@import "lili" screen;
@import url("http://fonts.googleapis.com/css?family=family");
.test1 {
  color: black;
}
.test1 {
  color: black;
}
.test11 {
  color: deeppink;
}

extend函数,不只继承类名选择器的样式,还继承与它相关的样式,包括继承它的父选择器

test.scss内容是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.test2 {
  border: 1px #f00;
  background-color: #fdd;
}
.test2.test21 {
  background-image: url("/image/hacked.png");
}
.test2 .test22 {
  background-image: url("/image/haha.png");
}
html .test2 {
  width: 100px;
}
.lili {
  @extend .test2;
  border-width: 3px;
}

编译成test.css内容是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.test2, .lili {
  border: 1px #f00;
  background-color: #fdd;
}
 
.test2.test21, .test21.lili {
  background-image: url("/image/hacked.png");
}
 
.test2 .test22, .lili .test22 {
  background-image: url("/image/haha.png");
}
 
html .test2, html .lili {
  width: 100px;
}
 
.lili {
  border-width: 3px;
}

extend函数,继承单元素选择器样式,同时继承与它相关的样式,包括继承它的父选择器

test.scss内容是:

1
2
3
4
5
6
7
8
9
10
11
12
13
a:hover {
    color: green;
}
a.class1:hover {
    height: 10px;
}
html a:hover {
    width: 10px;
}
.test3 {
    @extend a:hover;
    width: 20px;
}

编译成test.css内容是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a:hover, .test3 {
  color: green;
}
a.class1:hover, .class1.test3 {
  height: 10px;
}
html a:hover, html .test3 {
  width: 10px;
}
.test3 {
  width: 20px;
}

extend中链式扩展

test.scss内容是:

1
2
3
4
5
6
7
8
9
10
11
.test4 {
    width:20px;
}
.test41 {
    @extend .test4;
    height: 20px;
}
.test42 {
    @extend .test41;
    top:20px;
}

编译成test.css内容是:

1
2
3
4
5
6
7
8
9
10
11
.test4, .test41, .test42 {
  width: 20px;
}
.test41, .test42 {
  height: 20px;
}
.test42 {
  top: 20px;
}

占位符%,%不会被编译到css里面

test.scss内容是:

1
2
3
4
5
6
7
.test5 a%name {
    width: 100px;
}
.lili {
    height: 200%;
    @extend %name;
}

编译成test.css内容是:

1
2
3
4
5
6
7
.test5 a.lili {
  width: 100px;
}
.lili {
  height: 200%;
}

extend中防止继承不存在的样式出错,用!optional直接跳过空样式

test.scss内容是:

1
2
3
4
.test6 {
    @extend noexist!optional;
    height: 100px;
}

编译成test.css内容是:

1
2
3
.test6 {
  height: 100px;
}

@at-root指令导致一个或多个规则被限定输出在文档的根层级上，而不是被嵌套在其父选择器下

test.scss内容是:

1
2
3
4
5
6
7
8
9
10
11
.test7 {
    height: 20px;
    @at-root {
        .children1 {
            color: red;
        }
        .children2 {
            color: black;
        }
    }
}

编译成test.css内容是:

1
2
3
4
5
6
7
8
9
10
.test7 {
  height: 20px;
}
.children1 {
  color: red;
}
.children2 {
  color: black;
}

@at-root(without:类名)将选择器移动到嵌套指令之外

test.scss内容是:

1
2
3
4
5
6
7
8
9
10
.gaga {
    @media name {
      .page {
        width: 8px;
        @at-root (without: media) {  //注意此处目前测试是不支持类名的,比如.test8
          color: red;
        }
      }
    }
}

编译成test.css内容是:

1
2
3
4
5
6
7
8
@media name {
  .gaga .page {
    width: 8px;
  }
}
.gaga .page {
  color: red;
}

if条件判断,注意不支持if…else…

test.scss内容是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.test8 {   //if...if..
    @if 1+1 == 2 {
        width: 20px;
    }
    @if 5 < 3 {
        width: 100px;
    }
}
.test81 {  //if...else if...
    @if 1+1 != 2 {
        width: 20px;
    }
    @else if 5 > 3 {
        width: 100px;
    }
}
.test82 {  //if...else if...else...
    @if 1+1 != 2 {
        width: 20px;
    }
    @else if 5 < 3 { 
        width: 100px;
    }
    @else {
        width: 10px;
    }
}

编译成test.css内容是:

1
2
3
4
5
6
7
8
9
10
11
.test8 {
  width: 20px;
}
.test81 {
  width: 100px;
}
.test82 {
  width: 10px;
}

for循环语句

test.scss内容是:

1
2
3
4
5
6
7
8
9
10
11
12
13
//第一种格式 @for $var from <start> through <end>,注意范围包括<start>和<end>的值
@for $i from 1 through 3 {
    .gray#{$i*3} {
        color: #333*$i; 
    }
}
//第二种格式 @for $var from <start> to <end>,注意范围从<start>开始运行，但不包括<end>的值
@for $i from 1 to 4 {
    .gray2#{$i*3} {
        color: #333*$i; 
    }
}

编译成test.css内容是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.gray3 {
  color: #333333;
}
.gray6 {
  color: #666666;
}
.gray9 {
  color: #999999;
}
.gray23 {
  color: #333333;
}
.gray26 {
  color: #666666;
}
.gray29 {
  color: #999999;
}

each循环语句 @each $var in

test.scss内容是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$name:"lili","yaya","sansa";  //注意数组list的写法
@each $i in $name {
    test9.#{$i} {
        width: 10px;
    }
}
$name2:(name21:"lili",name22:"yaya",name23:"sansa");  //注意对象map的写法
@each $i in $name2 {
    test9.#{$i} {
        width: 10px;
    }
}
$name3:(name31:1,name32:2,name33:3);  //注意对象map的写法
@each $key,$value in $name3 {
    test9.#{$key} {
        width: 10px*$value;
    }
}

编译成test.css内容是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
test9.lili {
  width: 10px;
}
 
test9.yaya {
  width: 10px;
}
 
test9.sansa {
  width: 10px;
}
 
test9.name21 lili {
  width: 10px;
}
 
test9.name22 yaya {
  width: 10px;
}
 
test9.name23 sansa {
  width: 10px;
}
 
test9.name31 {
  width: 10px;
}
 
test9.name32 {
  width: 20px;
}
 
test9.name33 {
  width: 30px;
}

while循环语句

test.scss内容是:

1
2
3
4
5
6
7
$i:3;
@while $i > 0 {
    .gray#{$i} {
        color: #333*$i;
    }
    $i:$i - 1; //注意此处不能写成$i:$i-1,因为会被当成字符串
}

编译成test.css内容是:

1
2
3
4
5
6
7
8
9
10
11
.gray3 {
  color: #999999;
}
 
.gray2 {
  color: #666666;
}
 
.gray1 {
  color: #333333;
}

混入指令,实现代码块复用

test.scss内容是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
@mixin left01 {  //不带参数
    float: left;
}
.test10 {
    @include left01;
}
 
@mixin left02($left) {  //带1个参数
    float: $left;
}
.test101 {
    @include left02(left);
}
 
@mixin left03($left,$width) {  //带2个参数,或者说参数为数组
    float: $left;
    .lili {
        width: $width;
    }
}
.test102 {
    @include left03(left,100px);
}
 
@mixin left04($name31,$name32,$name33) {  //参数为对象,但是接受传递的参数必须是对象相对应key,同时需要用...传递参数
    .lili {
        width: $name31;
        height: $name32;
        top: $name33;
    }
}
$map:(name31:"1px",name32:"2px",name33:"3px");
.test103 {
    @include left04($map...);
}
 
@mixin left05($left:right) {  //带默认参数,不传参的话就用默认参数
    float: $left;
}
.test104 {
    @include left05;
}
 
@mixin box-shadow($shadows...) {  //不定参数,用...
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译成test.css内容是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.test10 {
  float: left;
}
 
.test101 {
  float: left;
}
 
.test102 {
  float: left;
}
.test102 .lili {
  width: 100px;
}
 
.test103 .lili {
  width: "1px";
  height: "2px";
  top: "3px";
}
 
.test104 {
  float: right;
}
 
.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

传递内容块@content到混入,传递到@content位置

test.scss内容是:

1
2
3
4
5
6
7
8
9
10
11
@mixin lala {
    html {
        color: #888;
        @content;
    }
}
@include lala {  //此处名字必须和上面保持一致
    .logo {
        font-size: 15px;
    }
}

编译成test.css内容是:

1
2
3
4
5
6
html {
  color: #888;
}
html .logo {
  font-size: 15px;
}

变量在混入@mixin的作用域

即传递给混入（mixin）的内容块在其被定义的作用域中进行运算，而不是混入（mixin）的作用域。这意味着混入（mixin）的局部变量不能传递给样式块使用
test.scss内容是:

1
2
3
4
5
6
7
8
9
10
$color: white;
@mixin haha($color:black) {
    background-color: $color;
    @content;
}
.test12 {
    @include haha{
        color: $color;
    }
}

编译成test.css内容是:

1
2
3
4
.test12 {
  background-color: black;
  color: white;
}

函数,用法类似@mixin

test.scss内容是:

1
2
3
4
5
6
@function sasa($name) {
    @return $name;
}
.test13 {
    font-size: sasa(15px);
}

编译成test.css内容是:

1
2
3
.test13 {
  font-size: 15px;
}

请我喝杯果汁吧！