首页 > 网站 > WEB开发 > 正文

SASS的基本运算

2024-04-27 15:08:52
字体:
来源:转载
供稿:网友

一、减法

二、加法

加号可以不需要空格隔开,test.sCSS

1 $test-width1: 100px;2 $test-width2: 200px;3 $test-width3: 300px;4 5 .test {6     width: $test-width1+$test-width2+ $test-width3;7     margin: 0 auto;8 }test.css中的结果:

1   .container {2   width: 600px;3   margin: 0 auto; }

另外,加号还可以做字符串连接。带引号的字符串在 + 号左侧,结果是一个有引号的字符串;没有引号的字符串在 + 号左侧,结果是一个没有引号的字符串。(如果中文乱码,可在文件头部写入:@charset "UTF-8";)

1 p:before {2     content: "Foo " + Bar;3     font-family: sans- + "serif";4 }

结果:

1 p:before {2   content: "Foo Bar";3   font-family: sans-serif; }三、乘法

能够支持多种单位(比如 em ,px , %),多个数值只需要为一个数值提供单位即可,否则报错。

四、除法

由于"/"在css中已有用途,因此需要在运算外层加上括号(),除法的使用情况总结,如下:

1 p {2      font: 10px/8px;             // 纯 CSS,不是除法运算3      $width: 1000px;4      width: $width/2;            // 使用了变量,是除法运算5      width: round(1.5)/2;        // 使用了函数,是除法运算6      height: (500px/2);          // 使用了圆括号,是除法运算7      margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算8 }


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表