scss常用语法
scss用了有一段时间了,最初只看到其中的最简单的嵌套,但是scss却不止如此。如果真正做项目嵌套还是远远不能满足需求。于是重新对scss做了一番了解。
安装命令: npm install sass -g
编译:sass --watch dome.scss dome.css
1、嵌套
//编译前
.main{
.content{
p{
width: 100px;
height: 100px;
background: #eee;
}
}
}
//编译后
.main .content p {
width: 100px;
height: 100px;
background: #eee;
}
(1)使用"&"应用父级
//编译前
.main{
&{
border: 1px solid #999;
}
}
//编译后
.main {
border: 1px solid #999;
}
2、变量
//编译前
$default-color:#333;
.main{
.content{
p{
width: 100px;
height: 100px;
background: $default-color;
}
}
}
//编译后
.main .content p {
width: 100px;
height: 100px;
background: #333;
}
3、继承
//编译前
%default-style {
display: flex;
justify-content: space-around;
}
.main{
.content{
p{
@extend %default-style;
}
}
}
//编译后
.main .content p {
display: flex;
justify-content: space-around;
}
4、变量计算
//编译前
$width:1000px;
.main{
.content{
width: $width;
p{
width: $width/2;
}
li{
width: $width/2;
}
}
}
//编译后
.main .content {
width: 1000px;
}
.main .content p {
width: 500px;
}
.main .content li {
width: 500px;
}
5、Mixin
//编译前
@mixin rounded($property) {
border-radius: $property;
}
.main{
.content{
p {
width: 100px;
height: 100px;
border: 1px solid #999;
@include rounded(5px);
}
}
}
//编译后
.main .content p {
width: 100px;
height: 100px;
border: 1px solid #999;
border-radius: 5px;
}
这个人暂时没有 freestyle