SCSS学习笔记（一）

SCSS的由来

SCSS就是加强版的CSS，要讲SCSS那就一定要从SASS讲起

SASS

Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。2007年发行，2016年版本稳定，设计和开发分开进行，让这个语言的功能相当完善。

Sass是像CSS一样的层叠样式表语言，但是它并不是由前端社区发明的，而是由Ruby社区发明创造，为什么Ruby社区要为前端创造语言，这是因为Ruby社区中有一个全栈Web框架Rails，这个框架包含前端和后端的开发，所以当Ruby社区的人发现CSS并不好用，就发明了一套语言叫做Sass，下面是Sass语法的特点

#sidebar
   30%
  background-color: #faa

Sass语法如上图所示，它写法极简，省略掉了大括号和分号，但是和python一样，缩进需要严格按照规定，这样子的语法让很多前端工程师很不适应，所以出现了了SCSS，SCSS将括号分号又给添加回来了，例如

#sidebar {
   30%;
  background-color: #faa;
}

你肯定想说，这样又和CSS有什么区别，实际上SCSS保留了SASS的其他部分功能

SCSS的用法

SCSS相较于CSS加入了编程元素，作为CSS的预处理器，它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。

变量

SCSS允许使用变量，所有变量以$开头。

$blue : #1875e7;　
div {
　color : $blue;
}

有了变量，当需要集体修改色型的时候就会方便很多

嵌套

SCSS中允许嵌套，例如CSS中

div h1 {
　　color : red;
}

这样的语法可以改写成

div {
  h1 {
    color: red;
  }
}

mixin

mixin可以声明重用一个代码块，例如
使用@mixin定义一个代码块

@mixin left {
　　float: left;
　　margin-left: 10px;
}

使用@include引入这个代码块

div {
　　@include left;
}

编译成CSS是这样的

div {
　　float: left;
　　margin-left: 10px;
}

另外，mixin支持参数，可以像写函数一样写CSS，例如

@mixin left($value: 10px) {//默认是10px
　　float: left;
　　margin-right: $value;
}

引入时，可以自己添加参数

div {
　　@include left(20px);
}

placeholder

一直引入代码块，编译成CSS的时候还是会有很多的重复代码，
使用placeholder可以节省代码，用法是用%定义一个公用样式

%box {
  float: left;
  margin-left: 10px;
}

然后用@extend来调用

.selector { 
  @extend %box; 
}
.nav>ol>li {
  @extend %box;
}

编译成CSS时就是

.selector,
.nav>ol>li {
  float: left;
  margin-left: 10px;
}

不拷贝样式，把选择器提到了样式前面