SCSS--SCSS相关介绍

Posted 2021-09-05 Z && Y

SCSS相关介绍

一、CSS预处理器出现的原因

1. 无法嵌套书写导致代码繁重、冗杂、逻辑混乱。
2. 没有变量和样式复用机制，属性值只能以字面量的形式重复输出。

# 总结：代码复用性低；不易于维护
# 注：现在，现在的CSS是可以定义变量的！！！

:root{
    --red: #f3e1e1;
}

---

二、出名的CSS预处理器介绍

1. SCSS/SASS

SASS (.scss)。于2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。

2. LESS

LESS (.less)。于2009年诞生，借鉴了SASS的长处，并兼容了CSS语法，使得开发者使用起来更为方便顺手，但是相比于SASS，其编程功能不够丰富，反而促使SASS进化成为了SCSS。

3. Stylus

Stylus (.styl)。于2010年诞生，出自Node.js社区，主要用来给Node项目进行CSS预处理支持，人气较前两者偏低。

---

三、SCSS和SASS之间的关系

简而言之：

Sass有两套语法：

1.第一种或更新的语法被称为SCSS。它是CSS语法的扩展。这意味着每个有效的CSS样式表都是具有相同含义的有效SCSS文件。下文描述的Sass功能增强了此语法。使用此语法的文件扩展名为.scss。

2.第二种或更旧的语法被称为SASS。提供了一种更为简洁的CSS编写方式。它使用缩进而不是方括号来表示选择器的嵌套，并使用换行符而不是分号来分隔属性。使用此语法的文件扩展名为.sass。

任何一种格式可以直接 导入 (@import) 到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式

---

四、使用CSS预处理器的优劣

1.优点

CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题。支持嵌套、变量和逻辑等。可以让CSS更加简洁、提高代码复用性、逻辑分明等等

2.缺点

css的文件体积和复杂度不可控；增加了调试难度和成本等。

五、选择SCSS的原因

1. 官方介绍

   Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
   

2. 特色功能

   • 完全兼容 CSS3
   • 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
   • 通过函数进行颜色值与属性值的运算
   • 提供控制指令 (control directives)等高级功能
   • 自定义输出格式

---

---