less 和 sass 配置

時間 2020-05-31

標籤 sass 配置简体版

原文原文鏈接

因爲博主一般使用是都是 Sublime , 因此本文有點傾向這款編輯器。
文本配置在 mac 環境， linux 和 windows 環境也同樣，由於用到的都是命令行和 sublime 插件
本文須要有 npm, 沒有安裝的請安裝 nodejs
必步驟須要 root 權限，mac 和 Linux 用戶使用 sudo, windows 用戶請用管理員權限運行 cmd

less 配置

全局配置

全局安裝 less 包：javascript

npm install -g less
npm install -g less-plugin-clean-css
npm install -g less-plugin-autoprefix

解決方法是將安裝目錄中的 lessc 添加到環境變量中。mac 中操做方法以下：css

ln -s /usr/local/lib/node_modules/less/bin/lessc /usr/local/bin/lessc

windows 中把 node_modules/less/bin/lessc 加入環境變量就行了。html

以後咱們就可使用 less 了：java

# 編譯一個文件(生成同名文件)
lessc <.scss文件>
# 編譯一個文件
lessc <.scss文件> <.css文件>

也能夠在 js 中使用：node

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 中使用：linux

<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>

詳細配置請參考 less 手冊shell

sublime 配置

打開 sublime 點擊 command+shift+p(win: ctrl+shift+p), 輸入 Package Install 安裝一下 3 個插件。對於尚未安裝Package Control 的能夠查看 sublime配置及使用技巧npm

less 提供 less 語法高亮
less2css 保存 less 時自動代碼轉換, 依賴 npm 安裝的 less

sublime 中會遇到一個問題: less2css error: 'lessc' is not available。也是上一步沒有配置環境變量致使的
配置完這些後就能夠自動在當前 less 文件目錄下生成同名的 css 文件。vim

Sass 配置

因爲 Sass 是 ruby 開發的，因此要首先安裝 ruby。這裏不重複這個部分，

全局配置

安裝compass, 一個 sass 集成環境, 其中包括 Sass：segmentfault

gem install compass

以後就可使用 sass 了。建立一個工程目錄：

compass create myproject

當前路徑就會有一個名爲 myproject 的工程目錄，裏面有一些初始化文件，./sass/ 目錄是放 sass 文件的，./stylesheets 是放編譯後的 css 文件的，config.rb 是一個 ruby 語言的配置文件。

文件編譯:

# 編譯一個文件
sass <.scss文件> <.css文件>
# 編譯整個目錄(只編譯發生變化的文件)
sass <.scss文件目錄> <.css文件目錄>
# 編譯整個目錄(編譯所有文件)
sass --force <.scss文件目錄> <.css文件目錄>
# 利用 compass 編譯整個工程目錄(接受一樣的參數)
compass compile
# 利用 compass 監視
compass watch

除了--force 參數，還有以下參數

--watch 監視對應操做，當其中文件保存時自動編譯， ctrl+C 結束監視
--style 指定輸出格式，參數值爲：
  nested: '}' 和 '{' 都不單獨一行
  compressed: 因此內容1行，壓縮格式用於發佈
  expended: '}' 單獨一行; '{' 不單獨一行
  compact: 一個 '{...}' 佔一行

詳細配置請參考 compass 手冊, Sass 手冊

修復中文註釋會亂碼的問題：

這是個 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 點擊 command+shift+p(win: ctrl+shift+p), 輸入 Package Install 安裝一下 2 個插件。對於尚未安裝Package Control 的能夠查看 sublime配置及使用技巧

Sass 提供 Sass 語法高亮

sublime 對 sass 不須要多餘的配置，全部功能依然經過命令行完成。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。