Sass 操作符介绍 - 文章教程

Sass 操作符介绍

发布于 2021-12-15 字数 8129 浏览 1093 评论 0

在本文中,我们将会解析一下 Sass 中的操作符。

赋值操作符

Sass 使用冒号( : )来定义一个变量:

$main-color: lightgray;

算术操作符

算术操作符用于执行数学计算,下面是 Sass 所支持的算术操作符:

操作符 简介
+
-
*
/
% 取余

在下一小节中你会发现,+ 操作符也可以用来拼接字符串。

注意,上面的操作符只能用于单位相同的数值运算:

h2 {
    font-size: 5px + 2em; // 单位不一致,编译报错
    font-size: 5px + 2; // 7px
}

此外,两个单位相同的数值相乘无法生成有效的 CSS:

h2 {
    font-size: 5px * 2px; // invalid CSS
}

如你所知,/ 操作符本身就是 CSS 简写语法的一部分,比如:

font: 16px / 24px Arial sans-serif;
background: url("http://example.com") no-repeat fixed center / cover;

但是,Sass 重载了该运算符,用于执行除法操作,下面让我们看看它是如何解析的:

h2 {
    // 不执行除法操作,原样输出
    font-size: 16px / 24px; 

    // 使用插值语法之后,原样输出
    font-size: #{$base-size} / #{$line-height}; 

    // 使用括号包裹之后,执行除法操作
    font-size: (16px / 24px); 

    // 使用变量,执行除法操作
    font-size: $base-size / $line-height; 

    // 调用函数,执行除法操作
    opacity: random(4) / 5; 

    // 使用算术操作符,执行除法操作
    padding-right: 2px / 4px + 3px; 
}

Sass 中的操作符也具有优先级的概念,规则如下:

  • 括号中的操作具有最高优先级
  • 乘法、除法的优先级高于加法和减法

h2 {
    width: 3px * 5 + 5px; // 20px

    width: 3 * (5px + 5px); // 30px

    width: 3px + (6px / 2) * 3; // 12px
 }

相等操作符

相等操作符常用于条件语句,用来比较左右运算子是否相等,最终返回布尔值:

操作符 简介
== 相等
!= 不等

相等操作符适用于所有类型,下面来看两个示例。在第一个示例中,我们使用 == 来测试 $font 的类型,并输出对应的信息:

@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);
}

编译结果:

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

在第二个示例中,定义了一个列表并检查该列表的长度。通过使用 % 操作符,我们可以计算每个元素的长度,然后根据特定条件对 color 进行赋值:

$list: "tomato", "lime", "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);
}

编译结果:

h2 {
    color: lightblue;
}

这里需要提醒的是,Sass 不支持严格相等操作符 ===,不过从下面的示例中你会发现,Sass 解析 == 的原则就是严格相等:

// 在 javascript 中
("5" == 5) // true

("5" === 5) // false

// 在 Sass 中
("5" == 5) // false

(20px == 20) // true (Libsass 不支持)

比较操作符

与相等操作符类似,比较操作符用来比较数值。在 Sass 中,支持以下比较操作符:

操作符 简介
> 大于
>= 大于或者等于
< 小于
<= 小于或者等于

下面是一个简单的示例:

$padding: 50px;

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

编译结果:

h2 {
    padding: 25px;
}

逻辑操作符

逻辑操作符常用于测试多个条件表达式,Sass 支持的逻辑操作符如下所示:

操作符 条件 简介
and x and y 与操作
or x or y 或操作
not not x 取反

下面通过一个示例来解释逻辑操作符的用法:定义一个 map,存储按钮的状态以及对应的颜色,然后创建一个条件语句,用来测试 map 内元素的多少。如果通过条件测试,那么就给 h2 添加 background-color 属性。代码如下所示:

$list-map: (success: lightgreen, alert: tomato, 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;
}

如你所见,因为 map 的元素数量为 3,符合 length($list-map) > 2 – length($list-map) < 5 的条件,所以返回的结果是 true

请注意以下两个条件的差异:

@if (length($list-map) > 2 or not (length($list-map) == 3)) {...} 
// true

@if (length($list-map) > 2 and not (length($list-map) == 3)) {...} 
// false

字符串操作符

在第一节我们就讲过,+ 可以用来拼接字符串。下面是一个 + 拼接字符串的规则:

  • 如果字符串被引号包裹,那么它拼接任何字符串的结果也会被引号包裹
  • 如果字符串没有被引号包裹,那么它拼接任何字符串的结果也不会被引号包裹

下面是一个实际示例:

@mixin string-concat {
    &:after {
        content: "My favorite language is " + Sass;
        font: Arial + " sans-serif";
    }
}

h2 {
    @include string-concat;
}

编译结果:

h2:after {
    content: "My favorite language is Sass";
    font: Arial sans-serif;
}

此外,我们可以使用差值语法动态改变字符串,如果插值的结果为 null,那么该值不会被输出,下面是一个示例:

@mixin string-concat ($language) {
    &:after {
        content: "My favorite language is #{$language}";

        // second way without using interpolation
        //content: "My favorite language is " + $language;
    }
}

h2 {
    @include string-concat(Sass);
}

编译结果:

h2:after {
    content: "My favorite language is Sass";
}

颜色运算

在上面的第二节中,我们分析了算术操作符,在 Sass 中一个有趣的事情就是,我们可以使用算术运算符操作颜色。请看一个实例:

h2 {
    color: #468499 + #204479;
}

编译结果:

h2 {
    color: #66c8ff;
}

那么,其中的解析原则是什么呢?首先我们需要记住,十六进制颜色值是由红绿蓝三种值组合而成,然后在执行相加时,每两个十六进制数值分组相加:46+20=66 (红色), 84+44=c8 (绿色), 和 99+79=ff (蓝色)

下面是我们的最后一个示例,和上面示例的差别在于它使用了 rgba()

h2 {
    color: rgba(70, 132, 153, 1) + rgba(32, 68, 121, 1);

    color: rgba(70, 132, 153, .9) + rgba(32, 68, 121, .7);
    // 报错,透明通道的值必须一致
}

使用算术操作符处理 rgba()hsla() 时,必须让透明通道的值保持一致。

总结

在这篇文章中,主要介绍了Sass的运算。如您所见,其他编程语言也具有类似功能。希望文本对你使用 Sass 有所帮助。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

偏爱自由

这个人比较懒,什么都没有填写!

26 文章
评论
21366 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论