1.安装
2.Webstorm下设置sass
3.变量
1.以$开头;后边紧跟变量名;
例如:
1.1普通变量
$color:#333
.con{
background:$color;
}
1.2特殊变量
一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。
例如:
$position:top;
.header{
margin-#{$position}:20px
}
4.计算功能
body{
margin:(14px/2);
top:50px+100px;
right:$value*5;
}
5.嵌套
5.1选择器嵌套
例如:
div h{
font-size:16px;
}
可以用sass写法:
div{
h{
font-size:16px;
&:hover{
color:red;
}
}
}
5.2属性嵌套
例如:
.con{
border:{
style:solid;
left:{
width:2px;
color:red;
}
right:{
width:2px;
color:blue;
}
}
6.继承
例如:
.class1{
border: 1px solid #333;
}
.class2{
@extend .class1;
font-size: 12px;
}
7.混合
例如:
@mixin left{
float:left;
background:red;
}
.class1{
border: 1px solid #333;
@include left;
}
//强大之处在与其方法是可以传参的;同样也可以传多个参数;
@mixin left($color:red;$f_float:left){
float:$f_float;
background:$color;
}
.class1{
border: 1px solid #333;
@include left(green,left);
}
8.插入文件:使用@import命令,用来插入外部文件;
例如:
@import “name.scss”