github網址:https://github.com/lily1010/sass/tree/master/course02
用到的sass語法是:
sass --watch test.scss:test.css --style compact --style expanded
如下圖:
1 類別名稱嵌套
test.scss內容是:
<span style="color: #000000;">.test1 { font-size: .15rem; p{ color: #333; .test11 { width: 3px; } } }</span>
編譯成test.css內容是:
<span style="color: #000000;">.test1 { font-size: .15rem; } .test1 p { color: #333; } .test1 p .test11 { width: 3px; }</span>
2 屬性巢狀
test.scss內容是:
<span style="color: #000000;">.test2 { margin: { left: 10px; right: 20px; } } .test21 { margin: 0 0 0 0{ /*命名空间也可以有自己的属性*/ left: 10px; right: 20px; } }</span>
編譯成test.css內容是:
<span style="color: #000000;">.test2 { margin-left: 10px; margin-right: 20px; } .test21 { margin: 0 0 0 0; margin-left: 10px; margin-right: 20px; }</span>
3 引用父選擇器和精確定位父選擇器和反向成為父選擇器
test.scss內容是:
<span style="color: #000000;">.a { font-size: .15rem; &:hover { //引用父选择器 color: red; } .ll { //精确定位父选择器 color: black; &:hover { height: 20px; } } .test3 & { //反向成为父选择器 width: 10px; } }</span>
編譯成test.css內容是:
<span style="color: #000000;">.a { font-size: .15rem; } .a:hover { color: red; } .a .ll { color: black; } .a .ll:hover { height: 20px; } .test3 .a { width: 10px; }</span>
4 全域變數
test.scss內容是:
<span style="color: #000000;">/*方法一*/ $color: red; .test4 { color: $color; } /*方法二*/ .test41 { $red: red !global; color: $red; } .test42 { color: $red; }</span>
編譯成test.css內容是:
<span style="color: #000000;">/*方法一*/ .test4 { color: red; } /*方法二*/ .test41 { color: red; } .test42 { color: red; }</span>
5 帶引號的字串將被編譯為不含引號的字串
test.scss內容是:
<span style="color: #000000;">@mixin test5($left) { //此处$不可去掉 border-#{$left}:1px #000 solid; left: 20px; top: 10px; } .lili2 { @include test5("left"); }</span>
編譯成test.css內容是:
<span style="color: #000000;">.lili2 { border-left: 1px #000 solid; left: 20px; top: 10px; }</span>
6 精講除法
test.scss內容是:
<span style="color: #000000;">/*需要注意:Sass 数学函数在算术运算期间会保留单位 *可以将/解析为除法三种情况 *(1)如果该值,或值的任何部分,存储在一个变量中或通过函数返回。 * (2)如果该值是由括号括起来的,除非这些括号是在一个列表(list)外部,并且值是括号内部。 * (3)如果该值被用作另一个算术表达式的一部分。 */ p { font-size: 10px/2px; // 原生的CSS,不作为除法 $width: 100px; width: $width/2; height: (100px/2); margin-left: 5px + 8px/2px; }</span>
編譯成test.css內容是:
<span style="color: #000000;">p { font-size: 10px/2px; width: 50px; height: 50px; margin-left: 9px; }</span>
7 顏色運算
test.scss內容是:
<span style="color: #000000;">.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); }</span>
編譯成test.css內容是:
<span style="color: #000000;">.test7 { color: #635343; } .test71 { color: #020202; } .test72 { color: rgba(1, 1, 1, 0.3); } /*如果想让alpha值变化,则需要计算函数*/ .test73 { color: rgba(0, 0, 0, 0.6); }</span>
8 字串運算
test.scss內容是:
<span style="color: #000000;">.test8 { width: 2px + 3px; } .test81::after { //带引号字符串和不带引号字符串,谁在前面就以谁为主 font-family: "arial" + black; content: lala + "lili"; } $value: 20; //在字符串里面插入动态值 .test82::before { content: "wo ke yi #{$value} lili"; }</span>
編譯成test.css內容是:
<span style="color: #000000;">.test8 { width: 5px; } .test81::after { font-family: "arialblack"; content: lalalili; } .test82::before { content: "wo ke yi 20 lili"; }</span>
9 圓括號提升優先權
test.scss內容是:
<span style="color: #000000;">.test9 { width: 1px + (2px * 3); }</span>
編譯成test.css內容是:
<span style="color: #000000;">.test9 { width: 7px; }</span>
10 預設變數 !default
test.scss內容是:
<span style="color: #000000;">/*如果分配给变量的值后面添加了!default标志 ,这意味着该变量如果已经赋值,那么它不会被重新赋值,但是,如果它尚未赋值,那么它会被赋予新的给定值。*/ $color: red; $color: pink !default; .test10 { color: $color; }</span>
編譯成test.css內容是:
<span style="color: #000000;">.test10 { color: red; }</span>