You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
3.7 KiB
SCSS
110 lines
3.7 KiB
SCSS
@use "sass:color";
|
|
@use "sass:map";
|
|
/*
|
|
全局定义变量
|
|
*/
|
|
$w-size: .85vw;
|
|
|
|
/**
|
|
说明:
|
|
1. 在页面中建议使用css变量,原因有2:
|
|
1.1. 主题更换/暗黑主题,可以改变父(根)标签的css变量实现
|
|
1.2. 自定义组件设置css变量改变组件式样,这点在微信小程序及virtualHost下注意
|
|
2. $变量对应css变量:$w-z-index -> --w-z-index
|
|
3. 颜色变量说明,$colors中有main的键,对应的变量有
|
|
3.1. --w-main: 颜色值
|
|
3.2. --w-main-light: 颜色值 亮度 + $w-step
|
|
3.3. --w-main-light-1: 颜色值 亮度 + $w-step * 2
|
|
3.4. --w-main-light-2: 颜色值 亮度 + $w-step * 3
|
|
3.5. --w-main-dark: 颜色值 亮度 - $w-step
|
|
3.6. --w-main-dark-1: 颜色值 亮度 - $w-step * 2
|
|
3.7. --w-main-dark-2: 颜色值 亮度 - $w-step * 3
|
|
3.8. --w-main-h: 颜色色相
|
|
3.9. --w-main-s: 颜色饱和度
|
|
3.10. --w-main-l: 颜色亮度
|
|
3.11. $w-step对应--w-step,亮度变化基础值
|
|
4.如果需要更多的颜色:
|
|
4.1. 使用css的hsl函数构造颜色: hsl(var(--w-main-h),var(--w-main-s),calc(var(--w-main-l) + 50%))
|
|
4.2. 使用css的hsla函数构造透明度颜色: hsl(var(--w-main-h),var(--w-main-s),var(--w-main-l),.5)
|
|
4.3. 使用css函数构造颜色,比较scss函数构造颜色在写法上显得麻烦一些,尽量使用预定义的颜色
|
|
4.4. 构造颜色时,色相\饱和度\亮度\透明度都可以自由设置,但建议只修改亮度和透明度
|
|
*/
|
|
//颜色亮度变化值
|
|
$w-step: 5;
|
|
// 普通z轴基础坐标
|
|
$w-z-index: 100;
|
|
// 顶层z轴基础坐标
|
|
$w-z-index-top: 1000;
|
|
|
|
$colors: (
|
|
"main": hsl(185, 80%, 50%),
|
|
"text": hsl(185, 80%, 5%),
|
|
"bg": #F8F8F8,
|
|
"primary": #3c9cff,
|
|
"warn": #eaa339,
|
|
"success": #5ac725,
|
|
"info": #999,
|
|
"error": #f56c6c,
|
|
"danger": #f56c6c
|
|
);
|
|
|
|
|
|
$dark-colors: (
|
|
"main": map.get($colors, "main"),
|
|
"text": map.get($colors, "bg"),
|
|
"bg": map.get($colors, "text"),
|
|
"primary": map.get($colors, "primary"),
|
|
"warn": map.get($colors, "warn"),
|
|
"success": map.get($colors, "success"),
|
|
"info": map.get($colors, "info"),
|
|
"error": map.get($colors, "error"),
|
|
"danger": map.get($colors, "danger")
|
|
);
|
|
|
|
$el-colors: (
|
|
"primary":"main",
|
|
"warn": "warn",
|
|
"success": "success",
|
|
"info": "info",
|
|
"error": "error",
|
|
"danger": "danger"
|
|
);
|
|
|
|
|
|
|
|
|
|
@mixin varColor($map, $step) {
|
|
@each $name , $value in $map {
|
|
$s: color.channel($value, "saturation", $space: hsl);
|
|
$h: color.channel($value, "hue", $space: hsl);
|
|
$l: color.channel($value, "lightness", $space: hsl);
|
|
--w-#{$name}-h: #{$h};
|
|
--w-#{$name}-s: #{$s};
|
|
--w-#{$name}-l: #{$l};
|
|
--w-#{$name}: hsl(var(--w-#{$name}-h), var(--w-#{$name}-s), var(--w-#{$name}-l));
|
|
// 生成浅色系列颜色变量
|
|
@for $n from 1 through 6 {
|
|
@if $n == 1 {
|
|
--w-#{$name}-light: hsl(var(--w-#{$name}-h), var(--w-#{$name}-s), calc(var(--w-#{$name}-l) + #{$n} * var(--w-step) * 1%));
|
|
--w-#{$name}-dark: hsl(var(--w-#{$name}-h), var(--w-#{$name}-s), calc(var(--w-#{$name}-l) - #{$n} * var(--w-step) * 1%));
|
|
} @else {
|
|
--w-#{$name}-light-#{$n - 1}: hsl(var(--w-#{$name}-h), var(--w-#{$name}-s), calc(var(--w-#{$name}-l) + #{$n} * var(--w-step) * 1%));
|
|
--w-#{$name}-dark-#{$n - 1}: hsl(var(--w-#{$name}-h), var(--w-#{$name}-s), calc(var(--w-#{$name}-l) - #{$n} * var(--w-step) * 1%));
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
@mixin varELColor($map, $step) {
|
|
@each $name , $value in $map {
|
|
|
|
--el-color-#{$name}: hsl(var(--w-#{$value}-h), var(--w-#{$value}-s), var(--w-#{$value}-l));
|
|
|
|
@for $n from 1 through 9 {
|
|
--el-color-#{$name}-light-#{$n}: hsl(var(--w-#{$value}-h), var(--w-#{$value}-s), calc(var(--w-#{$value}-l) + #{$n} * var(--w-step) * 1%));
|
|
--el-color-#{$name}-dark-#{$n}: hsl(var(--w-#{$value}-h), var(--w-#{$value}-s), calc(var(--w-#{$value}-l) - #{$n} * var(--w-step) * 1%));
|
|
}
|
|
}
|
|
} |