css预编译--sass基础篇

sass起源和简介

css 其实不是一门编程语言， css 全称 Cascading Style Sheets (层叠样式表)是一种用来表现HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。咱们用它来实现表现层和结构层的分离，也就是 html 和样式的分离。你能够用它为网页制定样式，可是他没法像 JavaScript 同样声明变量，调用函数，使用条件语句，能够说 JavaScript 是灵活的，动态的，而 css 是死板的，一成不变的。

因此，有人想要为其加入编程的思想，让他拥有遍历，拥有方法，甚至拥有继承，可以告诉你语法上的错误，因此有了css预处理，它的思想是先用一门新的专门编程的语言来设计网页样式，再编译成css，其实最后引用的仍旧是编译出来的css。

说到css预处理，可能大部分人首先想到的是Less。如今作css预处理的语言比较优秀的Less是其一：它快速方便入门简单，sass是其二：相对来讲说它更加灵活，语法更多(尤为是if else for)，固然好多人不使用的缘由是嫌弃它安装不方便(还好有淘宝镜像)，其三是Stylus：他与sass比较相似都是更加灵活强大。

想好何时咱们可使用css预处理
css预处理让咱们对样式的处理更加编程化，可是咱们仍须要考虑好在怎样的环境中使用它，由于咱们知道，不管你的sass代码多么炫酷，逻辑多么缜密，到最后都是生成了一个css文件。

因此咱们须要根据项目的大小以及开发时间团队成原本肯定，若是项目比较小须要的css并非太多而且开发时间紧迫团队里不少人还不会使用，那么可能使用原生的css可能会更好一些。

sass基础

安装

不少开发者本来是想使用sass的，可是由于sass是基于ruby的，墙在上，ruby装半天装不上，因而放弃,这里推荐使用淘宝的镜像来进行安装。

编译

学习使用

推荐使用koala, koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

若是是学习的话能够先使用koala来进行调试，若是使用到现代工程化项目中，推荐使用webpack安装配置sass-loader

sass和scss

先来看看区别吧

$color : red;

//sass语法
.box
    color:$color;

//scss语法
.box{
　　color:$color;
}

其实 sass 语法是 sass 最开始的语法结构，是经过 tab 缩进来进行的一个规则，有点相似 jade模板的那种缩进，并且这种语法规则十分严格，有啥不对劲，编译的时候就报错。

而 scss 呢，是 sass 的新语法格式，不要认为他是另一种预处理语言，其实它是 sass 在发现以前的语法结构太过于严格，而且和 css 有点不像后从新定制的语法结构，它在外观上是与css基本一致的，而且它十分宽松，你能够直接将以前的 css 代码复制过来。

我在这里写在了一个代码块中只是示例，其实他们文件名是分别以 .sass 和 .scss 来结尾的。

变量声明和调用

这是 sass 的编程元素基础之一。在 JS 中咱们使用 var 来声明变量，固然 ES6 中新加了 let const。而在sass声明和调用变量的规则以下

$height: 15px !default;  //声明默认变量
$height: 50px;　　//声明普通变量
body{
    height: $height; 
}

变量有默认变量和普通变量之分，默认变量只需像 !important 同样在值后面加上 !default 便可。其实通常状况下咱们只须要声明普通变量，默认变量在开发组件时使用比较方便。

嵌套和局部变量，全局变量

和JS相似，sass语法中也有局部变量和全局变量。以下在最外层声明的是全局变量，全局范围内能够调用，在em{}中声明的是em的局部变量，只在em{}内部内进行调用。

$color:#000;　　//全局变量
.block {
  color: $color;
}
em {
  $color: #fff;　　//局部变量
  a {    //选择器嵌套
    color: $color;
    font: {    //属性嵌套
　　  size: 12px;
　　  weight: bold;
　  }
    &:hover { //伪类嵌套
     color: $color;
    }   
  }
}

数据类型

和JS相似，sass也拥有本身的数据类型分别是

数字: 如，一、 二、 1三、 10px；
字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；
颜色：如，blue、 #04a3f九、 rgba(255,0,0,0.5)；
布尔型：如，true、 false；
空值：如，null；
值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

混合宏

编程的思想，混合宏是一个相似于函数的存在，固然，他并非函数，简单来讲就是增长参数功能的使得灵活度提高的可重用的代码块。

@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

button {
    @include border-radius;
}

