First of all, I will not list the 100,000 reasons why bootstrap has transferred from less to less to sass in v4. (I plan to compare another article with less, sass, postcss).
Let's go to bootstrap v4 sass
1. The sass files of bootstrap are all placed in the scss directory. Why is the name scss instead of sass? It mainly involves the difference between sass and scss syntax. The scss syntax is closer to css, so it is more popular and widely used. For details, please refer to the sass syntax
2. There are two types of scss files, one is the beginning of the underscore, such as _variables.scss, and the other is the not underscore, such as bootstrap.scss. The difference between these two is that the former represents the imported file and will not be compiled into the corresponding css file by default, while the latter will compile the corresponding css file. So if there are two files _a.scss , the default compilation result of b.css is that only b.css files are compiled. If b wants to use the style in _a.scss, you can use the import function @import a (the imported file can omit the underscore and file suffix name). For details, please refer to the sass syntax
3. If we compile 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 is a reset style and bootstrap-grid is a grid style. These two can be regarded as a free separate style. If you don't want to use the entire bootstrap style in some scenarios, but 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 uses the traditional layout method, while the latter uses the flex method, so you can choose to use it according to your actual situation. From the above image, you can see that bootstrap-flex.scss has been reset by the $enable-flex: true before importing bootstrap.scss
4. Open bootstrap.scss and you can see that various files are imported, which are divided into 6 large blocks, namely:
variable & mixin: introduce variables and mixin files, where all files in the mixin directory are imported into the _mixin.scss file
reset: import normalize and print files
core: Introduce basic style files such as grid, form, table, button, etc.
component: Introduce component files such as nav, card, breadcrumb, etc.
component js: introduce component files that require js control, such as modal, tooltips, etc.
Utility: Introduce some site-wide class files, with some common classes, 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 not familiar with sass, you can find the compiled bootstrap.css in the directory dist/css.
Let's talk about using css directly:
Introduce <link href="bootstrap.css" rel="stylesheet" /> in html
If you need to modify the bootstrap style, you can create another style sheet such as style.css to override the bootstrap style. It is not recommended to directly modify the bootstrap.css style sheet modification. Since it is written with sass, of course we can choose a higher-quality sass. There are also two ways to modify sass, one is non-destructive and the other is destructive.
For destructive things, it means modifying wherever they don’t like, and there is no good trick. Let’s talk about non-destructive use modifications here, we can adopt the following method:
Put all scss files of bootstrap in the bootstrap directory
scssbootstrap directory (all files in the original scss directory in bootstrap) bootstrap.scss...mixin directory..._custom-variables.scss (custom variables, or variables that overwrite 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 you have a code obsessiveness, you always want to cut off the unused styles, so you can pick up bootstrap.scss and check it out. Wouldn't it be better to just remove the import of those unwanted styles? If you consider upgrading in the future, you should create a new file and introduce whatever you want according to the method in bootstrap.scss. For component styles, you need to introduce them, and if you don’t need them, you must pay attention to the core and utility styles, because maybe you use these basic styles in your component.
How to improve the sass design of bootstrap v4
From the perspective of personal practical experience, I feel that bootstrap v4 has the following flaws: (For personal opinion only)
You can further perform directory planning, such as putting all component files in the component directory and utility files in the utility directory, which will look more organized, and now it is a bit scattered and looks a bit messy.
Without % design, I personally think % design is an improvement and is very effective for style combination declarations, especially some short compatible codes and so on.
It can provide a scss file, integrating the functions of variables and mixin, so that it can facilitate the creation of new style files and directly import this integrated file. Variables and mixin can be declared casually with component variables, and can be placed in their respective component scss, because only components can use it, rather than in the variables file, which makes it look like there are too many variables files. Even size has a mixin file, which feels a bit too much.