参考-sass入门
1、增加了变量、循环、分支，编译器转回css
2、分局部变量跟全局变量
使用方法
//sass style
//定义一个全局变量
$w: 18px;
.box{
font-size: $w;
}
//css style
.box{
font-size: 18px;
}
特殊变量
//sass style
$side: bottom;
.box{
border-#{$side}: 1px solid #cccccc;
}
//css style
.box{
border-bottom: 1px solid #cccccc;
}
嵌套
//sass style
#main p{
color: #ffffff;
width: 100%;
.redbox{
background-color: #ff0000;
}
// &可以代替父容器
&:hover{
display: none;
}
}
//css style
#main p{
color: #ffffff;
width: 100%;
}
#main p .redbox{
background-color: #ff0000;
}
#main p:hover{
display: none;
}
网友评论