sass中级语法

github地址:https://github.com/lily1010/sass/tree/master/course02

用到的sass语法是:

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

如下图:

1 类名嵌套

test.scss内容是:

.test1 {  font-size: .15rem;  p{    color: #333;    .test11 {      width: 3px;    }  }}

编译成test.css内容是:

.test1 { font-size: .15rem;}.test1 p { color: #333;}.test1 p .test11 { width: 3px;}

2 属性嵌套

test.scss内容是:

.test2 {  margin: {    left: 10px;    right: 20px;  }}.test21 {  margin: 0 0 0 0{  /*命名空间也可以有自己的属性*/    left: 10px;    right: 20px;  }}

编译成test.css内容是:

.test2 { margin-left: 10px; margin-right: 20px;}.test21 { margin: 0 0 0 0; margin-left: 10px; margin-right: 20px;}

3 引用父选择器和精确定位父选择器和反向成为父选择器

test.scss内容是:

.a {  font-size: .15rem;  &:hover {      //引用父选择器    color: red;  }  .ll {        //精确定位父选择器    color: black;    &:hover {      height: 20px;    }  }  .test3 & {     //反向成为父选择器    width: 10px;  }}

编译成test.css内容是:

.a { font-size: .15rem;}.a:hover { color: red;}.a .ll { color: black;}.a .ll:hover { height: 20px;}.test3 .a { width: 10px;}

4 全局变量

test.scss内容是:

/*方法一*/$color: red;.test4 {  color: $color;}/*方法二*/.test41 {  $red: red !global;  color: $red;}.test42 {  color: $red;}

编译成test.css内容是:

/*方法一*/.test4 { color: red;}/*方法二*/.test41 { color: red;}.test42 { color: red;}

5 带引号的字符串将被编译为不带引号的字符串

test.scss内容是:

@mixin test5($left) {  //此处$不可去掉  border-#{$left}:1px #000 solid;  left: 20px;  top: 10px;}.lili2 {  @include test5("left");}

编译成test.css内容是:

.lili2 { border-left: 1px #000 solid; left: 20px; top: 10px;}

6 精讲除法

test.scss内容是:

/*需要注意:Sass 数学函数在算术运算期间会保留单位*可以将/解析为除法三种情况*(1)如果该值，或值的任何部分，存储在一个变量中或通过函数返回。* (2)如果该值是由括号括起来的，除非这些括号是在一个列表（list）外部，并且值是括号内部。* (3)如果该值被用作另一个算术表达式的一部分。*/p {  font-size: 10px/2px; // 原生的CSS，不作为除法   $width: 100px;  width: $width/2;  height: (100px/2);  margin-left: 5px + 8px/2px;}

编译成test.css内容是:

p { font-size: 10px/2px; width: 50px; height: 50px; margin-left: 9px;}

7 颜色运算

test.scss内容是:

.test7 {  color: #302010 + #333333;}.test71 {  color: #010101 * 2;}.test72 {  color: rgba(0,0,0,0.3) + rgba(1,1,1,0.3); //必须具有相同的alpha值，才能进行颜色运算,但是alpha不变}/*如果想让alpha值变化,则需要计算函数*/.test73 {  color: opacify(rgba(0,0,0,0.3),0.3);}

编译成test.css内容是:

.test7 { color: #635343;}.test71 { color: #020202;}.test72 { color: rgba(1, 1, 1, 0.3);}/*如果想让alpha值变化,则需要计算函数*/.test73 { color: rgba(0, 0, 0, 0.6);}

8 字符串运算

test.scss内容是:

.test8 {  width: 2px + 3px;}.test81::after {  //带引号字符串和不带引号字符串,谁在前面就以谁为主  font-family: "arial" + black;  content: lala + "lili";}$value: 20;   //在字符串里面插入动态值.test82::before {  content: "wo ke yi #{$value} lili";}

编译成test.css内容是:

.test8 { width: 5px;}.test81::after { font-family: "arialblack"; content: lalalili;}.test82::before { content: "wo ke yi 20 lili";}

9 圆括号提升优先级

test.scss内容是:

.test9 {  width: 1px + (2px * 3);}

编译成test.css内容是:

.test9 { width: 7px;}

10 默认变量 !default

test.scss内容是:

/*如果分配给变量的值后面添加了!default标志 ，这意味着该变量如果已经赋值，那么它不会被重新赋值，但是，如果它尚未赋值，那么它会被赋予新的给定值。*/$color: red;$color: pink !default;.test10 {  color: $color;}

编译成test.css内容是:

.test10 { color: red;}

原标题：sass中级语法

关键词：