[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; }
相关文章
- python 中 with 用法
- [Tools] Create Files in the Terminal from the Clipboard with PBPaste
- [Tools] Batch Create Markdown Files from a Template with Node.js and Mustache
- [Bash] Move and Copy Files and Folders with Bash
- [Angular + Unit Testing] Mock HTTP Requests made with Angular’s HttpClient in Unit Tests
- [Python] Indexing An Array With Another Array with numpy
- [Express] Upload Files with Express
- [Preact] Integrate react-router with Preact
- [Practical Git] Remove unnecessary git tracking with .gitignore files
- [Webpack 2] Grouping vendor files with the Webpack CommonsChunkPlugin
- [Protractor] Protractor Interactive with elementor
- [Bash] Add Executable Files to $PATH with Bash
- [Postgres] Bulk Insert and Export Data with csv Files with Postgres copy Command
- [Tools] Create Files in the Terminal from the Clipboard with PBPaste
- [XState] Replace Enumerated States with a State Machine
- [Webpack] Detect Unused Code with Webpack and unused-files-webpack-plugin
- [Typescript] Improve Readability with TypeScript Numeric Separators when working with Large Numbers
- [Bash] Find Files and Folders with `find` in Bash
- [Express] Upload Files with Express
- [NPM] Run npm scripts when files change with onchange
- [Practical Git] Remove unnecessary git tracking with .gitignore files
- [Node.js] Creating Demo APIs with json-server
- how to deal with error message Failed to create note
- LaunchBox Premium with Big Box 12.1
- CentOS安装mysql*.rpm提示conflicts with file from package的解决的方法
- Machine Learning with Python Part One