1. Import SASS file
There is a special css unusual characteristics, i.e. @import rule, which allows a file to import additional css css file. However, the consequences are only executed to @import, the browser will go to download additional css file, which cause the page to load up very slowly.
There is also a sass @import rule, but the difference is, the sass @import rules come put related files imported when generating css file. This means that all styles are grouped into the same css file without having to launch additional download request. Further, all variables are defined in a mixer and is introduced into the document (see Section 2.5) can be used in the import file.
Use of sass @import rules do not need to specify the full name of the import file. You can omit .sass or .scss file suffix (see below). Thus, under the premise of not modifying the style sheet, you can freely modify sass style file syntax you being imported or written by someone else, easily switch between sass and scss syntax. For example, @ import "sidebar"; This command will be added to all of the styles in the current stylesheet sidebar.scss file.
2. Using SASS part of the file
When the sass through @import styles across multiple files, you usually just want to generate a few css file. Sass those files specifically for the @import command written, does not need to generate the corresponding separate css files, such sass file called local file. In this regard, sass has a special convention to name those files.
That this convention, sass partial file name of the file starts with an underscore. Thus, Sass would not compile this file output separately css at compile time, as this document only import. When you @import a local file, also can not write the full name of the file that underscore the beginning of the file name is omitted. For example, you want to import themes / _night-sky.scss the local file variables, you only need to write @import "themes / night-sky" in the style sheet ;.
Local files may be referenced by multiple different files. While some styles even need to use multiple pages in multiple projects, which is very useful. In this case, sometimes you need a little in the style sheet to modify the imported style, sass have a function just to solve this problem, which is the default variable values.
3. Default variable values
Under normal circumstances, you declare a variable repeatedly, only the last one declared valid and it will cover the value front. for example:
$link-color: blue;
$link-color: red;
a {
color: $link-color;
}In the above example, the hyperlink color will be set to red. This may not be the results you want, if you write a library may be others via sass file @import to import, you may want to import can customize modify certain values sass library file. Use of sass! Default label can achieve this purpose. ! It is much like css properties antithesis important label, except that the default for variables, meaning:! If the variable is declared assignment, and it values its statement, otherwise use the default values.
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}In the above example, if the user prior to import your sass local file declares a \ (fancybox-width variable, then your local file to \) fancybox-width 400px assignment is invalid. If you do not do such a statement, then $ fancybox-width defaults to 400px.