1.背景介绍

对于很多程序员来说，css这种语言，没有变量，没有函数，没有一些他们熟悉的编程的语法，只有对于属性的一行行描述， 这让他们在写css的时候十分的头痛。很自然的，这时候就会有人想要为css加入一些编程的元素，这样的情况下，css预处理 语言就应运而生。而今天要讲的sass就是最早也是最成熟的一门css的预处理语言。

2.知识剖析

Sass是一门Css的预处理语言，Sass可以简化Css的开发和维护。
Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、 嵌套规则、 @mixins、@import等众多功能， 并且完全兼容 CSS 语法。 sass是ruby语言写出来的，但是不懂ruby也可以使用sass，可以说，只要你会写css，就可以用sass。

3.常见问题

3-1.sass的安装和编译，语法的选择

3-2.sass常用功能的基本用法

1.变量

 2.嵌套 

3.混合器@mixin 
4.自定义函数@function 

4.解决方案

一、安装sass

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。 在安装完成ruby后，在命令行内输入

          
            gem install sass          
        

二、变量

sass 是以$开头定义的变量，变量定义格式如下

$white:#000;//名为白的黑
$black:#fff;//名为黑的白

要注意的是，在有全局变量的情况下，sass是没有局部变量的。

三、嵌套

@mixin 可以将一部分样式提取出来，变成模块，供其他选择器重复使用。而且@mixin还可以用来传递参数。 调用的时候只需要用 @include就可以，代码演示如下。

//选择器嵌套
.nav {
font-size:200px;
 a {
display:block;
   color:#fff;
 }
h2 {
line-height:20px;
 }
}
//属性嵌套
.box {
background {
color：#000；
   size：cover；
   repeat：no-repeat；
 }
}

四、混合（@mixin）

@mixin 可以将一部分样式提取出来，变成模块，供其他选择器重复使用。而且@mixin还可以用来传递参数。 调用的时候只需要用 @include就可以，代码演示如下。

//一个定义好的基本button样式
@mixin button {
width: 50px;
 height: 50px;
 border:1px solid #fff;
}
//一个调用基本button样式的button
.logo-button {
@include button
 background-color: yellowgreen;
}

五、自定义函数

//px和rem的转换
$browser-font-size:10px;
html {
  font-size: $browser-font-size;
}
@function pxTorem($px) {
  @return $px/$browser-font-size*1rem
}
//使用
.box {
  width: pxTorem(20px);
}

六、一些小问题

• 1.&符号 父选择器标识符
  
• 2.@import 导入scss文件
• 3.注释 scss有两种注释方法，//这种注释只有在scss可以看得到，/**/这种注释在scss及编译后的css都可以看到

5、拓展思考

sass里面的@if @else @for有什么用处

@if @else 做判断

$width:200px;

.box2 {
  width: $width;
  height: $width;
  @if $width==100px {
    background-color: aqua;
  }
  @else  {
    background-color: brown;
  }
}

@for写一个简易的栅格（形式上）

$num:12;//栅格列数
$col:60px;//每列宽度

@for $i from 1 through $num {
  .span#{$i} {
    width: $i*$col;
  }
}

编译后的css

.span1 {
  width: 60px; }

.span2 {
  width: 120px; }

.span3 {
  width: 180px; }

.span4 {
  width: 240px; }

.span5 {
  width: 300px; }

.span6 {
  width: 360px; }

.span7 {
  width: 420px; }

.span8 {
  width: 480px; }

.span9 {
  width: 540px; }

.span10 {
  width: 600px; }

.span11 {
  width: 660px; }

.span12 {
  width: 720px; }