Sass advanced syntax and sass syntax

Sass advanced syntax and sass syntax

Github address: https://github.com/lily1010/sass/tree/master/course03

The sass syntax used is:

Sass -- watch test. scss: test.css -- style expanded

For example:

1. Import external files. The default file suffix is sass/scss files by default. It is generally declared in the header.

The content of test. scss is:

@ Import "lili. scss "; // import a file @ import" lili. scss "," haha. scss "; // import two files/* but in the following cases, it is only used as a common CSS @ import rule statement and will not import any Sass files. * (1) if the file extension is. css. * (2) if the file name starts with http. * (3) if the file name is url () * (4) if @ import contains any media queries */@ import "lili.css "; @ import "http://foo.com/bar"; @ import url (lili); @ import "lili" screen;/* Insert dynamic variables in import, but only for url mode */$ name: family; @ import url ("http://fonts.googleapis.com/css? Family = # {$ name} ");/* import the scss file without compiling it into a css file. * (1) create a folder, in order to separate the files that do not need to be compiled from the files that need to be compiled, note that * (2) in the created folder, do not compile *. the scss file is named _*. scss * (3) do not use underscores when importing. Directly @ import ("Create a folder name /*. scss ")*/

The content of lili. scss is:

.test1 {    color: black;}

The content of haha. scss is:

.test11 {    color: deeppink;}

Compiled into test.css:

@import url(lili.css);@import "http://foo.com/bar";@import url(lili);@import "lili" screen;@import url("http://fonts.googleapis.com/css?family=family");.test1 {  color: black;}.test1 {  color: black;}.test11 {  color: deeppink;}

 

2 extend functions not only inherit the style of the class name selector, but also inherit the style related to it, including the parent selector that inherits it

The content of test. scss is:

