时间:2021-07-01 10:21:17 帮助过:61人阅读
用到的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; } } .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内容是:
.test8 {
width: 20px;
}
.test81 {
width: 100px;
}
.test82 {
width: 10px;
}
10 for循环语句
test.scss内容是:
//第一种格式 @for $var fromthrough ,注意范围包括 和 的值 @for $i from 1 through 3 { .gray#{$i*3} { color: #333*$i; } } //第二种格式 @for $var from to ,注意范围从 开始运行,但不包括 的值 @for $i from 1 to 4 { .gray2#{$i*3} { color: #333*$i; } }
编译成test.css内容是:
.gray3 { color: #333333; } .gray6 { color: #666666; } .gray9 { color: #999999; } .gray23 { color: #333333; } .gray26 { color: #666666; } .gray29 { color: #999999; }
11 each循环语句 @each $var in
test.scss内容是:
$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内容是:
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; }
12 while循环语句
test.scss内容是:
$i:3; @while $i > 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; }