CSS 架构之 setting 层

关注

发布于: 刚刚

前言

平常我们在写页面的时候，往往会通过会在每个 class 下面书写相应的样式，然后在相应的 html 加入相应的 class，实现自己需要的效果。
但是当我们写完一个模块时候，会发现有些地方的颜色、边框或者边距，会有很多重复的地方，而我们确实书写了好几遍。而且再改动这个模块的主色调的时候，会依次给每一处进行更改。这样肯定是很麻烦的，所以我们是不是可以把这些公用的颜色或者边框，进行统一管理。
当时是肯定的，这就提及到我们今天要说的 setting 层了。

Setting 层

用来定义一些公共的变量
公共变量：颜色、边框、字体大小、阴影、层级......

color

给大写看些一部分 color 的公共变量，这里用的 scss 语法，具体语法大家可以去官网学习

// const.scss
/* Color----------------------- */$color-primary: #FF5777;$color-white: #FFFFFF;$color-black: #000000;
$color-text-primary: #333333;$color-text-secondary: #666666;$color-text-tertiary: $color-white;$color-text-quaternary: $color-primary;
$border-color-base: #E5E5E5;
$background-color-primary: #F1F1F1;$background-color-secondary: $color-white;$background-color-tertiary: $color-primary;

复制代码

border

// const.scss
/* Border----------------------- */$border-width-base: 1Px !default;$border-style-base: solid !default;$border-base: $border-width-base $border-style-base $border-color-base !default;

复制代码

引用

@import "./settings/var.scss";

以上呢，是在公共模块的情况下进行的变量分类，当然我们可以在此基础上对模块在进行划分,完全可以根据你自己的项目需求，进行相应的分类。
当然，书写的前提,我们要养成架构的思维，先思考整体，进行主色调设计，依次第二个，第三个，可以在相应分类下的书写顺序中体现。

好了，今天就到这里了，很基础的一些功能，写的不对的地方还忘大家多多指教，轻喷！！！再见(*￣︶￣)

发布于: 刚刚阅读数: 2

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景

CSS 架构之 setting 层

前言

Setting 层

color

border

引用

Augus

评论