最全的sass/scss学习

1. 参考学习网站

1. 文档 https://www.sass.hk/docs/

2. vscode 安装 sass 插件

1. https://www.sass.hk/skill/sass154.html?tdsourcetag=s_pcqq_aiomsg
2. 配置settings.json

"liveSassCompile.settings.autoprefix": [
        // ">1%"是指 通过全球使用情况统计信息选择出的高于1%使用率的浏览器版本。
        // "last 2 versions"是指 每个浏览器的最后2个版本。
        "> 1%",
        "last 2 versions"
    ],
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded", // 出口css样式为展开格式(expanded(展开), compact（紧凑）, compressed（压缩）, nested（嵌套）)
            "extensionName": ".css",
            "savePath": "~/../css", // null 为当前目录
            "savePathReplacementPairs": null
        }
    ],
    "liveSassCompile.settings.generateMap": false, // 去掉编译时出现的css.map文件
    "liveSassCompile.settings.excludeList": [
        "/**/node_modules/**",
        "/.vscode/**"
    ],

3. 变量

$color: red
.box{
    background: $color;
}

4. 变量名中下划线和下下划线是互通的

$link-color: blue;
a{
    color: $link_color;
}

5. scss嵌套

.container{
    font-size: 14px;
    .header{
        width: 50%;
        height: 30px;
        .left {
            float: left;
        }
    }
    .footer{
        background-color: green;
    }
    &::after{
        display: inline-block;
    }
}

/* 编译之后 **/
.container {
  font-size: 14px;
}
.container .header {
  width: 50%;
  height: 30px;
}
.container .header .left {
  float: left;
}
.container .footer {
  background-color: green;
}
.container::after {
  display: inline-block;
}

6. &父选择器的标识符

article a{
    color: blue;
    &:hover {color: red}
}
/* 编译之后 **/
article a {
  color: blue;
}
article a:hover {
  color: red;
}

7. 群组选择器嵌套

.container {
    h1, h2, h3{
        margin: 0px
    }
}
/* 编译之后 **/
.container h1, .container h2, .container h3 {
  margin: 0px;
}

nav, aside{
    a{
        color: #fff
    }
}
/* 编译之后 **/
nav a, aside a {
  color: #fff;
}

8. 子组合选择器和同层组合选择器> + 和 ~

article {
    ~ article {color: red}
    > selection {background: red;}
    dl > {
        dt {color: red;}
        dd {color: #555;}
    }
    nav + & {color: red;}
}
/* 编译之后 **/
article ~ article {
  color: red;
}
article > selection {
  background: red;
}
article dl > dt {
  color: red;
}
article dl > dd {
  color: #555;
}
nav + article {
  color: red;
}

9. 属性嵌套

nav {
    border: {
        width: 10px;
        style: solid;
        color: red;
    }
}
/* 编译之后 **/
nav {
  border-width: 10px;
  border-style: solid;
  border-color: red;
}

nav {
    border: 1px sold #ccc {
        left: 10px;
        right: 20px;
    }
}
/* 编译之后 **/
nav {
  border: 1px sold #ccc;
  border-left: 10px;
  border-right: 20px;
}
  

10. @import 导入sass文件

1. 在编译的时候就会导入进来
2. 专门用于被其他文件导入的sass文件
   1. 这一类文件，可以不不用单独编译成css，约定用下划线开始，比如_base.scss
   2. 导入的时候，可以不用带上下划线，和后缀

/* _base.scss 不会被单独编译成css */
$bgColor: #fff;

/* css01.scss */
@import "base";
box {
    color: $bgColor;
}

3. 设置默认值 !default

    /* _base.scss */
    $bgColor: #fff !default;
    
    /* css01.scss */
    /* $bgColor 可以覆盖掉base里面的值，这样可以为用户这个值 */
    $bgColor: #000; 
    @import "base";
    box {
        color: $bgColor;
    }

    /* 编译后 */
    box {
        color: #ff00ff;
    }

4. 嵌套内导入

嵌套导入，可以单独在css规则内导入
/* _base.scss */
aside {
    background: red;
    color: white
}
/* css01.scss */
box{
    @import "base";
}
/* 编译后 */
box aside {
  background: red;
  color: white;
}

5. @import导入原生css文件
   1. 因为scss默认兼容css，可以把css改成scss后缀，然后进行导入

11. 静默注释

box {
    color: red; /* 这是注释不会被抹上去 */
    background: blue; // 这是静默注释，会被抹去
    padding: /*者也是要被抹去，因为这个注释在了不该注释的位置*/ auto;
}
/* 编译后 */
@charset "UTF-8";
box {
  color: red; /* 这是注释不会被抹上去 */
  background: blue;
  padding: auto;
}

12. 混合器 @mixin

@mixin 会原封不动的把里面规则抽出来

@mixin rounded-corners {
    border-radius: 5px;
    font-size: 10px;
}

.notice{
    background-color: red;
    @include rounded-corners;
}

