-
html
<div class="main "> <div class="top"></div> <div class="center"></div> <div class="bottom"></div> </div>
-
嵌套
-
嵌套标签
.main { .top { background: red; } } 相当于css的 .main .top -
嵌套属性
.font { family: Helvetica, sans-serif; size: 18px; weight: bold; } 上面的scss代码相当于下面的css代码 font-family: Helvetica, sans-serif; font-size: 18px; font-weight: bold;
-
-
变量和运算操作符
变量可包括（字符串、数字、颜色值、布尔值、列表、null值）
wrapperWidth: 500; wripperHeight: 500; $nomalWidth: 100; $nomalHeight: 100; .main { width: wrapperWidth; height: wripperHeight; .top { background: red; width: wrapperWidth * 0.2; //可以进行加减乘除运算 height: nomalHeight; } } -
混合
@mixin相当于定义了函数，使用时需用@include(参数)
@mixin setheight($property) { height:$property; width:$property; } .main { background-color: $mainColor; border: 1px solid #000000; @include setheight(500) .top { background-color: $topColor; @include setheight(100) } .center { background-color: $topColor; @include setheight(100) } .bottom { background-color: $topColor; @include setheight(100) } } -
继承
如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend，使一个选择器的样式从另一选择器继承
.common { width: 100; height: 100; } .main { .top { width: 100; height: 100; background-color: red } .center { @extend .top; background-color: blue; } .bottom { @extend .top; background-color: green; } }
