SCSS 在项目中的运用

最后一段时间一直在做一些网站或是CMS的项目,想用bootstrap,但是,设计那哥们说了,用什么都行,就不能用bootstrap,我去了个.....

无语中,逼着自己写。说实话,就是用bootstrap也只能用些基本的,大部分的式样还得改,因为UI有很大的出入。下面是我的一些经验,css同js一样,不管项目多大,都要从镙丝钉开始做起,再给不同的镙丝钉套不同尺寸的帽子,要由小至大的写,不能由大至少的写,不然,做到最后,疯掉的只能是自己。

项目UI比较另类,因此,我计划以bootstrap组件名称为头,写一个个的小组件,这样一目了然。

 

SCSS 在项目中的运用

以上scss目录中包含一个ui组件,就是各个镙丝钉,在这些镙丝钉中又有两个公共的ui,分别是Color.scss与Size.scss (颜色与大小)。

我使用的编译scss的工具是 Koala 。这个项目用到的样式只有一个出口,就是 management.scss 文件,编译过程中文件的引用,绝对要做到每个文件仅编译一次。

SCSS 在项目中的运用

上面是ui.scss 文件,是除color.scss 外所有基本组件的集合,因为color在size中已经被引用,没必要再重新加载一次。如果重复引用了,查找的方法是在每个ui前添加一个 /*注释*/ ,这段注释会被编译,通过查看这个注释来确定是哪个ui出了问题。当然也可以一个个的查看。

 

项目中的 common.scss 是私有部分中提取的公共样式,这层公共样式是为了在各个小的组件上添加的父层之后的一些效果,比如同样的组件,父组不同,显示效果不同。这样写可以写少的样式,但是能写不同风格的布局。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzdypx.html