.test2 {  border: 1px #f00;  background-color: #fdd;}.test2.test21 {  background-image: url("/image/hacked.png");}.test2 .test22 {  background-image: url("/image/haha.png");}html .test2 {  width: 100px;}.lili {  @extend .test2;  border-width: 3px;} 

Compiled into test.css:

.test2, .lili {  border: 1px #f00;  background-color: #fdd;}.test2.test21, .test21.lili {  background-image: url("/image/hacked.png");}.test2 .test22, .lili .test22 {  background-image: url("/image/haha.png");}html .test2, html .lili {  width: 100px;}.lili {  border-width: 3px;}

 

3 extend function: inherits the single-element selector style and its related style, including its parent Selector

The content of test. scss is:

a:hover {    color: green;}a.class1:hover {    height: 10px;}html a:hover {    width: 10px;}.test3 {    @extend a:hover;    width: 20px;}

Compiled into test.css:

a:hover, .test3 {  color: green;}a.class1:hover, .class1.test3 {  height: 10px;}html a:hover, html .test3 {  width: 10px;}.test3 {  width: 20px;}

 

4 chain extension in extend

The content of test. scss is:

.test4 {    width:20px;}.test41 {    @extend .test4;    height: 20px;}.test42 {    @extend .test41;    top:20px;}

Compiled into test.css:

.test4, .test41, .test42 {  width: 20px;}.test41, .test42 {  height: 20px;}.test42 {  top: 20px;}

 

5 placeholder %, % will not be compiled into css

The content of test. scss is:

.test5 a%name {    width: 100px;}.lili {    height: 200%;    @extend %name;}

Compiled into test.css:

.test5 a.lili {  width: 100px;}.lili {  height: 200%;}

 

6. Use extend to prevent invalid style inheritance! Optional directly skips the empty Style

The content of test. scss is:

.test6 {    @extend noexist!optional;    height: 100px;}

Compiled into test.css:

.test6 {  height: 100px;}

 

7 @ at-root causes one or more rules to be restricted and output at the root level of the document, rather than nested under the parent selector.

The content of test. scss is:

.test7 {    height: 20px;    @at-root {        .children1 {            color: red;        }        .children2 {            color: black;        }    }}

Compiled into test.css:

.test7 {  height: 20px;}.children1 {  color: red;}.children2 {  color: black;}

 

8 @ at-root (without: Class Name) Move the selector out of the nested command

The content of test. scss is:

. Gaga {@ media name {. page {width: 8px; @ at-root (without: media) {// note that class names are not supported in the test, for example. test8 color: red ;}}}}

Compiled into test.css:

@media name {  .gaga .page {    width: 8px;  }}.gaga .page {  color: red;}

 

9 if condition judgment, note that if... else... is not supported...

The content of test. scss is:

.test8 {   //if...if..    @if 1+1 == 2 {        width: 20px;    }    @if 5 < 3 {        width: 100px;    }}.test81 {  //if...else if...    @if 1+1 != 2 {        width: 20px;    }    @else if 5 > 3 {        width: 100px;    }}.test82 {  //if...else if...else...    @if 1+1 != 2 {        width: 20px;    }    @else if 5 < 3 {         width: 100px;    }    @else {        width: 10px;    }}

Compiled into test.css:

.test8 {  width: 20px;}.test81 {  width: 100px;}.test82 {  width: 10px;}

 

10 for Loop statements

The content of test. scss is:

// The first format: @ for $ var from <start> through <end>. Note that the values include <start> and <end> @ for $ I from 1 through 3 {. gray # {$ I * 3} {color: #333 * $ I ;}// the second format @ for $ var from <start> to <end>, note that the range starts from <start>, but does not include the <end> value @ for $ I from 1 to 4 {. gray2 # {$ I * 3} {color: #333 * $ I ;}}

Compiled into test.css:

.gray3 {  color: #333333;}.gray6 {  color: #666666;}.gray9 {  color: #999999;}.gray23 {  color: #333333;}.gray26 {  color: #666666;}.gray29 {  color: #999999;}

 

11 each loop statement @ each $ var in <list or map>

The content of test. scss is:

$ Name: "lili", "yaya", "sansa"; // note the syntax of array list @ each $ I in $ name {test9. # {$ I} {width: 10px ;}$ name2 :( name21: "lili", name22: "yaya", name23: "sansa "); // note the format of the object map @ each $ I in $ name2 {test9. # {$ I} {width: 10px ;}}$ name3 :( name31: 1, name32: 2, name33: 3); // note the format of the object map @ each $ key, $ value in $ name3 {test9. # {$ key} {width: 10px * $ value ;}}

Compiled into test.css:

test9.lili {  width: 10px;}test9.yaya {  width: 10px;}test9.sansa {  width: 10px;}test9.name21 lili {  width: 10px;}test9.name22 yaya {  width: 10px;}test9.name23 sansa {  width: 10px;}test9.name31 {  width: 10px;}test9.name32 {  width: 20px;}test9.name33 {  width: 30px;}

　　

12 while LOOP statement

The content of test. scss is:

$ I: 3; @ while $ I> 0 {. gray # {$ I} {color: #333 * $ I;} $ I: $ I-1; // note that $ I: $ I-1 cannot be written here, because it will be treated as a string}

Compiled into test.css:

.gray3 {  color: #999999;}.gray2 {  color: #666666;}.gray1 {  color: #333333;}

　　

13. execute commands to reuse code blocks

The content of test. scss is:

@ Mixin left01 {// No float: left ;}. test10 {@ include left01;} @ mixin left02 ($ left) {// float: $ left ;}. test101 {@ include left02 (left) ;}@ mixin left03 ($ left, $ width) {// contains two parameters, or the parameter is an array float: $ left ;. lili {width: $ width ;}}. test102 {@ include left03 (left, 100px) ;}@ mixin left04 ($ name31, $ name32, $ name33) {// The parameter is an object, however, the parameter to be passed must be the relative key of the object and must be used... pass parameters. lili {width: $ name31; height: $ name32; top: $ name33 ;}}$ map :( name31: "1px", name32: "2px", name33: "3px ");. test103 {@ include left04 ($ map ...);} @ mixin left05 ($ left: right) {// includes the default parameter. If no parameter is input, use the default parameter float: $ left ;}. test104 {@ include left05;} @ mixin box-shadow ($ shadows ...) {// indefinite parameter,... -moz-box-shadow: $ shadows;-webkit-box-shadow: $ shadows ;}. shadows {@ include box-shadow (0px 4px 5px #666, 2px 6px 10px #999 );}

Compiled into test.css:

.test10 {  float: left;}.test101 {  float: left;}.test102 {  float: left;}.test102 .lili {  width: 100px;}.test103 .lili {  width: "1px";  height: "2px";  top: "3px";}.test104 {  float: right;}.shadows {  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;}

　

14 pass the content block @ content to the mix, and pass it to the @ content location

The content of test. scss is:

@ Mixin lala {html {color: #888; @ content ;}@include lala {// the name must be consistent with the above. logo {font-size: 15px ;}}

Compiled into test.css:

html {  color: #888;}html .logo {  font-size: 15px;}

 

15. The variable is in the scope of @ mixin, that is, the content block passed to the mixed (mixin) is computed in the defined scope, rather than the scope of mixed (mixin. This means that the local variables mixed in (mixin) cannot be passed to the style block for use.

The content of test. scss is:

$color: white;@mixin haha($color:black) {    background-color: $color;    @content;}.test12 {    @include haha{        color: $color;    }}

Compiled into test.css:

.test12 {  background-color: black;  color: white;}

 

16 functions, similar to @ mixin

The content of test. scss is:

@function sasa($name) {    @return $name;}.test13 {    font-size: sasa(15px);}

Compiled into test.css:

.test13 {  font-size: 15px;}