SCSS 日常用法

本文是以自己的理解起的结构，要看详细的帮助文档，参阅这里：https://sass-lang.com/documen...

你需要了解的

less 和 sass 是两种 css 预编译语言，其目的是为了更快、更结构的编写 css 文件，是一种强大的 css 编译语言，都能使用 变量、运算符、判断、方法等等。

scss 与 sass 的区别（这里先不讲 less ）：

  • 先有的 sass 后有的 scss
  • scss 需要大括号{}和分号;
  • sass 什么都不用直接裸奔

感觉 sass 不如 scss 严谨，裸奔太狂野了，所以我们选用 scss，

看个小例子

写一个 .btn 类并支持 :hover :active 样式

css

.btn {/* btn 初始样式 */}.btn:hover{/* :hover 样式 */}.btn:active{/* :active 样式 */}

scss

.btn{// btn 初始样式    &:hover{        // hover 样式    }    &:active{        // active 样式    }}

在scss, sass, less 中 & 都代指父类
上面这个例子中的 & 代指 .btn
可以看出 scss 的结构要比 css 清晰，并且写的也要更少。
下面的 scss 在使用中就会生成上面的 css。
而这还只是皮毛，保证你用过 scss 之后就不会再用 css 写样式了。

变量

变量是以 $ 开头的，可以是颜色，长度，数值，等等。

像 js 的变量一样，scss 的变量也是有作用域的，也就是说内部声明的变量是无法在外面使用的，如果想让内部的变量在外部可访问，需要在变量值后面添加 !global 声明。

（还可以通过添加 !default 给变量设置默认值，这个在写一个样式库的时候比较实用，避免别人在没有给变量赋值之前使用）

$变量名: 变量值
// Colors$red:       #CD594B !global;$yellow:    #F8CE5E;$green:     #4B9E65;$yellow:    #5A8DEE;// Unites$btn-padding: 4px;$btn-lineheight: 26px;

实际使用中：

scss

.btn-success {    background-color: $green;    line-height: $btn-lineheight;    color: #fff;}

生成 css

.btn-success {    background-color: #4B9E65;    line-height: 26px;    color: #fff;}

嵌入字符串

将变量直接嵌入字符串，需要用#{ 变量 } （类似 ES6 中模板字符串中的${ 变量 }）

其实 #{} 中是可以插入任意东西的，这里只用到了插入变量，还可以插入方法等等，高级用法。

scss

$bg-path: "./img".card{    background: url("#{$bg-path}/card-bg.png" center center);}

css

.card{    background: url("./img/card-bg.png" center center);}

导入文件 @import

通过 @import 可以把多个文件结合到一起
有了这个功能，就可以通过功能拆分 scss 文件，使其更结构化，比如，可以分成：变量类，按钮类，列表类，字体类，排版类等等。

拆分成多个文件的时候，以 _开头命名的文件，不会被像 phpStorm 中的 file watcher 自动预编译成css文件，less 没有这效果，在这一点上 scss 很不错。

_variables.scss

$bg-btn: #ddd;$color-btn: #444;

btn.scss

@import "_variables";.btn{    display: inline-block;    padding: 3px 6px;    background-color: $bg-btn;     color: $color-btn;}

生成 css

.btn{    display: inline-block;    padding: 3px 6px;    background-color: #ddd;     color: #444;}

相互嵌入 @mixin @include

这个是最常用的，通过 @mixin 定义一个类或方法，在其它地方通过 @include 引用这个方法或类。

如果是方法，还可以定义默认值，也就是说可以某些时候，可以传部分参数。

直接看例子
scss

// @mixin 如果没有调用，不会被渲染@mixin rounded($conor: 5px){ // 定义 mixin 并设置默认值 5px  -webkit-border-radius: $conor;  -moz-border-radius: $conor;  border-radius: $conor;}.btn-rounded{  @include rounded(); // 这里引用上面的 mixin，默认值 5px}.btn-big-rounded{  @include rounded(10px); // 这里引用上面的 mixin，并设置值 10px}

生成 css

.btn-rounded{    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;}.btn-big-rounded{    -webkit-border-radius: 10px;    -moz-border-radius: 10px;    border-radius: 10px;}

继承 @extend

有些时候，需要写的某个类里，包含另一个类的所有声明。
如： 警告按钮，包含所有警告颜色类的内容。

scss

.danger{  background-color: #FF3B30;}.round{  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;}.btn{  display: inline-block;  padding: 3px 6px;}.btn-danger{  @extend .danger, .round, .btn;}

生成 css

.danger, .btn-danger {  background-color: #FF3B30;}.round, .btn-danger {  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;}.btn, .btn-danger {  display: inline-block;  padding: 3px 6px;}

@extend 注意事项：
不能继承 @extend .danger.text 这种连续组合的类，应该写为 @extend .danger, .text

常用方法

详见：https://sass-lang.com/documen...

不知道别人，反正我最常用的就是颜色方法了。列举常用的颜色方法

lighten     (颜色, 百分比)   // 调亮darken      (颜色, 百分比)   // 调暗saturate    (颜色, 百分比)   // 调高饱和度desaturate  (颜色, 百分比)   // 降低饱和度

scss

$green: #4B9E65;.green{  background-color: $green;}.green-lighten{  background-color: lighten($green,20%);}.green-darken{  background-color: darken($green,20%);}.green-saturate{  background-color: saturate($green,20%);}.green-desaturate{  background-color: desaturate($green,20%);}

生成 css

.green {  background-color: #4B9E65;}.green-lighten {  background-color: #88c79c;}.green-darken {  background-color: #2a5939;}.green-saturate {  background-color: #34b55c;}.green-desaturate {  background-color: #62876e;}

其它

方法 @function

方法以 @function 开头，以 @return 结尾，也就是说，方法的定义，必须要有返回值

详见：https://sass-lang.com/documen...

调试方法 @error @warn @debug

像js一样，用于输出提示信息

  • @debug: 普通输出
  • @warn: 警告输出
  • @error: 错误输出

代码结构

声明

通用

  • 变量声明， $var: value
  • 控制声明，@if @each
  • @error，@warn，@debug

CSS

  • 样式，h1 { ... }
  • 样式@ @media @font-face
  • @at-root

顶级

  • 导入 @import
  • 混合 @mixin
  • 方法定义 @function

表达式

  • 数字 12 100px
  • 字符串 Helvetina Neue bold
  • 颜色 #ffffff blue
  • 布尔值 true false
  • null
  • 属性值组 border: 1px solid #ccc
  • Maps ("background": red, "foreground": pink)

运算符

  • == !=
  • + - * / %
  • < <= >=
  • and or not
  • + - / 连接字符
  • ( )

其它

  • 变量 $var
  • 方法调用 nth($list,1) var(--main-bg-color)
  • 特殊方法 calc(1px + 100%) url(http://myapp.com/assets/logo.png)
  • 父选择器 &
  • !important

注释

/*  多行注释        可以多行        在非压缩模式下，这种注释会被输出到 css 中*/// 单行注释// 这种注释不会输出到 css 中

特殊方法

CSS 本身自带一些方法，大多数方法都能与SCSS方法和平共存，但有些会产生冲突，如url()

如果 url() 传入的参数是有效的带引号的url，sass不会处理它，但还可以往其中插入变量，如果不是有效的带引号的 url，带有方法或变量的，sass就把它当成正常的方式识别。如：

$bg-path: "./pics".card-bg{    background: url("#{$bg-path}/card-bg.png") center center;}// 或.card-bg{    background: url($bg-path+"/card-bg.png") center center;}

都会输出为

.card-bg{    background: url("./pics/card-bg.png") center center;}

例子 .btn

有时候，比如，你需要写一个按钮类 .btn-success, .btn-danger, .btn-default, .btn-warning，如果单个定义的话，会很麻烦，现在用了方法，就可以直接填参数完成了。

scss

$green:     #4B9E65;$blue:      #5A8DEE;$yellow:    #F8CE5E;$red:       #CD594B;@mixin btn-template($bgcolor,$fcolor:white){// 定义了两个参数，第二个参数有默认值// 也就是说这个方法可以值一个或两个参数// 另外 带 () 参数的方法不会把自身渲染到 css 中，只有调用才会渲染  color: $fcolor;  border-color: darken($bgcolor, 3%);  background-color: $bgcolor;  &:hover {    background-color: darken($bgcolor, 5%);  }  &:active {    background-color: darken($bgcolor, 10%);  }}.btn-success{  @include btn-template($green)}.btn-primary{  @include btn-template($blue)}.btn-warning{  @include btn-template($yellow)}.btn-danger{  @include btn-template($red)}

上面的 scss 输出为下面的内容，有没有很厉害

.btn-success {  color: white;  border-color: #46945e;  background-color: #4B9E65;}.btn-success:hover {  background-color: #438d5a;}.btn-success:active {  background-color: #3b7b4f;}.btn-primary {  color: white;  border-color: #4c83ed;  background-color: #5A8DEE;}.btn-primary:hover {  background-color: #437dec;}.btn-primary:active {  background-color: #2c6de9;}.btn-warning {  color: white;  border-color: #f7ca4f;  background-color: #F8CE5E;}.btn-warning:hover {  background-color: #f7c746;}.btn-warning:active {  background-color: #f6bf2d;}.btn-danger {  color: white;  border-color: #ca4e3f;  background-color: #CD594B;}.btn-danger:hover {  background-color: #c74737;}.btn-danger:active {  background-color: #b34032;}

学习 scss 最好的例子

  • Bootstrap v3 - less 语言: https://github.com/twbs/boots...
  • Bootstrap v4 - scss 语言: https://github.com/twbs/boots...

就是去看 bootstrap v4 的样式源码，bootstrap v4 就是用 scss 写的

如果想学 less 可以看这篇 [ less基础用法 ] - SegmentFault -CSDN， bootstrap v3 就是用 less 写的。

下载 bootstrap 的 scss 源码，看里面怎么写的，进步很快的。