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;
}

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容