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 是私有部分中提取的公共样式,这层公共样式是为了在各个小的组件上添加的父层之后的一些效果,比如同样的组件,父组不同,显示效果不同。这样写可以写少的样式,但是能写不同风格的布局。
SCSS 在项目中的运用的更多相关文章
- scss/less语法以及在vue项目中的使用(转载)
1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...
- 在项目中使用 SCSS
背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...
- Vue笔记:在项目中使用 SCSS
背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...
- vue项目中设置全局引入scss,使每个组件都可以使用变量
在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...
- 如何在VUE项目中使用SCSS
首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让c ...
- 如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法
如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法 用过vue的人估计都用过scoped样式属性,但有时候需要穿透样式,啥办? 很多资料都说用>>> 或 ...
- React项目中使用less/scss&全局样式/变量
使用create-react-app脚手架搭建初始化项目 > npm install -g create-react-app > npx create-react-app my-app c ...
- 十、VueJs 填坑日记之在项目中使用Amaze UI
上一篇博文,我们把jQuery集成到了项目中,今天我们来集成Amaze ui(妹子UI).先来介绍一下妹子UI.Amaze UI 含近 20 个 CSS 组件.20 余 JS 组件,更有多个包含不同主 ...
- vue项目中的相关插件
所有安装都是cd到该项目目录中安装 -S代表将插件添加到项目中的package.json文件 1.iview 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品 cnp ...
随机推荐
- [Swift]LeetCode679. 24点游戏 | 24 Game
You have 4 cards each containing a number from 1 to 9. You need to judge whether they could operated ...
- [Swift]LeetCode866. 回文素数 | Prime Palindrome
Find the smallest prime palindrome greater than or equal to N. Recall that a number is prime if it's ...
- [Swift]LeetCode896. 单调数列 | Monotonic Array
An array is monotonic if it is either monotone increasing or monotone decreasing. An array A is mono ...
- python bz2模块
bz2模块提供了使用bzip2算法压缩和解压缩数据一套完整的接口. bz2模块包括: 用于读写压缩文件的open()函数和BZ2File类 用于一次性压缩和解压缩的compress() 和 decom ...
- 页面的div中有滚动条,js实现刷新页面后回到记录时滚动条的位置
当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: ...
- 使用ML.NET + Azure DevOps + Azure Container Instances打造机器学习生产化
介绍 Azure DevOps,以前称为Visual Studio Team Services(VSTS),可帮助个人和组织更快地规划,协作和发布产品.其中一项值得注意的服务是Azure Pipeli ...
- Python爬虫入门教程 2-100 妹子图网站爬取
妹子图网站爬取---前言 从今天开始就要撸起袖子,直接写Python爬虫了,学习语言最好的办法就是有目的的进行,所以,接下来我将用10+篇的博客,写爬图片这一件事情.希望可以做好. 为了写好爬虫,我们 ...
- 漫画:全面理解java.lang.IllegalArgumentException及其可用性设计
经过一段时间的学习与实践,飞鸟已经可以独力解决一些问题.小鱼就让飞鸟讲述一些遇到的问题和解决过程. 报错日志: 这个产生的原因是我覆盖Collections.sort的Comparator方法的时候 ...
- (四)五种IO模型
基本概念 我们之前编写的套接字程序都是阻塞式的,其实这也是默认的形式.现在我们需要明确一些概念: 用户空间和内核空间 首先要明确,用户启动的应用程序在系统中以一个进程的形式存在,而无论对于网络数据还是 ...
- 前端笔记之JavaScript(一)初识JavaScript
一.JavaScript简介 1.1网页分层 web前端一共分三层: 结构层 HTML : 负责搭建页面结构 样式层 CSS : 负责页面的美观 行为层 JavaSc ...