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
AI Hentai Generator
Menjana ai hentai secara percuma.
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
1385
52
Apakah tujuan & lt; kemajuan & gt; unsur?
Mar 21, 2025 pm 12:34 PM
Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati
Apakah tujuan & lt; DATALIST & GT; unsur?
Mar 21, 2025 pm 12:33 PM
Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159
Apakah tujuan & lt; meter & gt; unsur?
Mar 21, 2025 pm 12:35 PM
Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex
Adakah HTML mudah belajar untuk pemula?
Apr 07, 2025 am 12:11 AM
HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.
Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?
Mar 20, 2025 pm 05:56 PM
Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.
Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?
Mar 20, 2025 pm 06:05 PM
Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Apakah contoh tag permulaan dalam html?
Apr 06, 2025 am 12:04 AM
Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.
