Interpreting bootstrap v4 Sass Design _javascript Techniques

First of all about the bootstrap from V3 less to V4 sass of the 100,000 why, here is not a table (the plan will be another article to compare Less,sass,postcss).

Together into Bootstrap v4 SASS

1, bootstrap sass files are placed in the Scss directory, why is the name scss rather than sass? Mainly involves sass and scss two kinds of grammar difference, SCSS syntax is closer to CSS, so more popular, more widely used. Specific reference to SASS syntax

2, scss file is divided into two kinds, one is the following line, such as the beginning of the _VARIABLES.SCSS, one is not underlined such as BOOTSTRAP.SCSS, the difference is that the former represents the imported files, the default will not be compiled into the corresponding CSS file, The latter compiles the corresponding CSS file. So if there are two files _a.scss, b.scss the default compilation result is only b.css file, if B to use the style in _a.scss, then you can use the Import function @import A (the imported file can omit the underscore and file suffix name). You can also refer to SASS syntax

3, if compiling the entire Scss directory, we can get four CSS files, divided into Bootstrap.css, Bootstrap-flex.css, Bootstrap-reboot.css, Bootstrap-grid.css, These four CSS styles are generated by the following four scss files.

Bootstrap-reboot style, Bootstrap-grid for grid style, these two can be seen as a separate style, if some scenes you do not want to use the entire bootstrap style, but also want to use its reset or grid system, you can use these two directly.

The difference between bootstrap and Bootstrap-flex is that the former use the traditional layout, the latter is the Flex method, so you can choose to use according to their actual situation. You can see from the image above that the bootstrap-flex.scss reset the $enable before importing Bootstrap.scss-flex:true

4, open bootstrap.scss, you can see inside the import of a variety of documents, the overall divided into 6 large chunks, respectively:

Variable & mixin: Introducing variables and mixin files, where all files in the Mixin directory are imported into _MIXIN.SCSS files
Reset: Introduction of normalize and print files
Core: Introduction of basic style files, such as Grid,form,table,button
Component: Introducing component files, such as NAV,CARD,BREADCRUMB, etc.
Component JS: Introduce the component files that need JS control, such as Modal,tooltips
Utility: The introduction of some of the whole station class file, there are some common class, such as Clearfix,center-block, etc.

How to use and modify the style of bootstrap V4

If you are familiar with sass, you can use its sass directly, of course, if you are unfamiliar with sass, you can find the compiled bootstrap.css in the directory dist/css.

Let's talk about using CSS directly below:

Introduce <link href= "Bootstrap.css" rel= "stylesheet" in HTML/>
If you want to modify the bootstrap style, you can create a new style sheet such as style.css, overriding the bootstrap style. Do not recommend direct modification open BOOTSTRAP.CSS style sheet modification since it is written in sass, of course, we can choose the sass of higher force, the same sass also have two ways to modify, a non-destructive, a destructive.

For the destructive, that is where the change is not appropriate, there is no good trick. Here's what we can do with non-destructive use modification:

Put all the bootstrap scss files in the bootstrap directory

Scss
Bootstrap directory (original bootstrap scss directory all files)
bootstrap.scss
...
Mixin directory
...
_CUSTOM-VARIABLES.SCSS (custom variable, or variable that overrides bootstrap)
_custom-mixin.scss (custom mixin)
Style.scss

The STYLE.SCSS code is as follows:

@charset "UTF-8";
Import file
@import "Custom-variables";
@import "Custom-mixin";
@import "Bootstrap/bootstrap";

Of course, if there is code neat, that for the use of the style is always want to cut off, and then pick up the bootstrap.scss to look at the unwanted style, directly remove import is not good. If you think about what to do later, then create a new file, what you want on your own in accordance with the Bootstrap.scss method to introduce. For component styles, you need to introduce them without introducing them, but be sure to pay attention to the style of the core and the utility, because you might use these basic styles in your component.

How to improve the sass design of Bootstrap V4

From the perspective of personal combat experience, I think Bootstrap V4 has the following defects: (only for personal opinion)

You can further catalog planning, such as putting all the component files in the component directory, utility files in the utility directory, which looks more organized, now a little fragmented, looks a bit messy
No% design, personally feel% of the design is a progress, for the combination of style statement is very effective, especially some short compatible code or something.

can provide a scss file, the integration of the variables and mixin functions, so that you can easily new style files, direct import of the consolidated file, variables and mixin random components of the variable declaration, can be placed in their own component scss, because only components will be used, Instead of unifying the variables file, it appears that variables file is more bloated mixin design a bit too much, even size has a mixin file, feeling a bit over.