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";以上呢，是在公共模块的情况下进行的变量分类，当然我们可以在此基础上对模块在进行划分,完全可以根据你自己的项目需求，进行相应的分类。 当然，书写的前提,我们要养成架构的思维，先思考整体，进行主色调设计，依次第二个，第三个，可以在相应分类下的书写顺序中体现。
好了，今天就到这里了，很基础的一些功能，写的不对的地方还忘大家多多指教，轻喷！！！再见(*￣︶￣)
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
