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、除法计算时必须要求被除数带单位,除数不带单位
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/10395932.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」