SCSS 日常用法

SCSS 日常用法

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

你需要了解的

less 和 sass 是两种 css 预编译语言，就是说通过 less 或者 scss 写的代码最终都会被编译成 css 再使用。其目的是为了更快、更结构的编写 css 文件，都能使用 变量、运算符、判断、方法等等。

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

• 先有的 sass 后有的 scss
• scss 需要大括号{}和分号;
• sass 什么都不用直接裸奔，通过缩进来区分代码等级，像 yaml 语言

初学者最好用 scss 而非 sass，sass 在你追求代码简洁的时候用，来看个对比

使用 scss 之前你需要准备的

最好用 IDEA 系统的软件（webStorm phpStorm IDEA等）开发，里面添加对于 scss 的 File Watcher 即可，在每次scss 文件改变的时候，程序都会自动编译 scss 到 css。

或者在 vue 单文件项目中直接在 中使用 scss，不过本人并不推荐直接把样式写在 vue 单文件的方式，更推荐跟 vue 分离开，更好管理，因为 scss 本身就支持拆分成多文件，再通过 mixin 整合起来。
做大型系统的时候就会体会到了。

关于如何添加 scss 支持，看这里： https://blog.csdn.net/KimBing/article/details/100532939

看个小例子

写一个 .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 很不错。

比如，我一个项目的 css 结构是这样的：以 _ 开头的都是整个项目的 css 的结构部分，像底部按键、表单、按钮、通用方法等。最后都整合在 pay.scss 中

css/
├── _agent.scss
├── _form.scss
├── _mixin.scss
├── _navbar.scss
├── _normalize.scss
├── _regist.scss
├── _reset.scss
├── _tabbar.scss
├── _trade.scss
├── _trand-time.scss
├── _trand-tradition.scss
├── _usercenter.scss
├── _utility.scss
├── _variables.scss
├── _wallet.scss
├── pay.css
├── pay.css.map
└── pay.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/documentation/functions

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

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/documentation/at-rules/function

调试方法 @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/bootstrap/tree/v3-dev
• Bootstrap v4 - scss 语言: https://github.com/twbs/bootstrap

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

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

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