本文主要是介绍运算，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

运算

1. 插值语句

之前创建变量是⽤于样式中的值，但是选择器的名字不能使⽤变量，但可以使⽤插值#{}包裹变量后使 ⽤

⽽且 使⽤ #{} 可以避免 Sass 运⾏运算表达式，⽐如/除号，有时候不是要除号⽽是需要斜杠

通过  #{}  插值语句可以在选择器或属性名中使⽤变量 使⽤  #{}  可以避免 Sass 运⾏运算表达式，直接编译 CSS,如 border-radius: #{$a}/#{$b}; 

使 ⽤插值 / 可以不看作除号

2. 数字运算

例⼦：

$a: 100px; 
$b: 50px;
$c: 20px; 
.box {  
width: $a + $b;  
height: 10px * 10;   
margin-top: $a - $b; 
margin-left: $a/2;    
//变量和变量但除法会报错  
background-color: red; } 

Sass脚本⽀持数字的加减乘除、取整等运算 (+, -, *, /, %) 计算⽅式可以是值直接计算，如： 10px * 10 => 100px  计算⽅式可以是变量计算，如： width: $a+$b;  变量和变量但除法会报错 加法遇到字符串会拼接，但字符串要在前半部分 "acb"+20px  运算符于值之间尽量加空格，以免被认为是变量的⼀部分 3. 颜⾊值运算

例⼦：
p {    01 + 04 = 05 02 + 05 = 07 03 + 06 = 09   color: #010203 + #040506; } p {   //01 * 2 = 02 02 * 2 = 04 03 * 2 = 06   color: #010203 * 2; } p {   // color: rgba(255, 255, 0, 0.75);   color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75); }
七

这篇关于运算的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！