由于博主通常使用是都是 Sublime , 所以本文有點(diǎn)傾向這款編輯器。
文本配置在 mac 環(huán)境硕盹， linux 和 windows 環(huán)境也一樣，因?yàn)橛玫降亩际敲钚泻?sublime 插件
本文需要有 npm, 沒有安裝的請(qǐng)安裝 nodejs
必步驟需要 root 權(quán)限，mac 和 Linux 用戶使用 sudo, windows 用戶請(qǐng)用管理員權(quán)限運(yùn)行 cmd
less 配置
全局配置
全局安裝 less 包：
npm install -g less
npm install -g less-plugin-clean-css
npm install -g less-plugin-autoprefix
解決方法是將安裝目錄中的 lessc 添加到環(huán)境變量中忌卤。mac 中操作方法如下：
ln -s /usr/local/lib/node_modules/less/bin/lessc /usr/local/bin/lessc
windows 中把 node_modules/less/bin/lessc 加入環(huán)境變量就好了。
之后我們就可以使用 less 了：
# 編譯一個(gè)文件(生成同名文件)
lessc <.scss文件>
# 編譯一個(gè)文件
lessc <.scss文件> <.css文件>
也可以在 js 中使用：
var less = require('less');
less.render('.class { width: (1 + 1) }', {
paths: ['.', './lib'], // Specify search paths for @import directives
filename: 'style.less', // Specify a filename, for better error messages
compress: true // Minify CSS output
}, function (e, output) {
console.log(output.css);
});
或者在 html 中使用：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<body>
<p>Make sure you include your stylesheets before the script.</p>
<p>When you link more than one .less stylesheet each of them is compiled independently. So any variables, mixins or namespaces you define in a stylesheet are not accessible in any other.</p>
<p>Due to the same origin policy of browsers loading external resources requires enabling CORS</p>
</body>
<script>
less = {
env: "development",
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
rootpath: ":/a.com/"
};
</script>
<script src="less.js" type="text/javascript"></script>
詳細(xì)配置請(qǐng)參考 less 手冊(cè)
sublime 配置
打開 sublime 點(diǎn)擊 command+shift+p(win: ctrl+shift+p), 輸入 Package Install 安裝一下 3 個(gè)插件楞泼。對(duì)于還沒有安裝Package Control 的可以查看 sublime配置及使用技巧
- less 提供 less 語(yǔ)法高亮
- less2css 保存 less 時(shí)自動(dòng)代碼轉(zhuǎn)換, 依賴 npm 安裝的 less
sublime 中會(huì)遇到一個(gè)問題: less2css error: 'lessc' is not available驰徊。也是上一步?jīng)]有配置環(huán)境變量導(dǎo)致的
配置完這些后就可以自動(dòng)在當(dāng)前 less 文件目錄下生成同名的 css 文件笤闯。
Sass 配置
由于 Sass 是 ruby 開發(fā)的，所以要首先安裝 ruby棍厂。這里不重復(fù)這個(gè)部分颗味，
全局配置
安裝compass, 一個(gè) sass 集成環(huán)境, 其中包括 Sass：
gem install compass
之后就可以使用 sass 了。創(chuàng)建一個(gè)工程目錄：
compass create myproject
當(dāng)前路徑就會(huì)有一個(gè)名為 myproject 的工程目錄牺弹，里面有一些初始化文件浦马，./sass/ 目錄是放 sass 文件的，./stylesheets 是放編譯后的 css 文件的张漂，config.rb 是一個(gè) ruby 語(yǔ)言的配置文件晶默。
文件編譯:
# 編譯一個(gè)文件
sass <.scss文件> <.css文件>
# 編譯整個(gè)目錄(只編譯發(fā)生變化的文件)
sass <.scss文件目錄> <.css文件目錄>
# 編譯整個(gè)目錄(編譯全部文件)
sass --force <.scss文件目錄> <.css文件目錄>
# 利用 compass 編譯整個(gè)工程目錄(接受同樣的參數(shù))
compass compile
# 利用 compass 監(jiān)視
compass watch
除了--force 參數(shù)，還有如下參數(shù)
--watch 監(jiān)視對(duì)應(yīng)操作航攒，當(dāng)其中文件保存時(shí)自動(dòng)編譯磺陡， ctrl+C 結(jié)束監(jiān)視
--style 指定輸出格式，參數(shù)值為：
nested: '}' 和 '{' 都不單獨(dú)一行
compressed: 所以內(nèi)容1行漠畜，壓縮格式用于發(fā)布
expended: '}' 單獨(dú)一行; '{' 不單獨(dú)一行
compact: 一個(gè) '{...}' 占一行
詳細(xì)配置請(qǐng)參考 compass 手冊(cè), Sass 手冊(cè)
修復(fù)中文注釋會(huì)亂碼的問題：
這是個(gè) ruby 插件的問題仅政，去 ruby 目錄中的 gem 中找到
engine.rb，mac 操作如下：
sudo vim /usr/local/lib/ruby/gems/2.4.0/gems/sass-3.4.24/lib/sass/engine.rb
大約在55行附近 找到 "module Sass", 在其后面插入2行：
# let sass support chinese comments
Encoding.default_external = Encoding.find('utf-8')
sublime 配置
打開 sublime 點(diǎn)擊 command+shift+p(win: ctrl+shift+p), 輸入 Package Install 安裝一下 2 個(gè)插件盆驹。對(duì)于還沒有安裝Package Control 的可以查看 sublime配置及使用技巧
- Sass 提供 Sass 語(yǔ)法高亮
sublime 對(duì) sass 不需要多余的配置圆丹，所有功能依然通過命令行完成。
