这是我参与「第五届青训营」伴学笔记创作活动的第15天

看完这篇文章scss真的好用，能干很多事情

用了之后不用一个个的去写样式，可以用函数化的方式去写

((1w字)爆肝三天，学习Scss-看这篇就够了 - 掘金 (juejin.cn))

把样式弄明白，然后看一下elementUI是如何处理样式的，可以参考，尤其是table

项目中的scss： var.scss是存放所有的变量样式变量统一声明+全局通用样式里面放着type和size的实际变量在type和size中使用这些变量

common引入root（感觉是多做一层嵌套，后面改也方便） root引入 size type variables 做实际的函数操作

variables（变量）//样式变量声明没懂是干嘛的

现在难的就是root里的各个函数操作，还有在实际scss中的引用，主要是还是这一块不太会，变量和嵌入都好懂的。

让chatgpt翻译一下这段代码就知道啥意思了 @each $sizeKey,$ sizeValue in $sizeStyle { @include matchComponent($ sizeKey) { @include kl-attribute( $sizeValue, '--kl-size-width', 'kl-width'); @include kl-attribute($ sizeValue, '--kl-size-height', 'kl-height'); @include kl-attribute($sizeValue, '--kl-size-font', 'kl-fontSize'); } }

变量 $

变量可以是多种类型，几乎和js的一样

原生css中的变量，使用--变量名:变量值定义，var(--变量名)进行使用。

:root {
    --color: #F00;
}
p {
    color: var(--color);
}

scss中的变量，以美元符号$开头，赋值方法与 css属性的写法一样。

$color:#F00;
p {
    color: $color;
}

转行成css

p {
    color: #F00;
}

父选择器 &

可以使用&进行选择器名称拼接。

.main {
    color: black;
    &-sidebar { border: 1px solid; }
}

转化成css

.main {
    color: black;
}
.main-sidebar {
    border: 1px solid;
}

嵌套

不仅选择器可以嵌套，属性也可以嵌套

流程控制（里面东西多了，要好好记记）

sass中流程控制包含四类，也是我们在js中常见的@if、@for、@each、@while。

可以加@使用if等逻辑字符做逻辑判断

$blank-mode=true

 @if $blank-mode {
    background-color: #000;
  } @else {
    background-color: #fff;
  }

@each

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

$color-list:red green blue turquoise darkmagenta;
@each $color in $color-list {
    $index: index($color-list, $color);
    //这里是对index变量进行赋值，使用index方法。从1开始的
    //应该是返回在$color-list中$color的index。在看的时候忽略掉$
    .p#{$index - 1} {
        background-color: $color;
    }
}
复制代码

编译为

.p0 {
    background-color: red;
}

.p1 {
    background-color: green;
}

.p2 {
    background-color: blue;
}

.p3 {
    background-color: turquoise;
}

.p4 {
    background-color: darkmagenta;
}

@import

@import算是一个比较简易的模块系统。scss拓展了@import 的功能，允许其导入 scss或 sass文件。被导入的文件将合并编译到同一个 css文件中，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用

插值语句

使用 #{} 插值语句（下面有讲，这里把它理解成js中模板字符串就行）

@mixin（超级重点）

混合指令（Mixin）用于定义可重复使用的样式。混合指令可以包含所有的css规则，绝大部分 scss规则，甚至可以通过参数功能引入变量，输出多样化的样式。

注意：函数命名和变量命名规则一致。

就是函数，用@mixin创建函数，使用@include使用函数

项目中用到的比较难的scss例子

//type类型判断

@each $typeKey, $typeValue in $buttonType {

@include matchComponent($typeKey) {

// box-sizing: border-box;

//button

@include kl-attribute($typeValue, '--kl-bg-color', 'kl-bg');

@include kl-attribute($typeValue, '--kl-font-color', 'kl-fontColor');

@include kl-attribute($typeValue, '--kl-border', 'kl-border');

}

}

// 写一个具体的例子就好理解了

typeKey=primary typeName=typeValue=kl-bg: $primary-bgColor

.kl-button-primary{

border-radius: 5px;

--kl-bg-color: $primary-bgColor //由kl-bg在typeName里找到kl-bg，所以返回值是$primary-bgColor

--kl-font-color: $primary-fontColor

--kl-border: $primary-border

}

SCSS学习|青训营笔记