Sass @ rule, sass rule

Sass @ rule, sass rule

@ Import
Sass supportAllCSS3@ RuleAnd some Sass-specific rules are also called "directives )".
Sass extends the @ import rule of CSS so that it can introduceSCSSAndSass File. All introducedSCSSAndSassFiles will beMergeAnd output a single CSS file. In addition,VariableOrMixinsCan be used in the main file.
Sass searches for other Sass files in the current directory. If it is Rack, Rails, or Merb, It is the Sass file directory. You can also use the: load_paths option or the -- load-path option in the command line to specify additional search directories.
@ ImportBased on the file name. By default, it will look for the Sass file and introduce it directly. However, in a few cases, it will be compiled into CSS@ ImportRules:

• If the file extension is. css.
• If the file name starts with http.
• If the file name is url ().
• If @ import contains any media queries ).

If none of the above conditions occur and the extension is. ScssOr. Sass, The Sass or SCSS file with this name will beIntroduction. IfNo extension, Sass will try to find and introduce a file with the same name as. scss or. sass extension.
For example:

1 @import "foo.scss";

Or

@import "foo";

Both will introduce the foo. scss File, And

@import "foo.css";@import "foo" screen;@import "http://foo.com/bar";@import url(foo);

Will be compiled:

@import "foo.css";@import "foo" screen;@import "http://foo.com/bar";@import url(foo);

You can also use @ import to introduce multiple files.. For example:

@import "rounded-corners", "text-shadow";

The rounded-corners and text-shadow files will be introduced.

There isSCSSOrSassFile needs to be imported, but you do not want it to be compiled into a CSS file. In this case, you can addUnderline, You canAvoid Compilation. This tells Sass not to compile it into CSS files. Then, you can introduce the file as usual, and omit the underline before the file name.

For example, you have a file named _ colors. scss. In this way, the _colors.css file will not be generated,You can also do this:

@ Import "colors"; // do not underline

To introduce_ Colors. scssFile.

Note:: A file of the same name with or without underlines cannot exist in the same directory. 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.

Suppose the Style File 'example. scs' to be introduced contains the following code:

.example {    color: red;}

Then reference:

#main {    @import "example";}

Compiled CSS:

#main .example {    color: red;}

 

 

 

 

@ Media
In Sass@ MediaThe instructions and CSS usage rules are as simple as they are, but they have another function,Can be nested in CSS rules.Similar to JS's bubble function, if @ media is used in the style, it will bubble out. Let's look at a simple example:

1 .sidebar {2     width: 300px;3     @media screen and (orientation: landscape) {4         width: 500px;5     }6 }

Compiled:

1 .sidebar {2     width: 300px; 3 }4 @media screen and (orientation: landscape) {5     .sidebar {6         width: 500px;7     }8 }

@ Media can also be nested @ media:

1 @media screen {2     .sidebar {3         @media (orientation: landscape) {4             width: 500px;5         }6     }7 }

Compile the Code:

1 @media screen and (orientation: landscape) {2     .sidebar {3         width: 500px; 4     } 5 }

You can also use the plug-in when using @ media.#{}:

1 $media: screen;2 $feature: -webkit-min-device-pixel-ratio;3 $value: 1.5;4 @media #{$media} and ($feature: $value) {5     .sidebar {6         width: 500px;7     }8 }

Compiled CSS:

1 @media screen and (-webkit-min-device-pixel-ratio: 1.5) {2     .sidebar {3         width: 500px;4     }5 }

 

 

 

 

