Heim >Web-Frontend >HTML-Tutorial >Erweiterte Sass-Syntax
Erweiterte Sass-Syntax
- WBOYOriginal
- 2016-08-30 09:21:071704Durchsuche
Github-Adresse: https://github.com/lily1010/sass/tree/master/course03
Die verwendete Sass-Syntax ist:
sass --watch test.scss:test.css --style expandiert
Wie unten gezeigt:
1 Externe Dateien importieren, das Standarddateisuffix ist standardmäßig sass/scss-Datei, normalerweise im Header deklariert
Der Inhalt von test.scss ist:
<span style="color: #000000;">@import "lili.scss"; //导入一个文件
@import "lili.scss", "haha.scss"; //导入两个文件
/*但在以下情况下， 仅作为普通的 CSS @import 规则语句，不会导入任何 Sass 文件。
*(1) 如果文件的扩展名是 .css。
*(2) 如果文件名以 http:// 开始。
*(3) 如果文件名是 url()
*(4)如果@import 中包含任何的媒体查询（media queries)
*/
@import "lili.css";
@import "http://foo.com/bar";
@import url(lili);
@import "lili" screen;
/*在import里面插入动态变量,但是仅适用于url方式*/
$name:family;
@import url("http://fonts.googleapis.com/css?family=#{$name}");
/*导入scss文件,却不需要将它编译为css文件做法:
*(1)新建一个文件夹,为了将不需要编译的文件和需要编译的文件分开,这点千万注意
*(2)在已经建好的文件夹里面,将不要编译的*.scss文件命名为_*.scss
*(3)导入的时候不要用下划线,直接@import("新建文件夹名字/*.scss")
*/</span>
Der Inhalt von lili.scss ist:
<span style="color: #000000;">.test1 {
color: black;
}</span>
Der Inhalt von haha.scss ist:
<span style="color: #000000;">.test11 {
color: deeppink;
}</span>
Der in test.css kompilierte Inhalt ist:
<span style="color: #000000;">@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;
}</span>
2 Die Erweiterungsfunktion erbt nicht nur den Stil des Klassennamenselektors, sondern auch die damit verbundenen Stile, einschließlich des Erbens seines übergeordneten Selektors
Der Inhalt von test.scss ist:
<span style="color: #000000;">.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;
} </span>
wird in test.css kompiliert und der Inhalt ist:
.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 Erweiterungsfunktion, erbt den Einzelelement-Selektorstil und die damit verbundenen Stile, einschließlich des Erbens seines übergeordneten Selektors
Der Inhalt von test.scss ist:
<span style="color: #000000;">a:hover {
color: green;
}
a.class1:hover {
height: 10px;
}
html a:hover {
width: 10px;
}
.test3 {
@extend a:hover;
width: 20px;
}</span>
Der in test.css kompilierte Inhalt ist:
<span style="color: #000000;">a:hover, .test3 {
color: green;
}
a.class1:hover, .class1.test3 {
height: 10px;
}
html a:hover, html .test3 {
width: 10px;
}
.test3 {
width: 20px;
}</span>
4 Erweiterung der mittleren Kette verlängern
Der Inhalt von test.scss ist:
<span style="color: #000000;">.test4 {
width:20px;
}
.test41 {
@extend .test4;
height: 20px;
}
.test42 {
@extend .test41;
top:20px;
}</span>
Der in test.css kompilierte Inhalt ist:
<span style="color: #000000;">.test4, .test41, .test42 {
width: 20px;
}
.test41, .test42 {
height: 20px;
}
.test42 {
top: 20px;
}</span>
5 Platzhalter %, % wird nicht in CSS kompiliert
Der Inhalt von test.scss ist:
<span style="color: #000000;">.test5 a%name {
width: 100px;
}
.lili {
height: 200%;
@extend %name;
}</span>
Der in test.css kompilierte Inhalt ist:
<span style="color: #000000;">.test5 a.lili {
width: 100px;
}
.lili {
height: 200%;
}</span>
6 Um Fehler beim Erben nicht vorhandener Stile in Extend zu vermeiden, verwenden Sie !optional, um leere Stile direkt zu überspringen
Der Inhalt von test.scss ist:
<span style="color: #000000;">.test6 {
@extend noexist!optional;
height: 100px;
}</span>
Der in test.css kompilierte Inhalt ist:
<span style="color: #000000;">.test6 {
height: 100px;
}</span>
7 Die @at-root-Direktive bewirkt, dass eine oder mehrere Regeln auf der Stammebene des Dokuments ausgegeben werden, anstatt unter dem übergeordneten Selektor verschachtelt zu werden
Der Inhalt von test.scss ist:
<span style="color: #000000;">.test7 {
height: 20px;
@at-root {
.children1 {
color: red;
}
.children2 {
color: black;
}
}
}</span>
Der in test.css kompilierte Inhalt ist:
<span style="color: #000000;">.test7 {
height: 20px;
}
.children1 {
color: red;
}
.children2 {
color: black;
}</span>
8 @at-root(without:class name) verschiebt den Selektor außerhalb der verschachtelten Direktive
Der Inhalt von test.scss ist:
<span style="color: #000000;">.gaga {
@media name {
.page {
width: 8px;
@at-root (without: media) { //注意此处目前测试是不支持类名的,比如.test8
color: red;
}
}
}
}</span>
Der in test.css kompilierte Inhalt ist:
<span style="color: #000000;">@media name {
.gaga .page {
width: 8px;
}
}
.gaga .page {
color: red;
}</span>
9 Bei einer bedingten Beurteilung beachten Sie bitte, dass wenn...sonst...
Der Inhalt von test.scss ist:
.test8 { //<span style="color: #0000ff;">if</span>...<span style="color: #0000ff;">if</span><span style="color: #000000;">..
@</span><span style="color: #0000ff;">if</span> 1+1 == 2<span style="color: #000000;"> {
width: 20px;
}
@</span><span style="color: #0000ff;">if</span> 5 f6a52e556efeb809eed847befe53875e 3<span style="color: #000000;"> {
width: 100px;
}
}
.test82 { </span>//<span style="color: #0000ff;">if</span>...<span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span>...<span style="color: #0000ff;">else</span><span style="color: #000000;">...
@</span><span style="color: #0000ff;">if</span> 1+1 != 2<span style="color: #000000;"> {
width: 20px;
}
@</span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> 5 c909038dcedf29405f38c68864b8429f through 55ce3cce52a8c4396e1d2f10875a095a,注意范围包括5151abf5f2f2896f3332f558b89cf20a和55ce3cce52a8c4396e1d2f10875a095a<span style="color: #000000;">的值
@</span><span style="color: #0000ff;">for</span> $i <span style="color: #0000ff;">from</span> 1 through 3<span style="color: #000000;"> {
.gray</span><span style="color: #008000;">#</span><span style="color: #008000;">{$i*3} {</span>
color: <span style="color: #008000;">#</span><span style="color: #008000;">333*$i; </span>
<span style="color: #000000;"> }
}
</span>//第二种格式 @<span style="color: #0000ff;">for</span> $var <span style="color: #0000ff;">from</span> 5151abf5f2f2896f3332f558b89cf20a to 55ce3cce52a8c4396e1d2f10875a095a,注意范围从5151abf5f2f2896f3332f558b89cf20a开始运行，但不包括55ce3cce52a8c4396e1d2f10875a095a<span style="color: #000000;">的值
@</span><span style="color: #0000ff;">for</span> $i <span style="color: #0000ff;">from</span> 1 to 4<span style="color: #000000;"> {
.gray2</span><span style="color: #008000;">#</span><span style="color: #008000;">{$i*3} {</span>
color: <span style="color: #008000;">#</span><span style="color: #008000;">333*$i; </span>
<span style="color: #000000;"> }
}</span>
Der in test.css kompilierte Inhalt ist:
<span style="color: #000000;">.gray3 {
color: </span><span style="color: #008000;">#</span><span style="color: #008000;">333333;</span>
<span style="color: #000000;">}
.gray6 {
color: </span><span style="color: #008000;">#</span><span style="color: #008000;">666666;</span>
<span style="color: #000000;">}
.gray9 {
color: </span><span style="color: #008000;">#</span><span style="color: #008000;">999999;</span>
<span style="color: #000000;">}
.gray23 {
color: </span><span style="color: #008000;">#</span><span style="color: #008000;">333333;</span>
<span style="color: #000000;">}
.gray26 {
color: </span><span style="color: #008000;">#</span><span style="color: #008000;">666666;</span>
<span style="color: #000000;">}
.gray29 {
color: </span><span style="color: #008000;">#</span><span style="color: #008000;">999999;</span>
}
11 jede Schleifenanweisung @each $var in 318243e94be5423f7ba05ee6944632b7
Der Inhalt von test.scss ist:
$name:<span style="color: #800000;">"</span><span style="color: #800000;">lili</span><span style="color: #800000;">"</span>,<span style="color: #800000;">"</span><span style="color: #800000;">yaya</span><span style="color: #800000;">"</span>,<span style="color: #800000;">"</span><span style="color: #800000;">sansa</span><span style="color: #800000;">"</span>; //<span style="color: #000000;">注意数组list的写法
@each $i </span><span style="color: #0000ff;">in</span><span style="color: #000000;"> $name {
test9.</span><span style="color: #008000;">#</span><span style="color: #008000;">{$i} {</span>
<span style="color: #000000;"> width: 10px;
}
}
$name2:(name21:</span><span style="color: #800000;">"</span><span style="color: #800000;">lili</span><span style="color: #800000;">"</span>,name22:<span style="color: #800000;">"</span><span style="color: #800000;">yaya</span><span style="color: #800000;">"</span>,name23:<span style="color: #800000;">"</span><span style="color: #800000;">sansa</span><span style="color: #800000;">"</span>); //<span style="color: #000000;">注意对象map的写法
@each $i </span><span style="color: #0000ff;">in</span><span style="color: #000000;"> $name2 {
test9.</span><span style="color: #008000;">#</span><span style="color: #008000;">{$i} {</span>
<span style="color: #000000;"> width: 10px;
}
}
$name3:(name31:</span>1,name32:2,name33:3); //<span style="color: #000000;">注意对象map的写法
@each $key,$value </span><span style="color: #0000ff;">in</span><span style="color: #000000;"> $name3 {
test9.</span><span style="color: #008000;">#</span><span style="color: #008000;">{$key} {</span>
width: 10px*<span style="color: #000000;">$value;
}
}</span>
Der in test.css kompilierte Inhalt ist:
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-Schleifenanweisung
Der Inhalt von test.scss ist:
$i:3;
@while $i > 0 {
.gray#{$i} {
color: #333*$i;
}
$i:$i - 1; //注意此处不能写成$i:$i-1,因为会被当成字符串
}
Der in test.css kompilierte Inhalt ist:
.gray3 {
color: #999999;
}
.gray2 {
color: #666666;
}
.gray1 {
color: #333333;
}
13 Anweisungen einmischen, um die Wiederverwendung von Codeblöcken zu erreichen
Der Inhalt von test.scss ist:
@mixin left01 { //不带参数
float: left;
}
.test10 {
@include left01;
}
@mixin left02($left) { //带1个参数
float: $left;
}
.test101 {
@include left02(left);
}
@mixin left03($left,$width) { //带2个参数,或者说参数为数组
float: $left;
.lili {
width: $width;
}
}
.test102 {
@include left03(left,100px);
}
@mixin left04($name31,$name32,$name33) { //参数为对象,但是接受传递的参数必须是对象相对应key,同时需要用...传递参数
.lili {
width: $name31;
height: $name32;
top: $name33;
}
}
$map:(name31:"1px",name32:"2px",name33:"3px");
.test103 {
@include left04($map...);
}
@mixin left05($left:right) { //带默认参数,不传参的话就用默认参数
float: $left;
}
.test104 {
@include left05;
}
@mixin box-shadow($shadows...) { //不定参数,用...
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
Der in test.css kompilierte Inhalt ist:
.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 Übergeben Sie den Inhaltsblock @content an das Mixin und übergeben Sie ihn an die @content-Position
Der Inhalt von test.scss ist:
<span style="color: #000000;">@mixin lala {
html {
color: </span><span style="color: #008000;">#</span><span style="color: #008000;">888;</span>
<span style="color: #000000;"> @content;
}
}
@include lala { </span>//<span style="color: #000000;">此处名字必须和上面保持一致
.logo {
font</span>-<span style="color: #000000;">size: 15px;
}
}</span>
Der in test.css kompilierte Inhalt ist:
<span style="color: #000000;">html {
color: </span><span style="color: #008000;">#</span><span style="color: #008000;">888;</span>
<span style="color: #000000;">}
html .logo {
font</span>-<span style="color: #000000;">size: 15px;
}</span>
15 Variablen werden im Bereich von @mixin gemischt, d. h. der an den Mixin übergebene Inhaltsblock wird in dem Bereich betrieben, in dem er definiert ist, nicht im Bereich des Mixins. Dies bedeutet, dass lokale Mixin-Variablen nicht mit
an Stilblöcke übergeben werden könnenDer Inhalt von test.scss ist:
$color: white;
@mixin haha($color:black) {
background-color: $color;
@content;
}
.test12 {
@include haha{
color: $color;
}
}
编译成test.css内容是:
<span style="color: #000000;">.test12 {
background</span>-<span style="color: #000000;">color: black;
color: white;
}</span>
16 函数,用法类似@mixin
test.scss内容是:
<span style="color: #000000;">@function sasa($name) {
@</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> $name;
}
.test13 {
font</span>-<span style="color: #000000;">size: sasa(15px);
}</span>
编译成test.css内容是:
<span style="color: #000000;">.test13 {
font</span>-<span style="color: #000000;">size: 15px;
}</span>