sass

Author: dddssw

configure/component.md

@@ -256,3 +256,206 @@ const ns = useNamespace('affix')
   background-color: var(--ep-c-bg-row);
 }
 ```
+## 组件库 sass
+### 主题色
+```sass
+$colors: () !default;
+$colors: map.deep-merge(
+  (
+    'white': #ffffff,
+    'black': #000000,
+    'primary': (
+      'base': #409eff,
+    ),
+    'success': (
+      'base': #67c23a,
+    ),
+    'warning': (
+      'base': #e6a23c,
+    ),
+    'danger': (
+      'base': #f56c6c,
+    ),
+    'error': (
+      'base': #f56c6c,
+    ),
+    'info': (
+      'base': #909399,
+    ),
+  ),
+  $colors
+);
+```
+### 主题色层次
+也就是主题色的10%到90%的变化, 使用 `mix` 来混合颜色
+```scss
+@mixin set-color-mix-level(
+  $type,
+  $number,
+  $mode: 'light',
+  $mix-color: $color-white
+) {
+  $colors: map.deep-merge(
+    (
+      $type: (
+        '#{$mode}-#{$number}':
+          color.mix(
+            $mix-color,
+            map.get($colors, $type, 'base'),
+            math.percentage(math.div($number, 10))
+          ),
+      ),
+    ),
+    $colors
+  ) !global;
+}
+
+@each $type in $types {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, 'light', $color-white);
+  }
+}
+
+// --el-color-primary-dark-2,暗黑模式
+@each $type in $types {
+  @include set-color-mix-level($type, 2, 'dark', $color-black);
+}
+```
+### :root伪类
+通过这个伪类中自定义全局的 `css` 变量,一般以 `--` 开头, 可以确保他们在整个文档中全局可用
+```scss
+:root {
+    --a:#fff
+}
+background-color:var(--a)
+```
+### 利用 sass 生成 :root 变量
+定义前缀,块,修改器变量,因为是BEM规范
+```scss
+$namespace: 'el' !default;
+$common-separator: '-' !default;
+$element-separator: '__' !default;
+$modifier-separator: '--' !default;
+$state-prefix: 'is-' !default;
+```
+将色彩映射到root选择器中
+
+:::code-group
+```var.scss
+@use 'mixins/var' as *;
+@use '../common/var' as *;
+
+:root {
+    color-scheme: light;
+  
+    // --el-color-#{$type}
+    // --el-color-#{$type}-light-{$i}
+    @each $type in (primary, success, warning, danger, error, info) {
+      @include set-css-color-type($colors, $type);//$colors是一个map
+    }
+}
+```
+```mixins/_var.scss
+@use 'function' as *;
+
+@mixin set-css-color-type($colors, $type) {
+    @include set-css-var-value(('color', $type), map.get($colors, $type, 'base'));
+  
+    @each $i in (3, 5, 7, 8, 9) {
+      @include set-css-var-value(
+        ('color', $type, 'light', $i),
+        map.get($colors, $type, 'light-#{$i}')
+      );
+    }
+  
+    @include set-css-var-value(
+      ('color', $type, 'dark-2'),
+      map.get($colors, $type, 'dark-2')
+    );
+  }
+
+// set css var value, because we need translate value to string
+// for example:
+// @include set-css-var-value(('color', 'primary'), red);
+// --el-color-primary: red;
+@mixin set-css-var-value($name, $value) {
+    #{joinVarName($name)}: #{$value};
+  }
+```
+```mixins/function.scss
+// join var name
+// joinVarName(('button', 'text-color')) => '--el-button-text-color'
+@function joinVarName($list) {
+    $name: '--' + config.$namespace;
+    @each $item in $list {
+      @if $item != '' {
+        $name: $name + '-' + $item;
+      }
+    }
+    @return $name;
+  }
+```
+:::
+
+### 使用root里的变量名词
+:::code-group
+```mixins/function.scss
+// getCssVar('button', 'text-color') => var(--el-button-text-color)
+@function getCssVar($args...) {
+  @return var(#{joinVarName($args)});
+}
+```
+```example
+color: getCssVar('color', 'primary')
+```
+:::
+
+对于组件库的样式,可以通过class或者style来修改.比如el-row的justify属性,他会声明不同的样式
+:::code-group
+```row.scss
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+@use 'mixins/utils' as *;
+
+@include b(row) {
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  box-sizing: border-box;
+
+  @include when(justify-center) {
+    justify-content: center;
+  }
+  @include when(justify-end) {
+    justify-content: flex-end;
+  }
+  @include when(justify-space-between) {
+    justify-content: space-between;
+  }
+  @include when(justify-space-around) {
+    justify-content: space-around;
+  }
+  @include when(justify-space-evenly) {
+    justify-content: space-evenly;
+  }
+  @include when(align-top) {
+    align-items: flex-start;
+  }
+  @include when(align-middle) {
+    align-items: center;
+  }
+  @include when(align-bottom) {
+    align-items: flex-end;
+  }
+}
+```
+```mixin.scss
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}
+```
+:::

packages/sass.md

@@ -12,6 +12,31 @@ layout: doc
 | `$var: "A"; $var: "B"` | `$var = "B"` | 直接覆盖原值 |
 | `$var: "A"; $var: "B" !default` | `$var = "A"` | 保留原值（默认值不生效） |
 | `$var: null; $var: "B" !default` | `$var = "B"` | `null` 视为未定义，应用默认值 |
+
+::: code-group 
+```_library.scss
+$black: #000 !default;
+$border-radius: 0.25rem !default;
+$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
+
+code {
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+}
+```
+```style.scss
+@use 'library' with (
+  $black: #222,
+  $border-radius: 0.1rem
+);
+```
+```res.css
+code {
+  border-radius: 0.1rem;
+  box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
+}
+```
+:::
 ## 插值
 `#{}`, 插值始终返回未加引号的 字符串
 ```scss
@@ -140,3 +165,37 @@ a {
 }
 ```
  :::
+
+## 变量的数据类型
+### map
+::: code-group
+```查找
+@use "sass:map";
+$font-weights:() !default
+$font-weights: ("regular": 400, "medium": 500, "bold": 700);
+
+@debug map.get($font-weights, "medium"); // 500
+@debug map.get($font-weights, "extra-bold"); // null
+```
+```循环
+$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
+
+@each $name, $glyph in $icons {
+  .icon-#{$name}:before {
+    display: inline-block;
+    font-family: "Icon Font";
+    content: $glyph;
+  }
+}
+```
+```设置
+@use "sass:map";
+
+$font-weights: ("regular": 400, "medium": 500, "bold": 700);
+
+@debug map.set($font-weights, "extra-bold", 900);
+// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)
+@debug map.set($font-weights, "bold", 900);
+// ("regular": 400, "medium": 500, "bold": 900)
+```
+:::