[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 参 ...
随机推荐
- windows 静态和动态库
c++中共有两种库:1.动态链接库LIB包含了函数所在的DLL文件和文件中函数位置的信息(入口),代码由运行时加载在进程空间中的DLL提供,称为动态链接库dynamic link library.(这 ...
- session应用二
从session中获取mapper对象,利用mapper对象进行增删改查 Date now = new Date(); SqlSession session = this.yangchebaoDbMa ...
- redirect_uri 参数错误
http://www.cnblogs.com/zitjubiz/p/5935712.html http://blog.csdn.net/u014033756/article/details/52038 ...
- 116.C语言异常抛错
#include <stdlib.h> #include <stdio.h> #include <setjmp.h> //异常抛错检测 jmp_buf buf1; ...
- jquery点击完一个按钮,并且触发另一个按钮
$a.click(function(){ $b.trigger('click'); });
- 在linux环境下增加别名
编辑.cshrc文件:gvim ~/.cshrc 增加要添加的别名,例如:alias la 'ls -a' qw保存退出 source ~/.cshrc即可生效
- 接口如何使用(以笑话大全api为例)
接口如何使用(以笑话大全api为例) 一.总结 一句话总结:直接用ajax,或者post,get方式向接口网址请求数据,然后接收网站传过来的数据就好,和我们写网站的时候前台向后台请求数据的方式一样. ...
- POJ 3264 Balanced Lineup 线段树RMQ
http://poj.org/problem?id=3264 题目大意: 给定N个数,还有Q个询问,求每个询问中给定的区间[a,b]中最大值和最小值之差. 思路: 依旧是线段树水题~ #include ...
- postman--基本使用2
本文转自:http://blog.csdn.net/u013613428/article/details/51557804 最近需要测试产品中的REST API,无意中发现了PostMan这个chro ...
- Android开发系列(二十):AutoCompleteTextView(自己主动完毕文本框)的功能和使用方法
当用户输入一定的字符之后,自己主动完毕文本框可以显示一个下拉菜单,供用户从中选择,当用户选择某个菜单项之后,AutoCompleteTextView可以依照用户的选择自己主动填写该文本框 AutoCo ...