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>
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
