css預編譯

預編譯的原理都是通過能讀取文件的語言編寫的插件把文件解析成css文件，因為他們的文件名都不是css，寫法也不是純css，是無法被瀏覽器識別的，所以寫完需要編譯一下才能使用，這就是預編譯

文中的代碼例子來自博客

目前三個最常見的工具

• sass，2007年誕生，最早也是最成熟的CSS預處理器，擁有ruby社區的支持和compass這一最強大的css框架，目前受LESS影響，已經進化到了全面兼容CSS的SCSS（SCSS 需要使用分號和花括號而不是換行和縮進）
• less，2009年出現，受SASS的影響較大，但又使用CSS的語法，讓大部分開發者和設計師更容易上手，在ruby社區之外支持者遠超過SASS，其缺點是比起SASS來，可編程功能不夠，不過優點是簡單和兼容CSS，反過來也影響了SASS演變到了SCSS的時代，著名的Twitter Bootstrap就是采用LESS做底層語言的
• stylus，2010年產生，來自Node.js社區，主要用來給Node項目進行CSS預處理支持，在此社區之內有一定支持者，在廣泛的意義上人氣還完全不如SASS和LESS

其實這三個工具我都不想用，奈何面試工作要求都需要了解，那就了解了下

sass
文件后綴就是sass，他從sass變成css的方式有

• npm下載命令，通過命令去編譯，改一次就得編譯一次
• 上面的命令有個watch方法可以監聽文件夾變化
• 用考拉工具實時編譯
• 用編輯器【hbuilder，vs，webstrom】都是有自帶的實時編譯工具的，自行百度
• 用代碼編譯框架編譯【gulp，grunt，webpack】

// 例子
.clearfix {
    zoom: 1;
    &:before,
    &:after {
        display: table;

        content: '';
    }
    &:after {
        clear: both;
    }
}

// 變量
$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}
// 編譯后
.selected {
    border: 1px solid #F90;
}

// Mixins
@mixin rounded-corners {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.notice {
    @include rounded-corners;
}
// 編譯后
.notice {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

// extend
.error {
    border: 1px solid red;
    background-color: #fdd;
}
.seriousError {
    color: #fff;
    @extend .error;
}
// 編譯后
.error,
.seriousError {
    border: 1px solid red;
    background-color: #fdd;
}
.seriousError {
    color: #fff;
}

less
文件后綴就是less，他從less變成css的方式有

• npm下載命令，通過命令去編譯，改一次就得編譯一次
• 用考拉工具實時編譯
• 用編輯器【hbuilder，vs，webstrom】都是有自帶的實時編譯工具的，自行百度
• 用代碼編譯框架編譯【gulp，grunt，webpack】

// 例子
.clearfix {
    zoom: 1;
    &:before,
    &:after {
        display: table;

        content: '';
    }
    &:after {
        clear: both;
    }
}

// 變量
@nice-blue: #5B83AD;
@light-blue: @nice-blue +#111;

#header {
    color: @light-blue;
}
// 編譯后
#header {
  color: #6c94be;
}

// Mixins
.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}
#menu a {
    .bordered;
}

// 編譯后
.bordered {
  border-top: dotted 1px black;
}
#menu a {
  border-top: dotted 1px black;
}

// 方法
.box-shadow(@style, @c) when (iscolor(@c)) {
    -webkit-box-shadow: @style @c;
    box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
    .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
    div {
        .box-shadow(0 0 5px, 30%)
    }
}
// 編譯后
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

stylus
文件后綴就是styl，他從styl變成css的方式有

• npm下載命令，通過命令去編譯，改一次就得編譯一次
• 上面的命令有個-w方法可以監聽文件夾變化
• 用代碼編譯框架編譯【gulp，grunt，webpack】

// 例子
.clearfix
    zoom:1
    &:before
    &:after
        dispaly:table
        content:''
    &:after
        clear:both

// 變量
font-size = 14px
body
   font = font-size "Lucida Grande", Arial
// 編譯后
body {
  font: 14px "Lucida Grande", Arial sans-serif;
}

// Mixins
border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n
form input[type=button]
  border-radius(5px)
// 編譯后
form input[type=button] {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

// 方法
add(a, b)
  a + b
body 
  padding add(10px, 5)
// 編譯后
body {
  padding: 15px;
}

webpack安裝三個編譯器
具體怎么配置需要自行百度

npm install sass-loader  node-sass --save-dev
npm install --save-dev less-loader less
npm install stylus-loader stylus --save-dev

學習視頻
Sass和Less入門到精通
stylus文檔