Sass

发布于 2015-09-26 03:30:27 | 245 次阅读 | 评论: 0 | 来源: 网络整理

Sass 是一个功能丰富，用途很广的 CSS 预处理器。它使用 CSS 的超集 SCSS 语法，或者原生语法。

为什么呢？

Harp 默认包含最好的预处理器。这意味着你不需要浪费时间来配置 Sass，折腾安装依赖，最小化 CSS 文件，你甚至不需要选择文件的输入和输出位置。一切都会工作的很好！

Harp 的 Asset Pipeline 用起来相当简单。所有的处理过程静默完成，不需要进行任何配置。只要给你的文件加上 .scss 后缀，而不是 .css，Harp 网页服务器会把它当做 .css 文件进行解析。

本项目中，css 目录中有一个 main.scss 和一个 _variables.scss 文件，像这样：

myproject/
  |- index.html
  +- css/
    |- main.scss     
    +- _variables.scss

这样，你只需简单地在 index.ejs 文件中引用 main.css 以及任何其他 CSS 文件：

<html>
    <head>
        <link href ="/css/main.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        …
    </body>
</html>

然后你的 main.scss 可以这样引用变量：

@import "variables";

body {
    font: 12px Helvetica, Arial, sans-serif;
}

本项目中，css 目录中有一个 main.sass 和一个 _variables.sass 文件，像这样：

myproject/
  |- index.html
  +- css/
    |- main.sass     
    +- _variables.sass

这样，你只要在 index.ejs 文件中引用 main.css 文件以及其他 CSS 文件：

<html>
    <head>
        <link href ="/css/main.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        …
    </body>
</html>

main.sass 可以这样引用变量：

@import variables

body
    font: 12px Helvetica, Arial, sans-serif

在 Harp 的 Sass 版本中，Sass 3.2 的主要功能都是可用的，但是不支持 Sass 3.3。

Harp 使用 libsass，Sass 的 C++ 实现，用来预处理。由于不是 Sass 的原生版本，可能不包含最新的 Sass 3.3 的特征。

如果你有疑问，或者不确定在 Libsass 中一个功能是否有所缺失，或者在 Harp 中存在一个 bug，欢迎访问 file a GitHub issue。