一、变量
sass可以定义变量,方便统一修改和维护。
//scss style
$fontStack: 'Microsoft Yahei';
$primaryColor: #333;
body{
font-family: $fontStack;
color: $primaryColor;
}
//解析为css
//css style
body{
font-family: 'Microsoft Yahei';
color: #333;
}
二、嵌套
sass可以进行选择器的嵌套,表示层级关系,看起来很优雅整齐。
//sass style
nav{
ul{
margin:0;
padding:0;
}
li{display:inline-block;}
a{
display:block;
padding:6px 12px;
text-decoration:none;
}
}
//解析为css
//css style
nav ul{
margin:0;
padding:0;
}
nav li{display:inline-block;}
nav a{
display:block;
padding:6px 12px;
text-decoration:none;
}
三、导入
sass中如导入其他sass文件,最后会编译合并为一个css文件,优于纯css的@import
//sass style
//reset.scss
html,body{
margin:0;
padding:0;
}
//sass style
//base.scss
@import 'reset';
body{
font-family:'Microsoft Yahei';
background-color: #efefef;
}
//导入合并后解析为css
//css style
html,body{
margin:0;
padding:0;
}
body{
font-family:'Microsoft Yahei';
background-color: #efefef;
}
四、mixin
sass中可用mixin定义一些代码片段,且可传参数,方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。
//sass style
@mixin box-sizing($sizing){
-webkit-box-sizing: $sizing;
-moz-box-sizing:$sizing;
box-sizing:$sizing;
}
.box-border{
border:1px solid #ccc;
@include box-sizing(border-box);
}
//解析为css
//css style
.box-border{
border:1px solid #ccc;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
五、扩展/继承
sass可通过@extend来实现代码组合声明,使代码更加优越简洁。
//sass style
.message{
border:1px solid #ccc;
padding:10px;
color:#333;
}
.success{
@extend .message;
border-color:green;
}
.error{
@extend .message;
border-color:red;
}
.warning{
@extend .message;
border-color:yellow;
}
//解析为css
//css style
.message,.success,.error,.warning{
border:1px solid #ccc;
padding:10px;
color:#333;
}
.success{
border:1px solid green;
}
.error{
border:1px solid red;
}
.warning{
border:1px solid yellow;
}
六、运算
sass可进行简单的加减乘除运算等
// sass style
.container{width:100%;}
article[role='main']{
float:left;
width:600px / 960px * 100%;
}
article[role='complimentary']{
float:right;
width:300px / 960px * 100%;
}
//解析为css
//css style
.container{width:100%;}
article[role='main']{
float:left;
width:62.5%;
}
article[role='complimentary']{
float:right;
width:31.25%;
}
七、颜色
sass中集成了大量的颜色函数,让变换颜色更加简单。
//sass style
$linkColor:#08c;
a{
text-decoration:none;
color:$linkColor;
&:hover{
color:darken($linkColor,10%);
}
}
//解析为css
//css style
a{
text-decoration:none;
color:#0088cc;
}
a:hover{
color:#006699;
}