Sass（一）预处理、变量、嵌套、片段、Moudles、Mixins(混合)、Extend/Inheritance扩展符、操作符

Sass（一）预处理、变量、嵌套、片段、Moudles、Mixins(混合)、Extend/Inheritance扩展符、操作符

总结：

• 预处理

  • 在命令行中执行 sass input.scss output.css 命令， 将会把 Sass 文件 input.scss 编译输出为 output.css。

  • --watch 参数来监视单个文件或目录

  • sass --watch input.scss output.css
    

  • 可以使用文件夹路径作为输入和输出， 并使用冒号分隔它们，来监听文件并输出到目录。

    sass --watch app/sass:public/stylesheets
    

• 变量

  • Sass 使用 $ 符号 作为变量的标志
  • 变量是存储信息并在将来重复利用的一种方式，在整个样式表中都可访问。 你可以在变量中存储颜色、字体 或任何 CSS 值，并在将来重复利用

• 嵌套

  • 在编写 HTML 时，您可能已经注意到它有一个清晰的嵌套和可视化层次结构。 而 CSS 则没有。
  • Sass 允许您嵌套 CSS 选择器，嵌套方式 与 HTML 的视觉层次结构相同。请注意，过度嵌套的规则 将导致过度限定的 CSS，这些 CSS 可能很难维护，并且 通常被认为是不好的做法。

• 片段

  • 您可以创建部分 Sass 文件，其中包含可以包含在其他 Sass 文件中的小 CSS 片段。
  • Partial 是一个以下划线开头的 Sass 文件。 您可以将其命名为 _partial.scss。 下划线让 Sass 知道该文件只是部分文件，不应将其生成为 CSS 文件。

• Moudles

  • 使用的是@use ‘base’; 在styles.scss 文件中。 使用文件时，不需要包含文件扩展名。

• Mixins(混合)

  • mixin 的一个很好的用途是供应商前缀(vendor prefixes)
  • 要创建一个 mixin，你可以使用 @mixin 指令并给它一个名字。
  • 我们将 mixin 命名为 transform。 我们还在括号内使用变量$property，这样我们就可以传入任何我们想要的转换。
  • 创建 mixin 后，您可以将其用作 CSS 声明，以 @include 开头，后跟 mixin 的名称。

• Extend/Inheritance扩展符

  • 这是 Sass 最有用的特性之一。 使用 @extend 可以让你从一个选择器到另一个选择器共享一组 CSS 属性。
  • 占位符%：神奇发生在生成的 CSS 中，其中每个类都将获得与 %message-shared 相同的 CSS 属性。 这有助于您避免在 HTML 元素上编写多个类名。

• 操作符

  • Sass 支持一些标准的 数学运算符，例如 +、-、*、/ 和 %。

1. 安装Sass

应用程序

有很多应用程序可以让您在几分钟内启动并运行 Sass，并且支持 Mac、Windows 和 Linux 平台。这些程序 大部分是可以免费下载的，但也有一些是需要付费的 （但完全值得）。

• CodeKit (Paid) Mac
• Compass.app (Paid, Open Source) Mac Windows Linux
• Ghostlab (Paid) Mac Windows
• Hammer (Paid) Mac
• Koala (Open Source) Mac Windows Linux
• LiveReload (Paid, Open Source) Mac Windows
• Prepros (Paid) Mac Windows Linux
• Scout-App (Free, Open Source) Windows Linux Mac

命令行

通过命令行安装 Sass 后，你就可以执行 sass 命令把 .sass 和 .scss 文件编译为 .css 文件。 例如：

sass source/stylesheets/index.scss build/stylesheets/index.css

首先从下面列出的方法中选择一种方法安装 Sass，然后执行 sass --version 命令以验证安装是否正确。如果安装成功，将输出 版本号 1.26.4。你还可以执行 sass --help 获取 更多关于命令行用法的信息。

如果一切就绪，那就开始吧。如果你是个 Sass 初学者，我们也为你准备了快速入门的资源。

深入了解 Sass

• 跨平台（独立安装）

  如果你用的是 Windows、Mac 或 Linux 系统， 可以根据你的操作系统 从 GitHub 上下载对应的安装包并