SASS详解

之前看到SASS之类的工具以为应该比较难，今天接触了以后发现挺好用的，主要是方便了CSS的编写。在编写比较大的项目的时候，因为内容不少，所以样式表也会比较繁杂，若是要修改其中某一个的名字，就会维护起来很麻烦。所以才须要用到SASS这样的工具来优化CSS结构。

通常有SCSS和SASS两种，这两种的文件后缀名是不同的，编写起来也会有差别。因为SCSS的写法更接近CSS，所以我比较喜欢SCSS的写法。（SASS是没有大括号的，仅仅用缩进来表示层次，这一点和python是很像的）

准备

安装

因为SCSS是须要编译的。我就直接简略关于编译配置方法的环节。

1. 安装ruby。http://rubyinstaller.org/downloads

2. 命令行安装SASS。

3. 安装好了能够在命令行调用sass --version。若是显示版本号就是安装好啦。

具体能够看慕课网SASS教程

编译方法

在命令行输入

sass srcFile.scss:destFile.css//编译单个文件
sass srcDir/:css/;//编译整个srcDir文件夹到css文件夹

也就是sass [s]:[d]这样的语法（下文中我都这样写）。

使用

刚刚是一些基本用法，还有一些参数能够用。

编译参数

1.--watch

上面的写法其实比较麻烦，由于咱们通常写css都是会反复修改的，那么咱们每次改了SCSS都须要再次编译，显得很麻烦。所以咱们可使用--watch参数监视每一次的更改，这样在修改CSS以后都会自动编译。具体以下：

sass --watch [src]:[dest];//src和dest既能够是文件也能够是文件夹

若是咱们修改了SCSS，控制台就会输出

Change detected to: scss/test.scss
      write scss/css/test.css
      write scss/css/test.css.map

2. style

因为不一样的同窗写CSS都有本身的习惯，所以这个参数就是为了让编译后的CSS更美观。
语法是sass --watch [src]:[dest] --style property这个property就是下面描述的内容。

---

nested

默认就是nested编译结果是最多见的书写方法。

body{
    p{
        color:red;
    }
    ul{
        background-color:green;
    }
}

编译结果

body p{
    color:red;}
body ul{
    background-color:green;}

expanded

就是编译出来的右大括号会另起一行

compact

输出的css会少不少换行

compressed

没有空格没有换行

.box,.size{margin-left:5px}

变量

SASS相似与一些编程语言。会先定义一些变量并给他们赋值，而后再在样式表中调用。这样咱们在维护CSS的时候就只须要把这些变量的值修改就能够了，比较方便。废话很少说直接看代码：

$varGlobal:500px;
.container{
    $varLocal:20px;
    width:$varGlobal;
    height:$varLocal;
}

看上面的代码就知道，SASS引入了局部变量和全局变量，和其余语言用法差很少的就不赘述了。

嵌套

先前已经提到告终构的嵌套。还支持属性嵌套和伪类嵌套。

属性嵌套

好比font就有不少属性：font-size、font-weight等。咱们能够这样嵌套

font:{
    size://
    weight://
}

注意font后面有一个冒号，否则就和结构嵌套是同样的了

伪类嵌套

.clearfix{
    &:before,
    &:after {
        content:"";
        display: table;
      }
    &:after {
        clear:both;
        overflow: hidden;
      }
}

用法就是加一个&:
调用混合宏

混合宏

感受这个是SASS的比较强大的地方，先看代码

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
button {
    @include border-radius;
}

这时候编译结果为

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

至关于就是一个代码块的调用。另外混合宏还能够传入参数

@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

至关因而一个函数的写法了。在调用的时候传入参数便可

.box {
  @include border-radius(3px);
}

还能够给默认值

@mixin border-radius($radius：3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

注意css中都是用冒号表示相等。不用等号

带@的语句通常都不加冒号，直接空格

继承

.size{
    background-color:#777;
}
.box{
    @extend .size;
}

占位符

%placeholder

这种写法在不调用以前不会产生任何css代码。我我的感受比较像是一个基类。用法就是和继承同样的。

.body{
    @extend %placeholder
}

这里贴一张慕课网拿到的表格。

SASS基础就先写到这里，还有不少高级用法之后再补充~