Sass 是一個(gè)功能豐富,用途很廣的 CSS 預(yù)處理器。它使用 CSS 的超集 SCSS 語法,或者原生語法。
Harp 默認(rèn)包含最好的預(yù)處理器。這意味著你不需要浪費(fèi)時(shí)間來配置 Sass,折騰安裝依賴,最小化 CSS 文件,你甚至不需要選擇文件的輸入和輸出位置。一切都會(huì)工作的很好!
Harp 的 Asset Pipeline 用起來相當(dāng)簡單。所有的處理過程靜默完成,不需要進(jìn)行任何配置。只要給你的文件加上 .scss
后綴,而不是 .css
,Harp 網(wǎng)頁服務(wù)器會(huì)把它當(dāng)做 .css
文件進(jìn)行解析。
本項(xiàng)目中,css 目錄中有一個(gè) main.scss
和一個(gè) _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;
}
本項(xiàng)目中,css 目錄中有一個(gè) main.sass
和一個(gè) _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++ 實(shí)現(xiàn),用來預(yù)處理。由于不是 Sass 的原生版本,可能不包含最新的 Sass 3.3 的特征。
如果你有疑問,或者不確定在 Libsass 中一個(gè)功能是否有所缺失,或者在 Harp 中存在一個(gè) bug,歡迎訪問 提交 GitHub 問題。
更多建議: