css 预处理器

由于多个项目中用到了sass和less，所以就学习了一下相关知识，记录下来方便随时查看。

前言

css是用来编写网站样式，但是，其写法比较一成不变。

如果想要使用 css 实现 js 一样的变量、常量等，就会比较臃肿，难以维护。

所以，作为css的扩展，出现了css预处理器。

CSS预处理器

css预处理器定义了一种新的语言，主要是通过用一种专门的编程语言，为css添加一些编程特性，再编译生成css文件。

它可以帮助我们编写可维护的、与时俱进的代码，也可以减少需要编写的CSS数量，对于那些需要大量样式表和样式规则的大型用户界面是非常有帮助的。

css 预处理器可以更方便的维护和管理 css 代码，让整个网页变得更加灵活可变。

常用CSS预处理器

现有流行库有Sass(Scss)、Less、Stylus等，目前，广泛使用的是 less 和 sass 。

Sass

Sass是CSS（层叠样式表）的语法的一种扩充，诞生于2007年，是最早也是最成熟的一款CSS预处理器语言。

SASS使用变量和公式添加到css编程风格中，可以利用缩进代替花括号，空格也有着重要的意义。

文件后缀名

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

为什么sass的后缀是scss？其实，sass有两种语法形式。

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

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

总结来说，SASS保存为".sass"是缩进格式，保存为".scss"是非缩进格式。

安装

sass基于Ruby语言编写，所以编译sass文件需要Ruby环境。（使用sass并不需要过多了解Ruby语言，只需要安装Ruby环境即可。）

首先，安装ruby，建议安装到C盘中，安装过程中选择“Add Ruby executables to your PATH”。

接下来，ruby安装成功后，启动Ruby的Command控制面板，输入命令：

gem install sass

回车后会自动安装好Sass。

输入sass -v，之后出现版本号，就算安装成功了。

主要功能

• 可以使用变量、常量；

• 允许css代码嵌套；

• 混入Mixin；

• 继承；

• 函数等功能。

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

变量（Variables）

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

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

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

全局变量&局部变量

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

变量用在属性中

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

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

默认变量

sass的默认变量是在值后面加上!default。

示例：

$myLineHeight: 1.5 !default;
body{
    line-height: $myLineHeight; 
}

css：

body{
   
    line-height:1.5;
}

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

嵌套（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开头。

示例：

<div class="main-container">
   <div class="main-container-top"></div>
</div>

示例：

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

混合（Mixins）

Mixins是CSS预处理器中语言中最强大的特性。

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声明混合，可以传递参数，参数名以$符号开始，也可以给参数设置默认值。

scss：

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;//参数使用默认值
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

css：

.info {
   
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}