SCSS / SASS是CSS的预编译语言，帮助我们能够更便捷，更有效率地编写CSS。官网直通车
SCSS与SASS的故事
SCSS 是 SASS 之后诞生的一门预编译语言。既然是后诞生的语言，肯定是和SASS有一定的区别。我们可以先看看SASS代码：
// SASS
!primary-color= hotpink
=border-radius(!radius)
-webkit-border-radius= !radius
-moz-border-radius= !radius
border-radius= !radius
.my-element
color= !primary-color
width= 100%
overflow= hidden
.my-other-element
+border-radius(5px)
如果你是没接触过CSS预编译语言，然后看到这个语法的话肯定不知所云，为什么会有这些什么=，!，+这些怪异的符号，关键为什么连{}都没了！这就对于刚接触的同学来说就很不适应了，所以在2010年5月，ruby公司就又推出了SCSS，来看下SCSS的语法：
// SCSS
$primary-color: hotpink;
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.my-element {
color: $primary-color;
width: 100%;
overflow: hidden;
}
.my-other-element {
@include border-radius(5px);
}
是不是相比SASS诡异的符号看起来好多了，如果你第一次接触SCSS，你也可以理解为，SCSS你也可以写一样的原先CSS语法，但是它可以提供更多的功能，帮助我们更快的写CSS。好了，废话不多说，接下来来举例介绍SCSS提供了哪些便利的功能吧。
变量
变量的SCSS写法
$primary-color:red;
body{
background-color:$primary-color;
}
编译完的CSS
body {
background-color: red;
}
变量的作用是存储需要在CSS中复用的信息，用$符号去声明。比如你写一个项目，它的主题色是红色，你肯定给各个元素都设置好了对应的color，这些CSS遍布大大小小的各种文件，这时候，产品可能突然一拍脑袋想换个主题色，如果你用SCSS的话那就是改个变量的事儿！
嵌套
嵌套的SCSS写法
.father {
color: red;
.son {
color: green;
.grandSon {
color: blue;
}
}
}
编译完的CSS
.father {
color: red;
}
.father .son {
color: green;
}
.father .son .grandSon {
color: blue;
}
嵌套可以帮助我们避免多次重复书写选择器，使得代码结构更清晰。想起之前没用SCSS的时候，为了避免自己的CSS影响全局，会给class手动带上一串儿的父级的class，就像下面那样：
.main>.grandFather>.father>.son>.grandSon{ color : red };
用嵌套语法的话就可以终于不用这样写这样痛苦地写CSS层级了，不过要注意的是，SCSS的嵌套层级不要太深，过度的使用嵌套会让代码很难维护，之前维护一个同事的代码看他代码嵌套了7层，内心难免有点小波动。
继承
嵌套的SCSS写法
//弹性布局
%flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.wrap {
width:500px;
height:500px;
@extend %flex-center;
}
.container {
width:500px;
height:500px;
@extend %flex-center;
}
编译完的CSS
.container, .wrap {
display: flex;
align-items: center;
justify-content: center;
}
.wrap {
width: 500px;
height: 500px;
}
.container {
width: 500px;
height: 500px;
}
继承可以实现对其它类的引用，从而达到样式类的复用。在写样式的过程中，总会遇到某部分样式写了很多遍，这时候可以将这部分样式作为一个类单独提取出来，作为一个通用样式，然后我们在需要用这个通用样式的地方通过@extend引入即可。
混合
混合的SCSS写法
//渐变
@mixin linear($direction,$color1,$color2){
background: -webkit-linear-gradient($direction,$color1, $color2); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient($direction,$color1, $color2); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient($direction,$color1, $color2); /* Firefox 3.6 - 15 */
background: linear-gradient($direction,$color1, $color2); /* 标准的语法 */
}
.wrap {
width:500px;
height:500px;
@include linear(left,red,green);
}
编译完的CSS
.wrap {
width: 500px;
height: 500px;
background: -webkit-linear-gradient(left, red, green);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left, red, green);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left, red, green);
/* Firefox 3.6 - 15 */
background: linear-gradient(left, red, green);
/* 标准的语法 */
}
混合通过参数功能引入变量，输出多样化的样式，同样可以现实代码复用。混合和继承都可以实现代码的复用，在使用上请注意以下两点：
- 如果你的代码块中涉及到变量，建议使用混合来创建相同的代码块。
- 如果你的代码块不需要专任何变量参数，而且有一个通用类已在文件中存在，那么建议使用
SASS的继承。
混合宏写的代码会有冗余，而用继承写的代码冗余性较低。
函数
函数的SCSS写法
//实现px与rem的转化
@function j($px, $base-font-size: 100px) {
@if (unitless($px)) {
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
@return j($px + 0px); // That may fail.
}
@else if (unit($px)==rem) {
@return $px;
}
@return ($px / $base-font-size) * 1rem;
}
.box{
width:j(200);
height:j(200);
}
编译完的CSS
.box {
width: 2rem;
height: 2rem;
}
函数和混合都是传入参数然后返回结果，但是个人认为函数是返回一个通过函数计算好的值，而混合它是返回一个样式代码片段。要注意的是：
- 一个函数可以含有多条语句，需要调用
@return输出结果。 - 建议在自定义函数前添加前缀避免命名冲突，其他人阅读代码时也会知道这不是 Sass 或者 CSS 的自带功能。
网友评论