随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

sass进阶—变量运算

/*变量操作 (两个变量之间的运算符需要用空格隔开,否则会报错。)
==,!=
<,>,<=,>=
+,-,*,/,%

*/

$width1:50px;
$width2:100px;
body{
width: $width1 + $width2;
height: $width2 - $width1;
}

/*连字符号中间使用带空格的加号效果不变*/
a:hover{
cursor:e-resize;
/*等同于*/
cursor: e + -resize;
}


注意:说明运算时sass只关注运算符前后两个用空格隔开的值,其余的都不管原样输出

层级关系:双引号权重最大,没有引号其次,单引号的权重最低,有双引号则结果有双引号,单双都有结果为双,只有单引号则结果没有引号
a:before{
content: "a" + bc;
/* content:"abc" */
}

a:before{
content: a + 'bc';
/* content:abc */
}

a:before{
content: 'a' + "bc";
/* content:"abc" */
}


字符串引用变量时不能使用变量名直接引用,需要加上#好号和大括号才能引用成功,否则将原样输出


$version:1.6;
p:before{
content: 'hello,sass #{$version}';
}
$height1:10px;
$height2:20px;

span{
font-size: 10px / 5px; //不会加以运算
width: $width2 / 2;
等同于
width: round($width2) / 2;
等同于
width: (100px / 2);
}

注:运算规则:
1、运算符前后需要使用空格隔开;
2、两个变量若是单位不一致则无法进行计算。
3、一个带单位一个不带单位则以带单位的单位为结果单位。
4、除法计算时必须要求被除数带单位,除数不带单位

posted on   小虾米吖~  阅读(370)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」

点击右上角即可分享
微信分享提示