github地址:https://github.com/lily1010/sass/tree/master/course02
用到的sass语法是:
sass --watch test.scss:test.css --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;
}