CSS预处理器之Sass（三）-阿里云开发者社区

CSS预处理器之Sass（三）

2024-07-02 18

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS预处理器之Sass（三）

CSS预处理器之Sass（二）：https://developer.aliyun.com/article/1556764

7.2 多继承

index.scss

.message {
    padding: 15px;
    margin-top: 100px;
    border: 1px solid transparent;
}

.important {
    @extend .message;
    font-weight: 800;
    font-size: 14px;
}

.message-danger {
    @extend .important;
    background-color: #000;
    border-color:#B1EBB6;
}

转为 css 后

index.css

.message, .important, .message-danger {
  padding: 15px;
  margin-top: 100px;
  border: 1px solid transparent;
}

.important, .message-danger {
  font-weight: 800;
  font-size: 14px;
}

.message-danger {
  background-color: #000;
  border-color: #B1EBB6;
}
/*# sourceMappingURL=index.css.map */

7.3 占位符 %

%message，它是一个占位符选择器。占位符选择器不会生成实际的 CSS 输出，只有在被继承时才会生成对应的样式规则。

index.scss

%message {
    padding: 15px;
    margin-top: 100px;
    border: 1px solid transparent;
}

.important {
    @extend %message;
    font-weight: 800;
    font-size: 14px;
}

.message-danger {
    @extend .important;
    background-color: #000;
    border-color:#B1EBB6;
}

转为 css 后

index.css

.important, .message-danger {
  padding: 15px;
  margin-top: 100px;
  border: 1px solid transparent;
}

.important, .message-danger {
  font-weight: 800;
  font-size: 14px;
}

.message-danger {
  background-color: #000;
  border-color: #B1EBB6;
}
/*# sourceMappingURL=index.css.map */

⑧ Sass 运算符的基本使用 ✅

8.1 等号操作符

所有数据类型都支持等号运算符

==、!=

$them: "dark";
.container {
    @if $them == 'dark' {
        background-color: #000;
        color: #fff;
        font: {
            weight: 400;
            size: 12px;
        }
    }
    @else {
        background-color: #fff;
        color: #000;
        font: {
            weight: 500;
            size: 14px;
        }
    }
}

转为 css 后

index.css

.container {
  background-color: #000;
  color: #fff;
  font-weight: 400;
  font-size: 12px;
}
/*# sourceMappingURL=index.css.map */

8.1 关系（比较）运算符

关系运算符只支持整数这一数据类型

< 、> 、<=、>=

$them: 1;
.container {
    @if $them >= 1 {
        background-color: #000;
    }
    @else {
        background-color: #fff;
    }
}

8.2 逻辑运算符

and、or、not

$width: 100;
$height: 200;
$last: false;
div {
    @if $width > 50 and $height < 300 {
        font-size: 16px;
    }
    @else {
        font-size: 14px;
    }
    @if not $last {
        border-color: red;
    }
    @else {
        border-color: blue;
    }
}

转为 css 后

div {
  font-size: 16px;
  border-color: red;
}
/*# sourceMappingURL=index.css.map */

8.3 数字操作符

sass 中支持的数字类型有哪些呢？

纯数字、百分号、css 部分单位

可以使用如下操作符作为运算

+、-、*、/、%

8.3.1 +

.container {
    width: 50 + 20;
    width: 50 + 20%;
    width: 50% + 20%;
    width: 50 + 20px;
    width: 50px + 20px;
    width: 50px + 20pt;
}

转为 css 后

.container {
  width: 70;
  width: 70%;
  width: 70%;
  width: 70px;
  width: 70px;
  width: 76.6666666667px;
}
/*# sourceMappingURL=index.css.map */

8.3.2 -

.container {
    width: 50 + 20;
    width: 50 - 20%;
    width: 50% - 20%;
    width: 50 - 20px;
    width: 50px - 20px;
    width: 50px - 20pt;
}

转为 css 后

.container {
  width: 70;
  width: 30%;
  width: 30%;
  width: 30px;
  width: 30px;
  width: 23.3333333333px;
}
/*# sourceMappingURL=index.css.map */

8.3.3 *

.container {
    width: 10 * 20;
    width: 5 * 10%;
    // width: 10% * 10%; ❌
    // width: 10px * 10px; ❌
    width: 10px * 2;
}

转为 css 后

.container {
  width: 200;
  width: 50%;
  width: 20px;
}/*# sourceMappingURL=index.css.map */

8.3.4 /

/ 运算符只有在某些特殊情况下才会当作是运算符，不然就是一个普通的分隔符。

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

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

$width: 100px;
.container {
    width: 10 / 5;
    width: (10 / 5);
    width: $width / 5;
    width: round($number: 50) / 2;
    width: 10px / 2px;
    width: 10px / 2px + 3px;
    width: 10px / 2 + 3px;
}

转为 css 后

.container {
  width: 10/5;
  width: 2;
  width: 20px;
  width: 25;
  width: 10px/2px;
  width: 8px;
  width: 8px;
}
/*# sourceMappingURL=index.css.map */

8.3.5 %

$width: 100px;
.container {
    width: 10 % 5;
    width: 50 % 3px;
    width: 50px % 3px;
    width: 50% / 7;
    width: 50px % 7;
    width: 50% % 9%;
    // width: 50% % 10px; ❌
    width: 50px % 10pt; // => 等价于 50px % 13.33333px
    width: 50px + 10pt; // => 10pt = 13.33333px
    width: 50px % 13.33333px;
}

转为 css 后

.container {
  width: 0;
  width: 2px;
  width: 2px;
  width: 50%/7;
  width: 1px;
  width: 5%;
  width: 10px;
  width: 63.3333333333px;
  width: 10.00001px;
}
/*# sourceMappingURL=index.css.map */

8.4 字符串运算

+ 可用于连接字符串

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

$width: 100px;
.container {
    content: "foo" + bar;
    content: foo + "bar";
    content: foo + bar;
    content: "foo" + "bar";
}

转为 css 后

.container {
  content: "foobar";
  content: foobar;
  content: foobar;
  content: "foobar";
}
/*# sourceMappingURL=index.css.map */

⑨ 插值语句 #{ … } 的基本使用 ✅

可以用于

选择器
属性名
属性值
注释

$class-name: danger;
$attr: color;
$font-size: 12px;
$line-height: 30px;
$author: "一勺";

/*
    文件说明
    @author: #{$author}
*/

a.#{$class-name} {
    border-#{$attr}: #f00;
    font: #{$font-size} / #{$line-height} Helvetica;
}

转为 css 后

@charset "UTF-8";
/*
    文件说明
    @author: 一勺
*/
a.danger {
  border-color: #f00;
  font: 12px/30px Helvetica;
}
/*# sourceMappingURL=index.css.map */

CSS预处理器之Sass（三）

7.2 多继承

7.3 占位符 %

⑧ Sass 运算符的基本使用 ✅

8.1 等号操作符

8.1 关系（比较）运算符

8.2 逻辑运算符

8.3 数字操作符

8.3.1 +

8.3.2 -

8.3.3 *

8.3.4 /

8.3.5 %

8.4 字符串运算

⑨ 插值语句 #{ … } 的基本使用 ✅

⑨ Sass 常见函数的基本使用 ✅

小结

热门文章

最新文章

相关课程

相关电子书

相关实验场景