CSS预处理器

1、scss、sass

世界上最成熟、最稳定、最强大的专业级CSS扩展语言！——官网

现在一般用scss，sass是老语法了

两个关键词：变量 嵌套

//scss写法 $变量名提前赋值，后续可使用

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译成css写法

nav {
  width: 100px;
  color: #F90;
}

//scss写法 避重复写父元素的选择器
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

//编译成css写法 
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

2.less

变量

//less写法 @变量名
@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

//编译成css写法
#header {
  width: 10px;
  height: 20px;
}

嵌套

//less写法
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

//编译成css写法
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

3.stylus

较少用，极简，去掉花括号 {} 分号 ;，类似编程语言

//stylus写法
body
  font: 12px Helvetica, Arial, sans-serif

a.button
  -webkit-border-radius: 5px
  -moz-border-radius: 5px
  border-radius: 5px

//编译成css写法
body {
  font: 12px Helvetica, Arial, sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

• 冒号可有可无
• 分号可有可无
• 逗号可有可无
• 括号可有可无
• 变量
• 插值（Interpolation）
• 混合（Mixin）
• 数学计算
• 强制类型转换
• 动态引入
• 条件表达式
• 迭代
• 嵌套选择器
• 父级引用
• Variable function calls
• 词法作用域
• 内置函数（超过 60 个）
• 语法内函数（In-language functions）
• 压缩可选
• 图像内联可选
• Stylus 可执行程序
• 健壮的错误报告
• 单行和多行注释
• CSS 字面量
• 字符转义
• TextMate 捆绑
• 以及更多！

配置