[SCSS] Organize SCSS into Multiple Files with Partials
Tired of dealing with monolithic CSS files? Are requests for multiple CSS files hurting your performance? In this lesson we learn how to separate our styles with SCSS partials, and how SCSS imports compile to one file so there's only one request.
Things to know:
- If importing partial file, won't generate a new css file
- If importing normal scss file, it will generate a new css file
So when we should use partial import or not, you can think that whether this file should be used when app first loading? If it yes, then use partial import, if not, then normal import. The reason behind that is because browser will loading main css (the main.scss file that import other scss files ) file first. After this main.css file loaded, then browser will start loading other css file.
As you can see other.css which are import as normal import mode. "Content downloaded" happens after main.css file are downloaded.
- Only partial file's variable can be shared accross the rest of partial file. But it also require you import that partial file which has variables defines into main.scss file before the rest partial files.
/**
About using variable There are tow cases when using variable 1. none partial file (provider) + none partial file
Variable only available for its own file scope.
If you want to use one variable inside file A from file B
You have to import file A into file B. 2. partial file (provider) + none partial file
If you have an variable defined in partial file, and you want to
use it inside none partial file, you also need to import partial
file into none partial file. 3. partial file (provider) + partial file
If you have an variable defined in partial file A, and you want to use it
inside another partial file B, you have to import file A into main.scss file
before you import file B into main.scss. Then you can use variable inside file A
inside file B.
*/
@import "color";
@import "partial";
@import "other"; .color {
color: $primary-color; // From _color
}
_color.scss
$primary-color: lighten(red, 15%); .red {
color: $primary-color;
}
_partial.scss
.l-border {
border-left: 5px solid $primary-color;
}
other.scss
@import "color"; .bg {
background-color: $primary-color;
}
[SCSS] Organize SCSS into Multiple Files with Partials的更多相关文章
- 基于Picture Library创建的图片文档库中的上传多个文件功能(upload multiple files)报错怎么解决?
复现过程 首先,我创建了一个基于Picture Library的图片文档库,名字是 Pic Lib 创建完毕后,我点击它的Upload 下拉菜单,点击Upload Picture按钮 在弹出的对话框中 ...
- How to effectively work with multiple files in Vim?
Why not use tabs (introduced in Vim 7)? You can switch between tabs with :tabn and :tabp, With :tabe ...
- How to Upload multiple files to documentLibrary in one time
In a Sharepoint 2013 website,we can upload one file to the documentlibrary by click "Uploa ...
- Uploading multiple files asynchronously by blueimp jquery-fileupload
Uploading multiple files asynchronously by blueimp jquery-fileupload Solved. Fiddle: http://jsfidd ...
- How to attach multiple files in the Send Mail Task in SSIS
Let’s say you need to create a SSIS package that creates 2 files and emails the files to someone. Yo ...
- [SCSS] Organize Styles with SCSS Nesting and the Parent Selector
SCSS nesting can produce DRYer code by targeting child elements without having to write the parent c ...
- 预编译scss以及scss和less px 转rem
预编译scss步骤: 1 搜索ruby并安装,点击 2 安装sass: 3 在hubuilder工具中设置预编译: 触发命令地址为ruby安装地址 命令参数为 %FileName% %FileBase ...
- [SCSS] Convert SCSS Variable Arguments to JavaScript
We will learn how to convert variable arguments by using rest operator in JavaScript. .sass-btn { co ...
- Retrofit Upload multiple files and parameters
Retrofit 的介绍以及基本使用 这里不再说明. 关于多文件上传 以及上传文件的同时携带多个参数说明 网上涉及到的不是太多. 上一张帅图: 代码: apiService: /** params 参 ...
随机推荐
- 一个奇怪的Java集合问题
int size = list.size(); Integer existIndex = -1; for (int index = 0; index < size; index++) { Pho ...
- 浅谈Git与SVN的使用感受
作为版本号控制工作.两者的做大的差别应该在于:Git属于分布式版本号控制工具,而SVN属于集中式的版本号控制工具.分布式的优点是什么呢?举个样例来说.当你在火车上离线状态下编程工作,在某个阶段会须要先 ...
- 找不到或无法载入主类 org.jivesoftware.openfire.starter.ServerStarter
刚接触openfire的配置就出现了这个错误.解决方法非常easy,忘记了将openfire的源文件加入到user entries中了
- 不重新启动VMWare虚拟机加入虚拟磁盘的方法(上)
近期因为业务须要在不重新启动系统的前提下对系统进行扩容,前提是该系统做过lvm.可是没有足够的物理卷(硬盘),所以引出了改文.本文共分为上下两部分.这是第一部分. 文件夹 加入磁盘 做LVM 加入硬盘 ...
- DBLINK做系统集
过度使用DBLINK做系统集成会带来的问题 过度使用DBLINK做系统集成会带来很多问题,问题主要由以下几点: 1. 大量消耗数据库资源: 本地系统每通过DBLINK链接远端系统一次,都会生成一个本地 ...
- ORACLE 11G R2 DG_BROKER 之SWITCH OVER
官网:http://docs.oracle.com/cd/B12037_01/server.101/b10822/cli.htm 这个是有必要看一下. 注意本人已经完毕一次SWITCHOVER 所 ...
- 作为一个新人,怎样学习嵌入式Linux?(韦东山)
这篇文章是引用韦老师的部分关于新人怎么学习嵌入式Linux的经验,引用如下: 1.电脑一开机,那些界面是谁显示的?是BIOS,它做什么?一些自检,然后从硬盘上读入windows,并启动它. 类似的, ...
- (转)bat批处理的注释语句
在批处理中,段注释有一种比较常用的方法: goto start = 可以是多行文本,可以是命令 = 可以包含重定向符号和其他特殊字符 = 只要不包含 :start 这一行,就都是注释 :start 另 ...
- jni和C++通信中文乱码的问题
转自 http://www.cnblogs.com/bluesky4485/archive/2011/12/13/2285802.html 首先,需要明确几个关于编码的基本概念: java内部是使用的 ...
- 【AtCoder Beginner Contest 074 D】Restoring Road Network
[链接]h在这里写链接 [题意] 给你任意两点之间的最短路. 让你求出原图. 或者输出原图不存在. 输出原图的边长总和的最小值. [题解] floyd算法. 先在原有的矩阵上. 做一遍floyd. 如 ...