SCSS/SASS 指南

Posted 2021-04-09 Sutaojie和他的朋友们

在开始讨论主要的 Sass 之前需要了的点。

小记：所有的 Sass/SCSS 代码编译成标准的 CSS 代码，所以浏览器可以理解并渲染出。浏览器目前不支持直接使用 Sass/SCSS 或其它 CSS 预加载，也没有像标准的 CSS 文档准则确保有可替代的功能。

开始

你可能刚开始不了解 Sassy CSS 强大之处，直到第一次使用 for-loop 来迭代属性值。然而我们从基础的 SCSS 规则开始，一点点地理解。

什么是 Sass/SCSS 能做但原生 CSS 不能做的？

1. 嵌套规则

2. 变量

3. 更方便地操作

4. 自定义函数

5. 三角函数

6. 循环、判断语句

7. Mixins

Sass 预处理器

SASS — (.sass) Syntactically Awesome Style Sheets.

SCSS — (.scss) Sassy Cascading Style Sheets.

1 使用 Sass 预处理器转换 .scss/.sass 文件

2 基于 $variable 定义

1$number:1px

3 Sass $variable 能被赋给任何 CSS 属性

1#container{
2
3    padding:$number;
4
5}

4 用 CSS 嵌套

 1#A {
 2
 3    color: red;
 4
 5}
 6
 7#A #B {
 8
 9    color: green;
10
11}

5 用 SCSS 嵌套

 1#A {
 2
 3    color: red;
 4
 5    #B {
 6
 7        color: green;
 8
 9    }
10
11}

6 使用 & 字符，像 &:hover。

 1#p {
 2
 3    color:red;
 4
 5    a {
 6
 7        &:hover {
 8
 9            color: green;
10
11        }
12
13    }
14
15}

翻译成

1#p { color: red; }
2
3#p a {}
4
5#p a:hover{ color: green; }

7 通过 @mixin 定义函数赋值给 CSS 属性

 1@mixin flexible() {
 2
 3    display: flex;
 4
 5    jusutfy-content: center;
 6
 7    align-items: center;
 8
 9}
10
11.centered-elements {
12
13    @include flexible();
14
15    border: 1px solid gray;
16
17}

8 通过 @mixin 处理浏览器前缀

 1@mixin rotate($degree) {
 2
 3    -webkit-transform: rotate($degree);
 4
 5    -moz-transform: rotate($degree);
 6
 7    -ms-transform: rotate($degree);
 8
 9    transform: rotate($degree);
10
11}
12
13
14
15.rotate-element { @include rotate(45deg); } 

9 数学计算

 1p {
 2
 3    font-size: 10px + 6px;
 4
 5    height: 12% - 2%;
 6
 7    width: 10px * 10;
 8
 9    padding: 5px + (10px /2) * 3;
10
11}

10 循环，判断语句

 1@mixin zebra() {
 2
 3    @for $i from 1 through 7 {
 4
 5        @if ($i %2 == 1) and ( $i > 3 ) {
 6
 7            .stripe-#{$i} {
 8
 9                color: white;
10
11            }
12
13        }
14
15    }
16
17}
18
19
20
21* { @include zebra(); }