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");