标签:play 数值 logs har img str 技术 set png
数值运算
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运算挺像的
标签:play 数值 logs har img str 技术 set png
原文地址:http://www.cnblogs.com/jiaoxuanwen/p/7171635.html