预编译的原理都是通过能读取文件的语言编写的插件把文件解析成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文档