初识css预处理器：Sass、LESS

这篇文章是初步介绍css预处理的，详细学习请移步官网~

sass中文文档：https://www.sass.hk/docs

less中文文档：http://lesscss.cn/

什么是css预处理器

CSS 预处理器是一种语言。

用通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式编写，再通过编译器转化为正常的 CSS 文件”，无需考虑浏览器的兼容性问题。

可以在 CSS 中使用变量、简单的程序逻辑、函数等等，可以让你的 CSS 更加简洁，适应性更强，代码更直观等诸多好处。

 

但CSS预处理器也不是万金油，原生CSS的好处在于简便、随时随地被使用和调试。

使用预处理器的话有预编译CSS步骤的加入，让我们开发工作流中多了一个环节，调试也变得更麻烦了。更大的问题在于，预编译很容易造成后代选择器的滥用。

所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，CSS预处理器有没有解决更大的麻烦。

Less和Sass

以下概念以sass为例讲解，less中一样的。

变量：

$width: 5em;
//直接使用即调用变量：
#main {
  width: $width;
}

编译为：

#main {
  width: 5em;
}

混合（Mixins）：定义好一个基本样式，在需要的选择器中引用。

//定义要引用的样式： @mixin指令后添加名称与样式
@mixin large-text {
  color: #ff0000;
}
//引用混合样式：@include 指令后添加名称
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

上面代码编译为：

.page-title {
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

参数混合（Parametric）：

带参数的混合，像函数一样定义一个参数的默认值、或者参数属性集合

@mixin sexy-border($color, $width) {//参数：$color, $width
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

编译为：

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

嵌套规则（Nested Rules）：

将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。避免了重复输入父选择器

#main p {//父选择器
  color: #00ff00;
  width: 97%;

  .redbox {//子选择器
    background-color: #ff0000;
    color: #000000;
  }
}

编译为：

#main p {
  color: #00ff00;
  width: 97%; 
}

#main p .redbox {
    background-color: #ff0000;
    color: #000000; 
}

运算（Operations）：在CSS中使用加、减、乘、除进行数学运算，主要运用于属性值和颜色的运算，可以轻松实现属性值之间的复杂关系。

p {
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

编译为:

p {
  width: 500px;
  height: 250px;
  margin-left: 9px; 
}

颜色功能（Color function）：颜色的函数运算，可以编辑你的颜色，颜色会先被转化成HSL色彩空间，然后在通道级别操作。

命名空间（Namespaces）：样式分组，即将一些变量或者混合模块打包封装，从而方便被调用，更好的组织CSS和属性集的重复使用。

作用域（Scope）：局部修改样式，先从本地查找变量或者混合模块，如果没有找到的话就会去父级作用域中查找，直到找到为止，这一点和其他程序语言的作域非常的相似。

JavaScript表达式(Javascript evaluation)：在CSS样式中使用Javascript表达式赋值。

上面八条在LESS和Sass中是一个很重要的概念，只有把上面的概念理解清楚了，才能更好的学习LESS和Sass。

 

Less和Sass之间的主要区别是他们的实现方式不同：

　　LESS是基于JavaScript运行,需要引入Less.js来处理代码输出css到浏览器，所以LESS是在客户端处理。

　　Sass是基于Ruby的，需要安装Ruby环境，是在服务器端处理的。

 

很多开发者不选择LESS是因为LESS输出修改过的CSS到浏览器需要依赖于Javascript引擎，而Javascript引擎需要额外的时间来处理代码。

解决：

比如只在开发环节使用LESS。开发完成，复制粘贴LESS输出的到一个压缩器，然后到一个单独的CSS文件来替代LESS文件。

另一种方式是使用LESS APP来编译和压缩你的LESS文件。

两种方式都将是最小化你的样式输出，从而避免由于用户的浏览器不支持Javascript而可能引起的任何问题。尽管这不大可能，但终归是有可能的。

 

Sass确实需要在Ruby上运行,然而他不需要在服务器上编译CSS。它也可以在本地编译（正如前面提到的LESS）,编译后的CSS可以运用到你的项目上，Wordpress主题中，引擎模板，或者任何服务器，就像你的CSS文件。Mac也默认提供了对Sass的安装和支持，只需要一行命令就可以（sudo gem install sass）。

如果你安装了Sass，你在本地就可以将Sass转译成CSS，并将转译的代码用到你的项目中。如果你还不知道如何安装Sass(或者Compass)，我们也写了一份详细的指南Getting Started with Sass and Compass，可以很好的帮你清除这个障碍。

使用

首先 Sass 和 Less 都使用的是标准的 CSS 语法，因此你可以很方便的将已有的 CSS 代码转为预处理器代码， Less 使用 .less 扩展名

Sass 有两种语法格式：

使用 “花括号” 表示属性属于某个选择器，“分号” 分隔属性，这种格式以 .scss 作为拓展名。

另一种简化格式：使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，这种格式以 .sass 作为拓展名。

技巧收集

使用混合简化html的class数量，比如下面这个例子，本来写.border和.post 两个class，使用引用，就只写.post。而且ul也可以共享这个.border的样式，减少重复代码

.border {
  border-top: 1px dotted #333;
}

article.post {
  background: #eee;
  .border;
}

ul.menu {
  background: #ccc;
  .border;
}

混合的另一种模式：选择器继承（less没有），无需再使用逗号

.menu {
  border: 1px solid #ddd;
}
.footer {
  @extend .menu;
}
/* 上面的规则和下面的规则是一样的效果 */
.menu, .footer {
  border: 1px solid #ddd;
}

sass的混合写法

//定义
@mixin error($borderWidth: 2px) {
  border: $borderWidth solid #F00;
  color: #F00;
}
//使用
.generic-error {
  padding: 20px;
  margin: 4px;
  @ include error(); /* Applies styles from mixin error */
}

针对浏览器私有前缀的样式，使用参数混合非常有用

.border-radius( @radius: 3px ) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

div {
  .border-radius(10px);
}

使用运算，在基础样式做数学运算实现其他样式。比如统计页面的border宽度有哪几种，然后定义个基础的border变量，其余border在此基础做运算

@base_border_width: 2px;
.error {
  border: @base_border_width*2 solid #F00;
  color: #F00;
}

使用嵌套规则，减少写父级元素名的代码量或者减少选择器层级。也可以组件实现对应，方便管理。

//糟糕的多次写section
section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}

使用嵌套后

section {
  margin: 10px;
 
  nav {
    height: 25px;
 
    a {
      color: #0982C1;
 
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

减少层级。下面的h2在原生的css中选择器为：#site-body .post .post-header h2。下面这一整个可以是一个组件的样式

#site-body { …
  .post { …
    .post-header { …
      h2 { … }
      a { …
        &:visited { … }
        &:hover { … }
      }
    }
  }
}