这里是一个简单的混合宏的使用，先是用 @mixin 定义了一个名叫 border-radius 的混合宏，而后在代码中利用 @include 进行调用，其实这样的话并不能太大致现出混合宏的特点。看下面的

@mixin border-radius1($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
@mixin border-radius2($radius:5px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}


.box1 {
  @include border-radius(5px);
}
.box2 {
  @include border-radius;
}
.box2 {
  @include border-radius(5px);
}

从代码里能够看出，混合宏能够像函数同样传入参数，而且能够像 ES6 的函数扩展同样添加参数默认值，若是在调用的时候不传参数，那么就会使用默认的值，这样极大的增长了代码的灵活性，省却不少开发时间。

其实，mixin 的灵活还不只仅如此，它能够传入多个参数，这样咱们想到了函数能够根据参数数量的不一样来执行不一样的代码，是的，sass也能够作到。

@mixin size($width,$height){    //两个参数或者多个参数能够这样这样定义
  width: $width;
  height: $height;
}

.box-center {
  @include size(100px,200px);
}
@mixin box-shadow($shadows...){    //参数过多可使用...来代替
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}
.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

上面两个代码块第一个比较简单，就是增长参数数目。下面的代码块咱们利用sass的if else方法来实现了判断，若是参数数目大于等于1，也就是传了参数，那么咱们执行上面的代码，若是没有传参咱们执行下面的代码，设置默认的$shadows值生成代码块。

可是混合宏也有不足之处：那就是调用一个混合宏生成的css代码并不会进行合并，这也是由于他可以传参所设置的，因此对于复用性很强的代码块不推荐使用混合宏。

继承和占位符

sass容许你使用@extend继承别的代码块，而且经过@extend所继承的代码块会在生成css的时候进行合并~完美解决了上面的问题。

.btn1 {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

%btn2 {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

%btn3 {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary1 {
  background-color: #f36;
  color: #fff;
  @extend .btn1;
}

.btn-primary2 {
  background-color: #f36;
  color: #fff;
  @extend %btn2;
}

上面的代码中.btn1是预先定义好的类，而后咱们在.btn-primary1中继承他的全部代码块，而%btn2就是在标题里所提到的占位符，占位符的代码块若是不被继承在生成的css中是不会显示出来的，因此若是你是用sass编译css的话，公共类使用占位符来定义是一个很不错的选择。为了加深理解咱们看下上面的代码所生成的css代码。

.btn1, .btn-primary1 {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px; }

.btn-primary2 {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px; }

.btn-primary1 {
  background-color: #f36;
  color: #fff; }

.btn-primary2 {
  background-color: #f36;
  color: #fff; }

继承btn1的btn-primary1他和btn1进行了合并，而咱们使用占位符定义的%btn2 %btn3在生成代码里没有显示，由于btn-primary2继承了%btn2，因此他继承的公共部分被单独拿出来，若是有多个代码块继承%btn2，他们会进行合并。

占位符仍是混合宏，主要仍是看你的代码怎么使用，若是只是静态的代码公共块，那么占位符会比较适合，而若是是可变的代码例如写一个复杂的css3动画之类的，可能混合宏比较适合了。

插值#{}

若是接触过jade模板的朋友会比较熟悉，这里的插值和它用法是基本一致的。让咱们来看一个复杂的代码块。

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

首先咱们声明了一个$properties的变量，里面是一个值列表里面两个字符串，@mixin方法里咱们经过@each方法循环出值列表里面的字符串而后利用插值的方法将字符串插入进去，咱们看下生成的css代码

.login-box {
  margin-top: 14px;
  padding-top: 14px; }

这里只是作一个示例，正常状况下咱们不会用这么复杂的方法来生成这么短的css代码。

运算

sass容许咱们作一些基本的运算：加减乘除，可是我要说的是：注意单位！注意单位！注意单位！固然若是你异想天开em+px，px*px，px/rem.................

须要知道的是sass里容许进行颜色运算，也就是说 #222222 * 2你将会获得 #444444，其实颜色的运算机制是分段运算也就是说若是22*2 22*2 22*2而后在进行合并的。

字符串运算：

字符串能够经过+来进行连接，须要注意的是由于sass的字符串有两种类型，带引号和不带引号，相同相加固然出来的是一致的。若是有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 一样的，若是一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串，其实就是谁在左边就跟着谁。

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
//生成的css以下
p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

上面的内容就是sass的基础篇，进阶篇的话会整理一下函数和方法规则相关的东西。