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 是私有部分中提取的公共样式,这层公共样式是为了在各个小的组件上添加的父层之后的一些效果,比如同样的组件,父组不同,显示效果不同。这样写可以写少的样式,但是能写不同风格的布局。

  • 相关阅读:
    bash 中 () {} [] [[]] (()) 的解释
    正则表达式速查笔记
    Makefile速查笔记
    gflags 编译动态库
    在Win10上运行ESXI-Comstomer
    GNU g++常用编译选项用法
    C++标准转换运算符reinterpret_cast
    BZOJ 3211: 花神游历各国【线段树区间开方问题】
    BZOJ 1597: [Usaco2008 Mar]土地购买【斜率优化+凸包维护】
    BZOJ 1046: [HAOI2007]上升序列【贪心+二分状态+dp+递归】
  • 原文地址:https://www.cnblogs.com/baiyygynui/p/9394080.html
Copyright © 2011-2022 走看看