github地址:https://github.com/lily1010/sass/tree/master/course03
用到的sass语法是:
sass --watch test.scss:test.css --style expanded
如下图:
1 导入外部文件,缺省文件后缀默认是sass/scss文件,一般在头部声明
test.scss内容是:
@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内容是:
.test1 { color: black;}
其中haha.scss内容是:
.test11 { color: deeppink;}
编译成test.css内容是:
@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;}
2 extend函数,不只继承类名选择器的样式,还继承与它相关的样式,包括继承它的父选择器
test.scss内容是:
.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内容是:
.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;}
3 extend函数,继承单元素选择器样式,同时继承与它相关的样式,包括继承它的父选择器
test.scss内容是:
a:hover { color: green;}a.class1:hover { height: 10px;}html a:hover { width: 10px;}.test3 { @extend a:hover; width: 20px;}
编译成test.css内容是:
a:hover, .test3 { color: green;}a.class1:hover, .class1.test3 { height: 10px;}html a:hover, html .test3 { width: 10px;}.test3 { width: 20px;}
4 extend中链式扩展
test.scss内容是:
.test4 { width:20px;}.test41 { @extend .test4; height: 20px;}.test42 { @extend .test41; top:20px;}
编译成test.css内容是:
.test4, .test41, .test42 { width: 20px;}.test41, .test42 { height: 20px;}.test42 { top: 20px;}
5 占位符%,%不会被编译到css里面
test.scss内容是:
.test5 a%name { width: 100px;}.lili { height: 200%; @extend %name;}
编译成test.css内容是:
.test5 a.lili { width: 100px;}.lili { height: 200%;}
6 extend中防止继承不存在的样式出错,用!optional直接跳过空样式
test.scss内容是:
.test6 { @extend noexist!optional; height: 100px;}
编译成test.css内容是:
.test6 { height: 100px;}
7 @at-root指令导致一个或多个规则被限定输出在文档的根层级上，而不是被嵌套在其父选择器下
test.scss内容是:
.test7 { height: 20px; @at-root { .children1 { color: red; } .children2 { color: black; } }}
编译成test.css内容是:
.test7 { height: 20px;}.children1 { color: red;}.children2 { color: black;}
8 @at-root(without:类名)将选择器移动到嵌套指令之外
test.scss内容是:
.gaga { @media name { .page { width: 8px; @at-root (without: media) { //注意此处目前测试是不支持类名的,比如.test8 color: red; } } }}
编译成test.css内容是:
@media name { .gaga .page { width: 8px; }}.gaga .page { color: red;}
9 if条件判断,注意不支持if...else...
test.scss内容是:
.test8 { //if...if.. @if 1+1 == 2 { width: 20px; } @if 5 3 { width: 100px; }}.test82 { //if...else if...else... @if 1+1 != 2 { width: 20px; } @else if 5 0 { .gray#{$i} { color: #333*$i; } $i:$i - 1; //注意此处不能写成$i:$i-1,因为会被当成字符串}
编译成test.css内容是:
.gray3 { color: #999999;}.gray2 { color: #666666;}.gray1 { color: #333333;}
13 混入指令,实现代码块复用
test.scss内容是:
@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内容是:
.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;}
14 传递内容块@content到混入,传递到@content位置
test.scss内容是:
@mixin lala { html { color: #888; @content; }}@include lala { //此处名字必须和上面保持一致 .logo { font-size: 15px; }}
编译成test.css内容是:
html { color: #888;}html .logo { font-size: 15px;}
15 变量在混入@mixin的作用域,即传递给混入（mixin）的内容块在其被定义的作用域中进行运算，而不是混入（mixin）的作用域。这意味着混入（mixin）的局部变量不能传递给样式块使用
test.scss内容是:
$color: white;@mixin haha($color:black) { background-color: $color; @content;}.test12 { @include haha{ color: $color; }}
编译成test.css内容是:
.test12 { background-color: black; color: white;}
16 函数,用法类似@mixin
test.scss内容是:
@function sasa($name) { @return $name;}.test13 { font-size: sasa(15px);}
编译成test.css内容是:
.test13 { font-size: 15px;}