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

SCSS 在项目中的运用的更多相关文章

  1. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

  2. 在项目中使用 SCSS

    背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...

  3. Vue笔记:在项目中使用 SCSS

    背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...

  4. vue项目中设置全局引入scss,使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

  5. 如何在VUE项目中使用SCSS

    首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让c ...

  6. 如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法

    如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法 用过vue的人估计都用过scoped样式属性,但有时候需要穿透样式,啥办? 很多资料都说用>>> 或 ...

  7. React项目中使用less/scss&全局样式/变量

    使用create-react-app脚手架搭建初始化项目 > npm install -g create-react-app > npx create-react-app my-app c ...

  8. 十、VueJs 填坑日记之在项目中使用Amaze UI

    上一篇博文,我们把jQuery集成到了项目中,今天我们来集成Amaze ui(妹子UI).先来介绍一下妹子UI.Amaze UI 含近 20 个 CSS 组件.20 余 JS 组件,更有多个包含不同主 ...

  9. vue项目中的相关插件

    所有安装都是cd到该项目目录中安装 -S代表将插件添加到项目中的package.json文件 1.iview 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品 cnp ...

随机推荐

  1. JavaScript基础系列

    JavaScript基础系列 JavaScript是一种基于对象和事件驱动的客户端脚本语言. JavaScript的注释 // 单行 /**/ 多行注释 JavaScript变量,函数名和操作符都是区 ...

  2. [Swift]LeetCode244.最短单词距离 II $ Shortest Word Distance II

    This is a follow up of Shortest Word Distance. The only difference is now you are given the list of ...

  3. [Swift]LeetCode282. 给表达式添加运算符 | Expression Add Operators

    Given a string that contains only digits 0-9 and a target value, return all possibilities to add bin ...

  4. Mysql的两种“超过多少次”写法(力扣596)

    题目: 有一个courses 表 ,有: student (学生) 和 class (课程). 请列出所有超过或等于5名学生的课. 例如,表: +---------+------------+ | s ...

  5. 9.Git分支-分支的创建与合并-02

    在 8.Git分支-分支的创建与合并-01 主要通过一个例子介绍了分支的新建,以及在工作中,git分支的新建切换以及使用,这里主要介绍分支的合并.这里的例子和8.Git分支-分支的创建与合并-01 的 ...

  6. beoplay(BO)耳机拒绝配对的解决方法

    最近买了个beoplay h4,但是在换了手机之后怎么也不能配对,问客服也不知道,后来找了好久才找到答案: 按住音量+  和 音量-  指示灯出现蓝色并闪烁时,手机搜索蓝牙就可以连接了

  7. Python内置函数(15)——dict

    英文文档: class dict(**kwarg) class dict(mapping, **kwarg) class dict(iterable, **kwarg) Return a new di ...

  8. vs17 破解密钥

    Visual Studio 2017(VS2017) 企业版 Enterprise 注册码:NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Visual Studio 2017(VS201 ...

  9. EF下lambda与linq查询&&扩展方法

    1. linq查询数据 WebTestDBEntities db = new WebTestDBEntities(); 1.1 linq查询所有列数据 var userInfoList = from ...

  10. JS 中 原生方法 (三) --- Date 日期

    本文也说主要阐释了 Javascript 中的基础类型和 引用类型的自带方法,那么熟悉的同学又可以绕道了 总是绕道,真是羞耻悳boy 当然 本文阐述的主要类容 from MDN ( zh-cn ) D ...