zoukankan      html  css  js  c++  java
  • SCSS 在项目中的运用

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

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

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

     

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

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

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

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

  • 相关阅读:
    洛谷P6218 [USACO06NOV] Round Numbers S 题解 数位DP
    Duilib的双缓冲实现,附带GDI、WTL的双缓冲实现
    关于热键HotKey与WM_KEYDOWN的一点心得
    源码不匹配,找到了xxx的副本。
    SetForegroundWindow的失效问题: 跨进程的窗口前置。
    2021年4月的一份总结
    制作msi文件,exe转msi文件。
    内存限制
    ISPRS Vaihingen 数据集解析
    Linux中sudo、su和su -命令的区别小结
  • 原文地址:https://www.cnblogs.com/baiyygynui/p/9394080.html
Copyright © 2011-2022 走看看