Sass BASICS (8)-Mr. Lemon

Sass BASICS (8)-Mr. Lemon @ Import
Sass supports all css @ rules and some Sass exclusive rules, also known as "directive". These rules have different
The function is described as follows.
@ Import
Sass extends the @ import rule of CSS so that it can introduce SCSS and Sass
File. All introduced SCSS and Sass files will be merged and output a single
. In addition, the variables or mixins defined in the imported file can be used in the main file.
@ Import is introduced according to the file name. By default, it looks for the Sass file and
But in a few cases, it will be compiled into the @ import rule of CSS:
If the file extension example. css
If the file name starts with http: //
If the file master url ().
If @ import contains any media queries)
If none of the above occurs and the extension is. scss or. sass, the Sass or SCSS file with this name will be introduced. If there is no extension, Sass will try
Find and introduce a file with the same name as the. scss or. sass extension. For example:
@ Import "foo. scss ";
Or
@ Import "foo ";
Both will introduce the foo. scss file, and
@ Import "foo.css? 6.1.3"
@ Import "foo" screen
@ Import "http://foo.com/bar ";
@ Import url (foo );
Will be compiled:
@ Import "foo.css? 6.1.3 ";
@ Import "foo" screen;
@ Import "http://foo.com/bar ";
@ Import url (foo );
You can also use @ import to introduce multiple files. For example:
The rounded-corners and text-shadow files will be introduced.

Compile the file into a CSS file. In this case, you can add a slash before the file name.
Line to avoid compilation. This tells Sass not to compile it into CSS files.
Then, you can introduce the file as usual, and omit the text
If you have a SCSS or Sass file that needs to be introduced, but you do not want it to be underlined before the file name.

For example, you have a file named _ colors. scss. In this way, the _colors.css file will not be generated, and you can also do this:
@ Import "colors"; // do not underline
To introduce the _ colors. scss file.
Note: files of the same name with or without underlines cannot exist in the same directory at the same time. For example, _ colors. scss cannot coexist with colors. scss.

Nested @ import

Although you only need to use @ import in top-level files most of the time, you can also include them in css rules and @ media rules.
Then reference:
# Main {
@ Import "example ";
}
Compiled CSS:
# Main. example {
Color: red;
}
@ Media
The @ media instruction in Sass is as simple as the CSS usage rule, but it has another
Can be nested in CSS rules. A bit similar to JS's bubble function 1
Example:
. Siderbar {
Width: 300px;
@ Media screen and (orientation: landscape ){
Width: 500px;
}
}
Compiled;
. Sidebar {
Width: 300px;
}
@ Media screen and (orientation: landscape ){
. Sidebar {
Width: 500px;
}
}
@ Media can also be nested @ media:
@ Media screen {
. Sidebar {
@ Media (orientation: landscape ){
Width: 500px;
}
}
}
You can also use @ media #{}:
$ Media: screen;
$ Feature:-webkit-min-device-pixel-ratio;
$ Value: 1.5;
@ Media # {$ media} and ($ featrue: $ value ){
. Sidebar {
Width: 500px;
}
}
Compiled css:
@ Media screen and (-webkit-min-device-pixel-ratio; 1.5 ){
. Sidebar {
Width: 500px;
}
}
@ Extend
In Sass, @ extend is used to extend the selector or placeholder, such
. Error {
Border: 1px # f00;
Background-color: # fdd;
}
. Error. intrusion {
Background-image: url ("/image/hacked.png ");
}
. SeriousError {
@ Extend. error;
Border-width: 3px;
}
Compiled:
. Error,. seriousError {
Border: 1px # f00;
Background-color: # fdd;
}
. Error. intrusion,. seriousError. intrusion {
Background-image: url ("/image/hacked.png ");
}
. SeriousError {
Border-width: 3px;
}
Extension selector:
@ Extend extends not only class selectors, but also any selectors, such as. special. cool, a: hover, or a. user [href ^ = "http: //"].
. Hoverlink {
@ Extend a: hover;
}
A: hover {
Text-decoration: underline;
}
Compiled:
A: hover,. hoverlink {
Text-decoration: underline;
}

. Hoverlink {
@ Extend a: hover;
}
. Comment a. user: hover {
Font-weight: bold;
}
Compiled CSS
. Comment a. user: hover,. comment
. User. hoverlink {
Font-weight: bold;
}
Multiple extensions
To Inherit styles from multiple places, you can use @ extend to inherit the styles of multiple selectors or placeholders, such:
. Error {
Border: 1px # f00;
Background-color: # fdd;
}
. Attention {
Font-size: 3em;
Background-color: # ff0;
}
. SeriousError {
@ Extend. error;
@ Extend. attention;
Border-width: 3px;
}
Compiled css
. Error, seriousError {
Border-width: 3px;
}
Extended single Selector
We know earlier that % placeholder does not use @ extend to show that the call will not be generated
Any style code. The placeholders are the same in the selector. For example, the following code
# Context a % extreme {
Color: blue;
Font-weight: bold;
Font-size: 2em;
}
This Code does not generate any code before it is called. It is generated only after @ extend is called:
. Notice {
@ Extend % extreme;
}
Compiled CSS
# Context a. nontice {
Color: blue;
Font-weight: bold;
Font-size: 2em;
}
@ At-root
@ At-root literally refers to the jump and element. When your selector is nested in multiple layers
To jump out of a selector, you can use @ at-root. Let's look at
Simple Example:
. {
Color: red;
. B {
Color: orange;
. C {
Color: yellow;
@ At-root. d {
Color: green;
}
}
}
}
Compiled css
. {
Color: red;
}
. A. B {
Color: orange;
}
. A. B. c {
Color: yellow;
}
. D {
Color; green;
}
@ Debug
@ Debug is used for debugging in Sass. When you use the Sass source code
@ Debug command, when Sass code is incorrectly compiled, the prompt Bug you set will be output in the Command handler:
@ Debug 10em + 12em;
Output:
Line 1 EEBUG: 22em
@ Warn
@ Warn and @ debug functions are similar to each other to help us better debug Sass. For example:
@ Mixin adjust-location ($ x, $ y ){
@ If unitless ($ x ){
@ Warn "Assuming # {$ x} to be in pixels ";
$ X: 1px * $ x;
}
@ If unitless ($ y ){
@ Warn "Assuming # {$ y} to be in pixels"
$ Y: 1px * $ y:
}
Position: relative; left: $ x; top: $ y;
}
@ Error
@ Error and @ warn, @ debug functions are exactly the same.
@ Mixin error ($ x ){
@ If $ x <10 {
Width: $ x * 10px;
} @ Else if $ x = 10 {
Width: $ x;
} @ Else {
@ Error "you need to set the number of # {$ x} values to less than 10 ";
}
}
. Texst {
@ Include error (15 );
}
During Compilation:
Set the value of 15 to 10 on line 7 at column5.