sass高级语法
github地址:https://github.com/lily1010/sass/tree/master/course03
用到的sass语法是:
sass --watch test.scss:test.css --style expanded
如下图:
1 导入外部文件,缺省文件后缀默认是sass/scss文件,一般在头部声明
test.scss内容是:
<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>其中lili.scss内容是:
<span style="color: #000000;">.test1 {
color: black;
}</span>其中haha.scss内容是:
<span style="color: #000000;">.test11 {
color: deeppink;
}</span>编译成test.css内容是:
<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 extend函数,不只继承类名选择器的样式,还继承与它相关的样式,包括继承它的父选择器
test.scss内容是:
<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>编译成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函数,继承单元素选择器样式,同时继承与它相关的样式,包括继承它的父选择器
test.scss内容是:
<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>编译成test.css内容是:
<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 extend中链式扩展
test.scss内容是:
<span style="color: #000000;">.test4 {
width:20px;
}
.test41 {
@extend .test4;
height: 20px;
}
.test42 {
@extend .test41;
top:20px;
}</span>编译成test.css内容是:
<span style="color: #000000;">.test4, .test41, .test42 {
width: 20px;
}
.test41, .test42 {
height: 20px;
}
.test42 {
top: 20px;
}</span>
5 占位符%,%不会被编译到css里面
test.scss内容是:
<span style="color: #000000;">.test5 a%name {
width: 100px;
}
.lili {
height: 200%;
@extend %name;
}</span>编译成test.css内容是:
<span style="color: #000000;">.test5 a.lili {
width: 100px;
}
.lili {
height: 200%;
}</span>
6 extend中防止继承不存在的样式出错,用!optional直接跳过空样式
test.scss内容是:
<span style="color: #000000;">.test6 {
@extend noexist!optional;
height: 100px;
}</span>编译成test.css内容是:
<span style="color: #000000;">.test6 {
height: 100px;
}</span>
7 @at-root指令导致一个或多个规则被限定输出在文档的根层级上，而不是被嵌套在其父选择器下
test.scss内容是:
<span style="color: #000000;">.test7 {
height: 20px;
@at-root {
.children1 {
color: red;
}
.children2 {
color: black;
}
}
}</span>编译成test.css内容是:
<span style="color: #000000;">.test7 {
height: 20px;
}
.children1 {
color: red;
}
.children2 {
color: black;
}</span>
8 @at-root(without:类名)将选择器移动到嵌套指令之外
test.scss内容是:
<span style="color: #000000;">.gaga {
@media name {
.page {
width: 8px;
@at-root (without: media) { //注意此处目前测试是不支持类名的,比如.test8
color: red;
}
}
}
}</span>编译成test.css内容是:
<span style="color: #000000;">@media name {
.gaga .page {
width: 8px;
}
}
.gaga .page {
color: red;
}</span>
9 if条件判断,注意不支持if...else...
test.scss内容是:
.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 < 3<span style="color: #000000;"> {
width: 100px;
}
}
.test81 { </span>//<span style="color: #0000ff;">if</span>...<span style="color: #0000ff;">else</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;">else</span> <span style="color: #0000ff;">if</span> 5 > 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 < 3<span style="color: #000000;"> {
width: 100px;
}
@</span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
width: 10px;
}
}</span>编译成test.css内容是:
<span style="color: #000000;">.test8 {
width: 20px;
}
.test81 {
width: 100px;
}
.test82 {
width: 10px;
}</span>
10 for循环语句
test.scss内容是:
//第一种格式 @<span style="color: #0000ff;">for</span> $var <span style="color: #0000ff;">from</span> <start> through <end>,注意范围包括<start>和<end><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> <start> to <end>,注意范围从<start>开始运行，但不包括<end><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>编译成test.css内容是:
<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 each循环语句 @each $var in
test.scss内容是:
$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>编译成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循环语句
test.scss内容是:
$i:3;
@while $i > 0 {
.gray#{$i} {
color: #333*$i;
}
$i:$i - 1; //注意此处不能写成$i:$i-1,因为会被当成字符串
}编译成test.css内容是:
.gray3 {
color: #999999;
}
.gray2 {
color: #666666;
}
.gray1 {
color: #333333;
}
13 混入指令,实现代码块复用
test.scss内容是:
@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);
}编译成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 传递内容块@content到混入,传递到@content位置
test.scss内容是:
<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>编译成test.css内容是:
<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 变量在混入@mixin的作用域,即传递给混入（mixin）的内容块在其被定义的作用域中进行运算，而不是混入（mixin）的作用域。这意味着混入（mixin）的局部变量不能传递给样式块使用
test.scss内容是:
$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>
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1664
14
1423
52
1321
25
1269
29
1249
24
Memahami HTML, CSS, dan JavaScript: Panduan Pemula
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
HTML: Struktur, CSS: Gaya, JavaScript: Tingkah Laku
Apr 18, 2025 am 12:09 AM
Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.
Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan Web
Apr 19, 2025 am 12:02 AM
Trend masa depan HTML adalah semantik dan komponen web, trend masa depan CSS adalah CSS-in-JS dan CSShoudini, dan trend masa depan JavaScript adalah webassembly dan tanpa pelayan. 1. Semantik HTML meningkatkan kebolehcapaian dan kesan SEO, dan komponen web meningkatkan kecekapan pembangunan, tetapi perhatian harus dibayar kepada keserasian penyemak imbas. 2. CSS-in-JS meningkatkan fleksibiliti pengurusan gaya tetapi boleh meningkatkan saiz fail. Csshoudini membolehkan operasi langsung rendering CSS. 3.Webassembly mengoptimumkan prestasi aplikasi penyemak imbas tetapi mempunyai keluk pembelajaran yang curam, dan tanpa pelayan memudahkan pembangunan tetapi memerlukan pengoptimuman masalah permulaan sejuk.
Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk Web
Apr 17, 2025 am 12:12 AM
Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.
HTML vs CSS vs JavaScript: Gambaran Keseluruhan Perbandingan
Apr 16, 2025 am 12:04 AM
Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.
HTML: Membina struktur laman web
Apr 14, 2025 am 12:14 AM
HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.
HTML: Adakah bahasa pengaturcaraan atau yang lain?
Apr 15, 2025 am 12:13 AM
Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworkswithcssforstylingandjavascriptforinteractivity, meningkatkan pembangunan semula.
HTML vs CSS dan JavaScript: Membandingkan Teknologi Web
Apr 23, 2025 am 12:05 AM
HTML, CSS dan JavaScript adalah teknologi teras untuk membina laman web moden: 1. HTML mentakrifkan struktur laman web, 2. CSS bertanggungjawab untuk kemunculan laman web, 3.
