首页 > 代码库 > Sass--运算
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--运算
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。