commond scss style
npm install @chzky/style* 通用的样式表,使用Scss进行预处理
+ 引入所有样式 :
@use '@chzky/style/lib/mod.scss'
+ 引入通用样式
@use '@chzky/style/lib/cmomond.scss'
+ 引用浏览器默认消除样式
@use '@chzky/style/lib/reset.scss'
+ 引用主题样式
@use '@chzky/style/lib/theme.scss'
+ 引用可变布局样式
@use '@chzky/style/lib/themeLayout.scss'
scss
@use '@chzky/style/lib/theme.scss' as * ;.custom-style{
color:$primary-color;
@include dark-mode{
color:$dk-primary-color; // or other dark color
}
}
`更改主题
通过scss的
语法更改主题颜色$3
`scss
@use '@chzky/style/lib/variable.scss' with (
$unit:rm //将基础单位修改 : px -> rm
);
@use '@chzky/style/lib/mod.scss';
`
$3
#### @unit : 样式单位
+
#### @color : 主题颜色
+
+
+ $warning: #e6a23c
+
+
+
+
+
+
+
+ #### @text-color : 文字颜色
+
+
+
+ $placeholder: #a8abb2
+ $disabled: #c0c4cc
+ $dk-primary-t: #f8f8f2
+
+ $dk-secondary: #bfbfbf
+
+ #### @border : 边框颜色
+
+ $dark: #d4d7de
+ $base: #dcdfe6
+ $light: #e4e7ed
+ $lighter: #ebeef5
+ $extra-light: #f2f6fc
+ $dk-darker: #44475a
+ $dk-dark: #505361
+
+
+
+ #### @shadow : 阴影颜色
+
+
+
+
+
+
+
+ $
#### @gap : 间距 +
+
+
+ #### @radius : 圆角
+
+
+
+ #### @font-size : 字体大小
+
+
+
+ 使用VScode进行智能提示
使用vscode 提示后不需要记住所有的类名,只需要输入部分即可联想补全
1. 安装插件: SCSS Everywhere
2. 创建工作空间
or xxx.code-workspace
3. 在settings中设置 : json
"settings":
{
// 实际在代码中引入什么样式就写什么样式 lib/xxx.css
"html-css-class-completion.remoteStyleSheets": ["https://cdn.jsdelivr.net/npm/@chzky/style/lib/mod.css"]
}