SASS运算符

 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

（+，-，*，%）的运算

 scss代码

.p1{
    width: 10px+10;
    width: 10%+10;
    width: 10px*10;
    // width: 10px*10%;//不能运算
}

 css代码

.p1 {
  width: 20px;
  width: 20%;
  width: 100px;
}

关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。

除法运算 

以下三种情况 将被视为除法运算符号：

• 如果值，或值的一部分，是变量或者函数的返回值
• 如果值被圆括号包裹
• 如果值是算数表达式的一部分

scss代码

.p2 {
    font: 10px/8px;
    $width: 1000px;
    width: $width/2;          
    width: round(1.5)/2;       
    height: (500px/2);         
    margin-left: 5px + 8px/2px; 
  }

css代码

.p2 {
  font: 10px/8px;
  width: 500px;
  width: 1;
  height: 250px;
  margin-left: 9px;
}

 如果需要使用变量，同时又要确保 / 不做除法运算

而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

scss代码

.p3 {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
  }

css代码

p {
  font: 12px/30px; }

 

+ 可用于连接字符串

scss代码

.p4 {

  cursor: e + -resize;

}

css代码

.p4 {
  cursor: e-resize;
}

 注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，

 运算结果是有引号的，相反，无引号字符串（位于 + 左侧）

连接有引号字符串，运算结果则没有引号。

scss代码

.p5:before {

  content: "Foo " + Bar;

  font-family: sans- + "serif";

}

css代码 

.p5:before {
  content: "Foo Bar";
  font-family: sans-serif;
}

 运算表达式与其他值连用时，用空格做连接符：

scss代码

.p6 {

  margin: 3px + 4px auto;

}

css代码 

.p6 {
  margin: 7px auto;
}

 在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值：

scss代码

$name:foo;
$atter:border;
p.#{$name}-top{
    #{$atter}-bottom:1px solid red;
    #{$atter}-top:2px solid green;
    #{$atter}-radius:20px;
}

css代码

 

p.foo-top {
  border-bottom: 1px solid red;
  border-top: 2px solid green;
  border-radius: 20px;
}