@ Extend
In Sass@ ExtendYesExtended SelectorOrPlaceholder. For example:

 1 .error { 2     border: 1px #f00; 3 } 4 .error.intrusion { 5     background-image: url("/image/hacked.png"); 6 } 7 .seriousError { 8     @extend .error; 9     border-width: 3px;10 }

Compiled:

1 .error, .seriousError {2     border: 1px #f00;3 }4 .error.intrusion, .seriousError.intrusion {5     background-image: url("/image/hacked.png"); 6 }7 .seriousError {8     border-width: 3px; 9 }

Extension selector:

@ Extend not only extends the class selector, but also extends any selector, such. special. cool, a: hover, or. user [href ^ = "http: //"], for example:

1 .hoverlink {2     @extend a:hover;3 }4 a:hover {5     text-decoration: underline;6 }

Compiled:

1 a:hover, .hoverlink {2     text-decoration: underline;3 }

Let's take a look at the complex points:

1 .hoverlink {2     @extend a:hover;3 }4 .comment a.user:hover {5     font-weight: bold;6 }

Compiled CSS:

1 .comment a.user:hover, .comment .user.hoverlink {2     font-weight: bold;3 }

Multiple extensions

To Inherit styles from multiple places, you can use @ extend to inherit styles with multiple selectors or placeholders.

 1 .error { 2     border: 1px #f00; 3     background-color: #fdd; 4 } 5 .attention { 6     font-size: 3em; 7     background-color: #ff0; 8 } 9 .seriousError {10     @extend .error;11     @extend .attention;12     border-width: 3px;13 }

Compiled CSS:

 1 .error, .seriousError { 2     border: 1px #f00; 3     background-color: #fdd; 4 } 5 .attention, .seriousError { 6     font-size: 3em; 7     background-color: #ff0; 8 } 9 .seriousError {10     border-width: 3px;11 }

Extended single Selector

We know that % placeholder does not generate any style code when calling the display without @ extend. The placeholders are the same in the selector. For example, the following code:

1 #context a%extreme {2     color: blue;3     font-weight: bold;4     font-size: 2em;5 }

This Code does not generate any code before it is called. It is generated only after @ extend is called:

1 .notice {2     @extend %extreme;3 }

Compiled CSS:

1 #context a.notice {2     color: blue;3     font-weight: bold;4     font-size: 2em;5 }

 

 

 

@ At-root
@ At-rootLiterally, it means jumping out of the root element. After the selector is nested with multiple layersA selector jumps outIn this caseYou can use @ at-root. Let's look at a simple example:

 1 .a { 2     color: red; 3     .b { 4         color: orange; 5         .c { 6             color: yellow; 7             @at-root .d { 8                 color: green; 9             }10         }11     } 12 }

Compiled CSS

 1 .a { 2     color: red; 3 } 4 .a .b { 5     color: orange; 6 } 7 .a .b .c { 8     color: yellow; 9 }10 .d {11     color: green;12 }

 

 

 

 

@ Debug
@ DebugSass is used for debugging. When you use the @ debug command in the Sass source code, when the Sass code is incorrectly compiled, the prompt Bug you set will be output in the Command handler:

@debug 10em + 12em;

Output:

Line 1 DEBUG: 22em

 

 

 

@ Warn
@ WarnAnd@ DebugSimilar functions are used to help us better debug Sass. For example:

 1 @mixin adjust-location($x, $y) { 2     @if unitless($x) { 3         @warn "Assuming #{$x} to be in pixels"; 4         $x: 1px * $x; 5     } 6     @if unitless($y) { 7         @warn "Assuming #{$y} to be in pixels"; 8         $y: 1px * $y; 9     }10     position: relative; left: $x; top: $y;11 }

1 @ mixin adjust-location ($ x, $ y) {2 @ if unitless ($ x) {// unitless is a built-in function, determines whether the value has a "unit" 3 @ warn "Assuming # {$ x} to be in pixels"; 4 $ x: 1px * $ x; 5} 6 @ if unitless ($ y) {7 @ warn "Assuming # {$ y} to be in pixels"; 8 $ y: 1px * $ y; 9} 10 position: relative; left: $ x; top: $ y; 11} 12. botton {13 @ include adjust-location (20px, 30); 14}

Compiled CSS:

1 .botton {2     position: relative;3     left: 20px;4     top: 30px;5 }

 

 

 

 

@ Error

The @ error and @ warn and @ debug functions are exactly the same.

1 @ mixin error ($ x) {2 @ if $ x <10 {3 width: $ x * 10px; 4} @ else if $ x = 10 {5 width: $ x; 6} @ else {7 @ error "you need to set the number of # {$ x} values to 10"; 8} 9} 10. test {11 @ include error (15); 12}

During Compilation:

You need to set the number of 15 values to less than 10 on line 7 at column 5