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
  width: 30%
  background-color: #faa

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

#sidebar {
  width: 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;
}

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