sass(1) - 初見

CSS自己並不算是一種編程語言 , 它沒有變量 , 也沒有條件語句
只是做爲單純的描述 , 寫起來比較費事 , 同時也須要考慮不少的兼容性問題
很天然地 , 有人開始爲CSS加入編程元素 , 這類工具就叫作CSS預處理器
這類工具使用編程的風格去編寫相似CSS的代碼 , 而後經過工具的處理生成瀏覽器能夠識別的CSS文件

SASS與SCSS

這二者實際上是同一種東西 , 均可以稱之爲SASS

• 文件的擴展名不一樣 , 分別是sass和scss
• sass以嚴格的縮進式語法規則來編寫 , 不帶大括號和分號 , 而scss的語法與css的語法很是相似

下面是最簡單的例子 , 運用了變量的定義和調用
sass語法

$font-stack
: Helvetica, sans-serif  //定義變量
$primary-color: #333 //定義變量

body
  font: 100% $font-stack
  color: $primary-color

scss語法

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

最終編譯出來的css都是

body 
{
  font: 100% Helvetica, sans-serif;
  color: #333;
}

sass編譯工具

sass自己是相似ruby的語法的 , 使用ruby去編譯sass是最直接的
可使用ruby -v 查看是否安裝ruby ( Mac系統自帶 )
使用ruby的包管理工具gem安裝sass模塊

$ gem install sass

若是須要進行卸載 , 執行 gem uninstall sass 便可

執行sass -v 正常顯示版本號表明安裝成功
執行編譯的操做很是簡單

#sass 源文件名:目標文件名
$ sass test.scss:test.css

• 添加--watch參數能夠啓動一個程序監控該scss文件的變化 , 一旦發生變化則從新執行編譯
• 添加--style參數可使用不一樣風格的輸出方式 ( 一般能夠用於壓縮css代碼 )
  例如sass test.scss:test.css --style compressed
  nested - 嵌套輸出
  expanded - 展開輸出
  compact - 緊湊輸出
  compressed - 壓縮輸出

node-sass

這個模塊是nodejs的一個第三方模塊 , 用於編譯sass代碼 , 爲了方便 , 咱們配合webpack來進行使用

$ npm install node-sass sass-loader --save-dev

爲了查看編譯事後的文件 , 咱們須要把編譯事後的css代碼放入一個獨立的文件當中
須要使用extract-text-webpack-plugin模塊
這是一個webpack的插件
安裝以後
在webpack.config.js當中

var webpack = require("webpack");
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    entry: {
        entry : './src/entry.js'
    },
    output: {
        path: __dirname+"/dist",
        filename: 'js/[name].bundle.js'
    },
    module: {
        loaders: [
        { test: /\.css$/, loaders: ["style-loader","css-loader"]},
        { test: /\.scss$/, loaders : ExtractTextPlugin.extract({fallback:"style-loader",use:["css-loader","postcss-loader","sass-loader?outputStyle=compact"]})}
    ]
    },
    plugins : [
    //壓縮打包以後的js
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
    //寫入的文件
        new ExtractTextPlugin("css/[name][contenthash].css")
    ]
};

上面爲sass-loader加的參數outputStyle做用與ruby當中的–style相同

在src/entry.js當中引入scss文件

require("./style/test.scss");