css预处理器

一. 为什么会出现css预处理器

CSS不是一种编程语言，仅仅只能用来编写网站样式，在web初期时，网站的搭建还比较基础，所需要的样式往往也很简单。但是随着用户需求的增加以及网站技术的升级，css一成不变的写法也渐渐不再满足于项目。没有类似js这样的编程语言所有的变量，常量以及其他的编程语法，css的代码难免会显得臃肿以及难以维护。但是又没有css的替代品，于是css预处理器就作为css的扩展，出现在了前端技术中。

二.常见的css预处理器

发展至今，CSS预处理器的技术已经相当成熟，也涌现出了很多中不同的CSS预处理器语言。目前主流的有三种：Sass(Scss), Less, Stylus。

三.CSS预处理器的方便之处

–以Sass为例

–Sass主要的功能有：允许定义变量，允许CSS代码嵌套，函数功能，Mixin，继承等。 这些功能使得编写CSS更加贴合编程语言的习惯，使得CSS代码复用性更高，代码功能更加直观，也更加易于程序员的阅读与维护。

四.sass

它是一个通过转换scss 的 css文件，文件后缀名：.scss。

sass有两种语法形式

首先是scss，也就是我们这个后缀形式的语法，是最新的一种形式。这种格式在 CSS3 语法的基础上进行扩展，这意味着每个CSS样式表是一个同等的SCSS文件。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器专属前缀语法，这种语法的样式表文件需要以 .scss 作为拓展名。

另一种，也是最早的语法，被称为缩进语法。它提供了一种更加简洁的方式来书写CSS。它使用缩进而不是花括号来表示选择器的嵌套，用换行而不是分号来分隔属性，一些人认为这样做比 SCSS 更容易阅读，书写也更快速。缩排语法具有 Sass 的所有特色功能，虽然有些语法上稍有差异。使用此种语法的样式表文件需要以 .sass 作为扩展名。

主要功能

• 可以使用变量、常量；

• 允许css代码嵌套；

• 混入Mixin；

• 继承；

• 循环语句等功能。

这些功能使得编写css更加贴合编程语言的习惯，从而更有效有弹性的写出CSS

1.变量（Variables）

变量的提供，可以避免由于设计师频繁更改某一全局属性（比如整体颜色风格），而引起的被动增加工作量问题。

变量的使用：以$开头，有全局变量和局部变量。

sass的变量必须是$开头，后面紧跟变量名，变量值和变量名之间需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。

$bgColor: #ffffff; // 全局变量
div { 
  $width: 1000px; // 局部变量
  width: $width;
  background: $bgColor;
}

变量用在属性中

变量用在属性中，需要写在#{ }中，如下：

$posi: left;
div { 
  border-#{$posi}: 1px solid $color;
}

2.嵌套（Nesting）

Sass允许代码嵌套，用于选择后代。相对于css原生的后代选择器，嵌套样式的代码，会更加直观。包括选择器嵌套，属性嵌套。

选择器嵌套

选择器嵌套：在一个选择器中嵌套另一个选择器来实现继承，增强了sass文件的结构性和可读性。

在选择器嵌套中，可以使用&表示父元素选择器，示例如下：

scss

#top_btn{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
  li{
    float:left;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }
}

css：

#top_btn{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
}  
#top_btn li{
  float:left;
}
#top_btn a{
  display: block;
  padding: 0 10px;
  color: #fff;
}
#top_btn a:hover{
  color:#ddd;
}

属性嵌套

除了选择器可以嵌套，属性和伪类也可以嵌套。

属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

示例：

.main-container {   
	&-top {  // 选择器嵌套     
		background {      
 			color: red;   //属性嵌套    
 		 }    
  	&:hover {  // 伪类嵌套      
    		color: green;   
      }  
  }
 }

 3.混合（Mixins）

Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。

例如：某段CSS样式经常要用到多个元素中，在CSS预处理器语言中，可以为这些公用的CSS样式定义一个Mixin，然后在需要使用这些样式的地方直接调用定义好的Mixin。

这是一个非常有用的特性，Mixins 被当作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。

声明的@mixin通过@include来调用。

无参数mixin：

@mixin center-block {   
	 margin-left:auto;    
	 margin-right:auto;}
	 .btn{    
	 @include center-block;
}

 css：

.btn{    
	margin-left:auto;    
	margin-right:auto;
}

 有参数mixin：

sass中使用@mixin<