/* 编译后 */
.notice {
  background-color: red;
  border-radius: 5px;
  font-size: 10px;
}

1. 混合器css规则， 也可以使用&

@mixin no-bullets {
    list-style: none;
    li {
      list-style-image: none;
      list-style-type: none;
      margin-left: 0px;
    }
  }

  ul.plain {
    color: #444;
    @include no-bullets;
  }
/* 编译后 */
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

2. 混合器传参

@mixin link-colors($normal, $hover, $visited) {
    color: $normal;
    &:hover { color: $hover; }
    &:visited { color: $visited; }
  }
a {
    @include link-colors(blue, red, green);
}
/* 获取加个人执行名称 */
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}
  
/* 编译后 */
a {
  color: blue;
}
a:hover {
  color: red;
}
a:visited {
  color: green;
}

3. 默认参数值

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
    @include link-colors(blue);
}
  
/* 编译后 */
a {
  color: blue;
}
a:hover {
  color: blue;
}
a:visited {
  color: blue;
}

13. 继承 @extend

这种方式类似在class=“seriousError” 改成了class=“seriousError error”

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
/* 编译后 */
.error, .seriousError {
  border: 1px solid red;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

1. 什么时候使用继承
   举例子：当你有一个error样式，然后会有一种样式，和error一样，只是比error更加严重一些，可以使用继承
2. 高级用法
   定义了一个名为disabled的类，样式修饰使它看上去像一个灰掉的超链接。通过继承a这一超链接元素来实现：

.disabled {
  color: gray;
  @extend a;
}

3. 细节
   @extend背后最基本的想法是，如果.seriousError @extend .error， 那么样式表中的任何一处.error都用.error.seriousError这一选择器组进行替换。这就意味着相关样式会如预期那样应用到.error和.seriousError。当.error出现在复杂的选择器中，比如说h1.error.error a或者#main .sidebar input.error[type=“text”]，那情况就变得复杂多了，但是不用担心，sass已经为你考虑到了这些。

4. 继承最佳实现

14. script scss

1. 插值 #{}

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
/* 编译后 */
p.foo {
  border-color: blue;
}

2. if 判断

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
/* 编译后 */
p {
  color: green;
}

3. @for
   1. 格式有@for $var from through ，或者 @for $var from to ，
   2. 区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 与 的值，而使用 to 时条件范围只包含 的值不包含 的值。另外，$var 可以是任何变量，比如 $i； 和 必须是整数值。

@for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
  }
/* 编译后 */
.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

4. @each
   1. @each 指令的格式是 $var in , $var 可以是任何变量名，比如 $length 或者 $name，而 是一连串的值，也就是值列表。

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
/* 编译后 */
.puma-icon {
  background-image: url("/images/puma.png");
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
}

.egret-icon {
  background-image: url("/images/egret.png");
}

.salamander-icon {
  background-image: url("/images/salamander.png");
}

混合each
@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
/* 编译后 */
.puma-icon {
  background-image: url("/images/puma.png");
  border: 2px solid black;
  cursor: default;
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
  border: 2px solid blue;
  cursor: pointer;
}

.egret-icon {
  background-image: url("/images/egret.png");
  border: 2px solid white;
  cursor: move;
}

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}
/* 编译后 */
h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.2em;
}

5. @while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
/* 编译后 */
.item-6 {
  width: 12em;
}

.item-4 {
  width: 8em;
}

.item-2 {
  width: 4em;
}

15. 函数

和mixin一样，支持可变参数和默认参数

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n){
    @return $n * $grid-width + ($n - 1) * $gutter-width 
}

.sidebar{
    width: grid-width(5)
}
/* 编译后 */
.sidebar {
  width: 240px;
}

16 @use

_base.scss
$radius: 3px;
@mixin rounded{
    border-radius: $radius;
}

css01.css
@use './base' as base;

.button{
    @include base.rounded;
    padding: 5px + base.$radius;
}
/* 编译后 */
.button {
  border-radius: 3px;
  padding: 8px;
}

17 forward

详细参考 https://www.lesscode.work/sections/621c3db97dd7d.html

/* _base.scss */
$padding: 22px;
$margin: 30px;

/* _forward.scss */
@forward './base';

/* css01.scss */
@use './forward';
p {
    padding: forward.$padding;
}
/* 编译后 */
p {
  padding: 22px;
}

给模块定义命名空间

/* _base.scss */
$padding: 22px;
$margin: 30px;

/* _forward.scss */
@forward './base' as base-*;

/* css01.scss */
@use './forward';
p {
    padding: forward.$base-padding;
}
/* 编译后 */
p {
  padding: 22px;
}

18. 强制跳出嵌套 @at-root

.parent{
    font-size: 12px;
    @at-root .child{
        font-size: 14px;
        @at-root .som{
            font-size: 16px;
        }
    }
}
/* 编译后 */
.parent {
  font-size: 12px;
}
.child {
  font-size: 14px;
}
.som {
  font-size: 16px;
}