Scss--运算--使用/实例

我不是女神ヾ 2023-09-28 13:57 14阅读 0赞

原文网址：[Scss--运算--使用/实例\_IT利刃出鞘的博客-CSDN博客][Scss--_--_IT_-CSDN]

## 简介 ##

本文用示例介绍Scss的运算的使用。

所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。

## 数字运算 (Number Operations) ##

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

p {
      width: 1in + 8pt;
    }

编译为

p {
      width: 1.111in;
    }

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

### 除法运算 / (Division and /) ###

/ 在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了 / 除法运算的功能。也就是说，如果 / 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。

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

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

p {
      font: 10px/8px;             // Plain CSS, no division
      $width: 1000px;
      width: $width/2;            // Uses a variable, does division
      width: round(1.5)/2;        // Uses a function, does division
      height: (500px/2);          // Uses parentheses, does division
      margin-left: 5px + 8px/2px; // Uses +, does division
    }

编译为

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

### 使用变量而且/不做除法 ###

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 \#\{\} 插值语句将变量包裹。

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

编译为

p {
      font: 12px/30px; 
    }

## 颜色值运算 (Color Operations) ##

### **简单示例** ###

颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值。

SCSS：

p {
      color: #010203 + #040506;
    }

计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译。

编译后的CSS：

p {
      color: #050709; 
    }

使用 [color functions][] 比计算颜色值更方便一些。

### **数字与颜色值也可以运算** ###

数字与颜色值之间也可以进行算数运算，同样也是分段计算的。

示例

SCSS:

p {
      color: #010203 * 2;
    }

计算 01 \* 2 = 02 02 \* 2 = 04 03 \* 2 = 06。

编译后的CSS：

p {
      color: #020406; 
    }

### **算术运算不会作用于 alpha 值** ###

如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。

示例

p {
      color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
    }

编译为

p {
      color: rgba(255, 255, 0, 0.75); 
    }

### **alpha的调整** ###

颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。

SCSS：

$translucent-red: rgba(255, 0, 0, 0.5);
    p {
      color: opacify($translucent-red, 0.3);
      background-color: transparentize($translucent-red, 0.25);
    }

编译为

p {
      color: rgba(255, 0, 0, 0.8);
      background-color: rgba(255, 0, 0, 0.25); 
    }

### IE的alpha层 ###

IE 滤镜要求所有的颜色值包含 alpha 层，而且格式必须固定 \#AABBCCDD，使用 ie\_hex\_str 函数可以很容易地将颜色转化为 IE 滤镜要求的格式。

SCSS：

$translucent-red: rgba(255, 0, 0, 0.5);
    $green: #00ff00;
    div {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
    }

编译为

div {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
    }

## 字符串运算 (String Operations) ##

### \+ 用于连接字符串 ###

SCSS

p {
      cursor: e + -resize;
    }

编译为

p {
      cursor: e-resize; 
    }

### 引号的影响 ###

注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

SCSS

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

编译为

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

### 运算与其他值连用 ###

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

SCSS

p {
      margin: 3px + 4px auto;
    }

编译为

p {
      margin: 7px auto; 
    }

### 插值（动态值） ###

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

SCSS

p:before {
      content: "I ate #{5 + 10} pies!";
    }

编译为

p:before {
      content: "I ate 15 pies!"; 
    }

### 空值 ###

空的值被视作插入了空字符串。

SCSS：

$value: null;
    p:before {
      content: "I ate #{$value} pies!";
    }

编译为

p:before {
      content: "I ate pies!"; 
    }

## 布尔运算 (Boolean Operations) ##

SassScript 支持布尔型的 and or 以及 not 运算。

## 数组运算 (List Operations) ##

数组不支持任何运算方式，只能使用 [list functions][] 控制。

[Scss--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125644283
[color functions]: https://sass-lang.com/documentation/modules
[list functions]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#list-functions