无礼的运营商

Sass可以帮助您在样式表中进行基本的数学运算。应用适当的算术符号非常简单。

Sass提供了一些标准的数学运算符，即+，-，*，/和％。

让我们以一个示例为例，做一些简单的数学运算来计算预留和文章的宽度。

SCSS语法：

.container { width: 100%; }
article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
} 

等效的Sass语法：

.container
  width: 100%
article[role="main"]
  float: left
  width: 600px / 960px * 100%
aside[role="complementary"]
  float: right
  width: 300px / 960px * 100% 

这将基于960px创建一个非常简单的流体网格。 Sass操作将执行类似的操作，例如获取像素值并将其转换为百分比，而不会带来很多麻烦。

它将生成如下所示的CSS：

.container {
  width: 100%;
}
article[role="main"] {
  float: left;
  width: 62.5%;
}
aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

Sass操作员列表

1)赋值运算符

在Sass中，冒号(：)运算符用于定义变量。

句法：

$main-color: lightpink; 

2)算术运算符

这些是用于执行算术运算的一些标准数学运算符。 Sass支持以下算术运算运算符。

算术运算运算符列表：

重要事实：

• 加法(+)运算符还可用于连接字符串，但仅适用于具有兼容单位的数字。

例如：

1. h2 {
2. 字体大小：15px + 2em； //由于单元不兼容而显示错误
3. 字体大小：15px + 2； // 17像素
4. }

h2 {font-size：15px + 2em; //由于单位不兼容，显示错误font-size：15px + 2; // 17px}

• 同一单位的两个数字相乘是无效的CSS：
1. h2 {
2. 字体大小：5px * 2px; //无效的CSS
3. }

h2 {font-size：5px * 2px; //无效的CSS}

• 除法运算符是CSS速记属性的组成部分。

例如：

1. 字体：16px / 24px Arial sans-serif;
2. 背景：url(“ http://example.com”)无重复固定中心/封面；

字体：16px / 24px Arial sans-serif;背景：url(“ http://example.com”)无重复固定中心/封面；

但是Sass更喜欢使用正斜杠(/)来执行除法运算。让我们举一个例子，看看Sass如何理解这个符号。

1. h2 {
2. font-size：16px / 24px //输出为CSS
3. font-size：(16px / 24px)//使用括号，进行除法
4. 字体大小：＃{$ base-size} /＃{$ line-height}; //使用插值，输出为CSS
5. font-size：$ base-size / $ line-height //使用变量，进行除法
6. 不透明度：random(4)/ 5; //使用函数，进行除法
7. padding-right：2px / 4px + 3px //使用算术表达式，进行除法
8. }

h2 {font-size：16px / 24px //输出为CSS font-size：(16px / 24px)//使用括号，除以font-size：＃{$ base-size} /＃{$ line-height}; //使用插值，输出为CSS字体大小：$ base-size / $ line-height //使用变量，划分不透明度：random(4)/ 5; //使用<span id ='x-goog-220946160-glossary-4'>函数</ span>，右除数：2px / 4px + 3px //使用算术表达式，除数}

• Sass根据BODMAS公式遵循运算符优先级。
• 首先评估括号内的表达式。
• 乘法(*)和除(/)运算符具有比加(+)和减法运算符更高的优先级( – )。

请参阅以下示例：

h2 {
     width: 3px * 5 + 5px; // 20px
     width: 3 * (5px + 5px); // 30px
     width: 3px + (6px / 2) * 3; // 12px
 } 

3)平等算子

条件语句中使用等号运算符。这些运算符用于测试两个值是否相同并返回布尔值。

Sass支持以下相等运算符。

所有类型都支持这些。

让我们举两个例子来很好地理解它。在第一个示例中，使用相等运算符(==)测试$ font参数的类型并print适当的消息。

请参阅以下示例：

@mixin font-fl($font){
    &:after {
        @if(type-of($font) == string) {
            content: 'My font is: #{$font}.';
        } @else {
            content: 'Sorry, the argument #{$font} is a #{type-of($font)}.';
        }
    }
}
h2{
    @include font-fl(sans-serif);
}

生成的CSS将具有以下代码：

h2:after {
    content: 'My font is: sans-serif.';
} 

第二个示例定义一个列表并检查其项目的长度。在这里，余数(％)运算符用于评估其长度，然后将color属性设置为h2元素。

请参阅以下示例：

$list: "red", "yellow", "lightblue";
@mixin fg-color($property) {
    @each $item in $list {
        $color-length: str-length($item);
        @if( $color-length % 2 != 0 ) {
            #{$property}: unquote($item);
        }
    }
}
h2 {
    @include fg-color(color);
}

生成的CSS将具有以下代码：

h2 {
    color: lightblue;
} 

注意： Sass不像其他语言那样支持严格相等运算符(===)。

4)比较运算符

运算符与相等运算符符相似，但它们仅用于比较数字。

比较运算符的列表支持萨斯：

请参阅以下示例：

$padding: 50px;
h2 {
    @if($padding <= 20px) {
        padding: $padding;
    } @else {
        padding: $padding / 2;
    }
}

编译后，生成的CSS将具有以下代码。

h2 {
  padding: 25px;
} 

5)逻辑运算符

逻辑运算符用于测试条件表达式中的多个条件。

Sass支持的逻辑运算符列表：

让我们举个例子来很好地理解它：

本示例包含按钮状态作为键，并包含相应的颜色作为值。然后，我们指定一个条件以评估其长度。如果整个条件为真，则将背景色应用于h2元素。

Sass语法：

$list-map: (success: lightgreen, alert: red, info: lightblue);
@mixin button-state($btn-state) {
    @if (length($list-map) > 2 or length($list-map) < 5) {
        background-color: map-get($list-map, $btn-state);
    }
}
.btn {
    @include button-state(success);
}

.btn {
    background-color: lightgreen;
}