12.26日总结Sass

12.26日总结Sass

1、Sass

1.1 Sass是什么

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

1.2 语法格式

Sass被称为缩进格式通常简称 "Sass"，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。这种格式以 .sass 作为拓展名。

1.3 下载Sass

①：通过下载ruby，查看ruby下载的版本，通过本机命令行下载Sass，安装Sass环境

②：通过Vscode插件进行Sass编写内容

1.4 Sass变量

Sass 变量可以存储以下信息：

• 字符串

• 数字

• 颜色值

• 布尔值

• 列表

• null 值

Sass 变量使用 $ 符号

1.5 Sass嵌套规则

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

1.5.1 父选择器 &

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

1.5.2 属性嵌套

Sass 允许将属性嵌套在命名空间中

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译为

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

1.6 默认变量

如果分配给变量的值后面添加了 !default 标志 ，这意味着该变量如果已经赋值，那么它不会被重新赋值，但是，如果它尚未赋值，那么它会被赋予新的给定值。 如果在此之前变量已经赋值，那就不使用默认值，如果没有赋值，则使用默认值。

1.7 @import引入

Sass 可以帮助我们减少 CSS 重复的代码，节省开发时间。

通常@import寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

Sass 允许同时导入多个文件，例如同时导入 rounded-corners 与 text-shadow 两个文件：

@import "rounded-corners", "text-shadow";