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的更多相关文章

  1. 基于Picture Library创建的图片文档库中的上传多个文件功能(upload multiple files)报错怎么解决?

    复现过程 首先,我创建了一个基于Picture Library的图片文档库,名字是 Pic Lib 创建完毕后,我点击它的Upload 下拉菜单,点击Upload Picture按钮 在弹出的对话框中 ...

  2. 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 ...

  3. 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 ...

  4. Uploading multiple files asynchronously by blueimp jquery-fileupload

    Uploading multiple files asynchronously by blueimp jquery-fileupload   Solved. Fiddle: http://jsfidd ...

  5. 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 ...

  6. [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 ...

  7. 预编译scss以及scss和less px 转rem

    预编译scss步骤: 1 搜索ruby并安装,点击 2 安装sass: 3 在hubuilder工具中设置预编译: 触发命令地址为ruby安装地址 命令参数为 %FileName% %FileBase ...

  8. [SCSS] Convert SCSS Variable Arguments to JavaScript

    We will learn how to convert variable arguments by using rest operator in JavaScript. .sass-btn { co ...

  9. Retrofit Upload multiple files and parameters

    Retrofit 的介绍以及基本使用 这里不再说明. 关于多文件上传 以及上传文件的同时携带多个参数说明 网上涉及到的不是太多. 上一张帅图: 代码: apiService: /** params 参 ...

随机推荐

  1. BZOJ3529: [Sdoi2014]数表(莫比乌斯反演,离线)

    Description 有一张 n×m 的数表,其第 i 行第 j 列(1 <= i <= n, 1 <= j <= m)的数值为 能同时整除 i 和 j 的所有自然数之和.给 ...

  2. 洛谷 P1571 眼红的Medusa

    P1571 眼红的Medusa 题目描述 虽然Miss Medusa到了北京,领了科技创新奖,但是他还是觉得不满意.原因是,他发现很多人都和他一样获了科技创新奖,特别是其中的某些人,还获得了另一个奖项 ...

  3. Activity Test1

    源代码下载(免积分) :下载 Acitivty測试的API的父类是InstrumentationTestCase.这个类可以获取Instrumentation.来操作Activity. 对于acti ...

  4. libcurl 上传文件至 web服务器

    测试环境搭建, 使用 wamp server (windows下的 apache+MySQL+php) libcurl vc6 工程代码  下载地址:  http://download.csdn.ne ...

  5. 关于python中数组的问题,序列格式转换

    https://blog.csdn.net/sinat_34474705/article/details/74458605?utm_source=blogxgwz1 https://www.cnblo ...

  6. 洛谷 P1691 有重复元素的排列问题

    P1691 有重复元素的排列问题 题目描述 设R={r1,r2,……,rn}是要进行排列的n个元素.其中元素r1,r2,……,rn可能相同.使设计一个算法,列出R的所有不同排列. 给定n以及待排列的n ...

  7. Android开发之搜芽项目的图片载入问题(使用Volley进行网络图片载入)

    搜芽的移动开发这几天进度相对来说很的快. 可是美中不足的就是网络图片的载入问题. 我有两套方案: 1)沿用迅雷动漫的图片载入.迅雷动漫也是用的一个开源的库.可是不知道是我使用出了问题还是真的是它的问题 ...

  8. C Tricks(十九)—— 求以任意数为底的对数

    本文仅求对数的整数部分: int log(int n, int base){ int i = 1, cnt = 0; while (i*base < n){ i *= base; ++cnt; ...

  9. HTTP网络协议(三)

    HTTP首部字段有四种类型:通用首部字段,请求首部字段,响应首部字段,实体首部字段.  通用首部字段: 首部字段 说明 Cache-Control 控制缓存的行为 Connection 逐跳首部.连接 ...

  10. HTTP网络协议(二)

    HTTP报文内的HTTP信息 HTTP协议交互的信息被称为HTTP报文,请求端的HTTP报文叫做请求报文,响应端的叫做响应报文.    HTTP为了提升传输速率,其在传输数据时,按照数据原样进行压缩传 ...