|
| 1 | +--- |
| 2 | +outline: deep |
| 3 | +layout: doc |
| 4 | +--- |
| 5 | + |
| 6 | +## 组件库 sass |
| 7 | +### 主题色 |
| 8 | +```sass |
| 9 | +$colors: () !default; |
| 10 | +$colors: map.deep-merge( |
| 11 | + ( |
| 12 | + 'white': #ffffff, |
| 13 | + 'black': #000000, |
| 14 | + 'primary': ( |
| 15 | + 'base': #409eff, |
| 16 | + ), |
| 17 | + 'success': ( |
| 18 | + 'base': #67c23a, |
| 19 | + ), |
| 20 | + 'warning': ( |
| 21 | + 'base': #e6a23c, |
| 22 | + ), |
| 23 | + 'danger': ( |
| 24 | + 'base': #f56c6c, |
| 25 | + ), |
| 26 | + 'error': ( |
| 27 | + 'base': #f56c6c, |
| 28 | + ), |
| 29 | + 'info': ( |
| 30 | + 'base': #909399, |
| 31 | + ), |
| 32 | + ), |
| 33 | + $colors |
| 34 | +); |
| 35 | +``` |
| 36 | +### 主题色层次 |
| 37 | +也就是主题色的10%到90%的变化, 使用 `mix` 来混合颜色 |
| 38 | +```scss |
| 39 | +@mixin set-color-mix-level( |
| 40 | + $type, |
| 41 | + $number, |
| 42 | + $mode: 'light', |
| 43 | + $mix-color: $color-white |
| 44 | +) { |
| 45 | + $colors: map.deep-merge( |
| 46 | + ( |
| 47 | + $type: ( |
| 48 | + '#{$mode}-#{$number}': |
| 49 | + color.mix( |
| 50 | + $mix-color, |
| 51 | + map.get($colors, $type, 'base'), |
| 52 | + math.percentage(math.div($number, 10)) |
| 53 | + ), |
| 54 | + ), |
| 55 | + ), |
| 56 | + $colors |
| 57 | + ) !global; |
| 58 | +} |
| 59 | + |
| 60 | +@each $type in $types { |
| 61 | + @for $i from 1 through 9 { |
| 62 | + @include set-color-mix-level($type, $i, 'light', $color-white); |
| 63 | + } |
| 64 | +} |
| 65 | + |
| 66 | +// --el-color-primary-dark-2,暗黑模式 |
| 67 | +@each $type in $types { |
| 68 | + @include set-color-mix-level($type, 2, 'dark', $color-black); |
| 69 | +} |
| 70 | +``` |
| 71 | +### :root伪类 |
| 72 | +通过这个伪类中自定义全局的 `css` 变量,一般以 `--` 开头, 可以确保他们在整个文档中全局可用 |
| 73 | +```scss |
| 74 | +:root { |
| 75 | + --a:#fff |
| 76 | +} |
| 77 | +background-color:var(--a) |
| 78 | +``` |
| 79 | +### 利用 sass 生成 :root 变量 |
| 80 | +定义前缀,块,修改器变量,因为是BEM规范 |
| 81 | +```scss |
| 82 | +$namespace: 'el' !default; |
| 83 | +$common-separator: '-' !default; |
| 84 | +$element-separator: '__' !default; |
| 85 | +$modifier-separator: '--' !default; |
| 86 | +$state-prefix: 'is-' !default; |
| 87 | +``` |
| 88 | +将色彩映射到root选择器中 |
| 89 | + |
| 90 | +:::code-group |
| 91 | +```var.scss |
| 92 | +@use 'mixins/var' as *; |
| 93 | +@use '../common/var' as *; |
| 94 | + |
| 95 | +:root { |
| 96 | + color-scheme: light; |
| 97 | + |
| 98 | + // --el-color-#{$type} |
| 99 | + // --el-color-#{$type}-light-{$i} |
| 100 | + @each $type in (primary, success, warning, danger, error, info) { |
| 101 | + @include set-css-color-type($colors, $type);//$colors是一个map |
| 102 | + } |
| 103 | +} |
| 104 | +``` |
| 105 | +```mixins/_var.scss |
| 106 | +@use 'function' as *; |
| 107 | + |
| 108 | +@mixin set-css-color-type($colors, $type) { |
| 109 | + @include set-css-var-value(('color', $type), map.get($colors, $type, 'base')); |
| 110 | + |
| 111 | + @each $i in (3, 5, 7, 8, 9) { |
| 112 | + @include set-css-var-value( |
| 113 | + ('color', $type, 'light', $i), |
| 114 | + map.get($colors, $type, 'light-#{$i}') |
| 115 | + ); |
| 116 | + } |
| 117 | + |
| 118 | + @include set-css-var-value( |
| 119 | + ('color', $type, 'dark-2'), |
| 120 | + map.get($colors, $type, 'dark-2') |
| 121 | + ); |
| 122 | + } |
| 123 | + |
| 124 | +// set css var value, because we need translate value to string |
| 125 | +// for example: |
| 126 | +// @include set-css-var-value(('color', 'primary'), red); |
| 127 | +// --el-color-primary: red; |
| 128 | +@mixin set-css-var-value($name, $value) { |
| 129 | + #{joinVarName($name)}: #{$value}; |
| 130 | + } |
| 131 | +``` |
| 132 | +```mixins/function.scss |
| 133 | +// join var name |
| 134 | +// joinVarName(('button', 'text-color')) => '--el-button-text-color' |
| 135 | +@function joinVarName($list) { |
| 136 | + $name: '--' + config.$namespace; |
| 137 | + @each $item in $list { |
| 138 | + @if $item != '' { |
| 139 | + $name: $name + '-' + $item; |
| 140 | + } |
| 141 | + } |
| 142 | + @return $name; |
| 143 | + } |
| 144 | +``` |
| 145 | +::: |
| 146 | + |
| 147 | +### 使用root里的变量名词 |
| 148 | +:::code-group |
| 149 | +```mixins/function.scss |
| 150 | +// getCssVar('button', 'text-color') => var(--el-button-text-color) |
| 151 | +@function getCssVar($args...) { |
| 152 | + @return var(#{joinVarName($args)}); |
| 153 | +} |
| 154 | +``` |
| 155 | +```example |
| 156 | +color: getCssVar('color', 'primary') |
| 157 | +``` |
| 158 | +::: |
| 159 | + |
| 160 | +对于组件库的样式,可以通过class或者style来修改.比如el-row的justify属性,他会声明不同的样式 |
| 161 | +:::code-group |
| 162 | +```row.scss |
| 163 | +@use 'common/var' as *; |
| 164 | +@use 'mixins/mixins' as *; |
| 165 | +@use 'mixins/utils' as *; |
| 166 | + |
| 167 | +@include b(row) { |
| 168 | + display: flex; |
| 169 | + flex-wrap: wrap; |
| 170 | + position: relative; |
| 171 | + box-sizing: border-box; |
| 172 | + |
| 173 | + @include when(justify-center) { |
| 174 | + justify-content: center; |
| 175 | + } |
| 176 | + @include when(justify-end) { |
| 177 | + justify-content: flex-end; |
| 178 | + } |
| 179 | + @include when(justify-space-between) { |
| 180 | + justify-content: space-between; |
| 181 | + } |
| 182 | + @include when(justify-space-around) { |
| 183 | + justify-content: space-around; |
| 184 | + } |
| 185 | + @include when(justify-space-evenly) { |
| 186 | + justify-content: space-evenly; |
| 187 | + } |
| 188 | + @include when(align-top) { |
| 189 | + align-items: flex-start; |
| 190 | + } |
| 191 | + @include when(align-middle) { |
| 192 | + align-items: center; |
| 193 | + } |
| 194 | + @include when(align-bottom) { |
| 195 | + align-items: flex-end; |
| 196 | + } |
| 197 | +} |
| 198 | +``` |
| 199 | +```mixin.scss |
| 200 | +@mixin when($state) { |
| 201 | + @at-root { |
| 202 | + &.#{$state-prefix + $state} { |
| 203 | + @content; |
| 204 | + } |
| 205 | + } |
| 206 | +} |
| 207 | +``` |
| 208 | +::: |
0 commit comments