Sass--运算
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Sass--运算相关的知识,希望对你有一定的参考价值。
数值运算
body{
height: 800px;
$smallBlockWidthAndHeight: 100px;
.outside{
background: gray;
height: 500px;
.smallBlock{
width: $smallBlockWidthAndHeight;
height: $smallBlockWidthAndHeight;
background: red;
display: inline-block;
margin-left: 5px;
}
.resultBlock{
width: $smallBlockWidthAndHeight / 2;
height: $smallBlockWidthAndHeight / 2;
background: blue;
display: inline-block;
margin-left: 5px;
}
}
}
字符串运算
实例 1
body{
// $str: "70px" + "80px";
$str: 70px + 80px;
.outside{
width: 500px;
height: 300px;
background: gray;
margin-left: $str;
}
}
编译后
body .outside {
width: 500px;
height: 300px;
background: gray;
margin-left: 150px; }
实例 2
body{
$str: "70px" + "80px";
.outside{
width: 500px;
height: 300px;
background: gray;
margin-left: $str;
}
}
编译后
body .outside {
width: 500px;
height: 300px;
background: gray;
margin-left: "70px80px"; }
实例 3
body{
.outside{
width: 500px;
height: 300px;
background: gray;
&:after{
content: "边距是:\\"" + (70px + 80px) + "\\"";
}
}
}
编译后
@charset "UTF-8";
body .outside {
width: 500px;
height: 300px;
background: gray; }
body .outside:after {
content: ‘边距是:"150px"‘; }
可以看出来,这个规则和JS运算挺像的
以上是关于Sass--运算的主要内容,如果未能解决你的问题,请参考以下文章