communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > le corps du texte

sass高级语法

WBOY
Libérer： 2016-08-30 09:21:07
original
1663 Les gens l'ont consulté

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>
Copier après la connexion

其中lili.scss内容是:

<span style="color: #000000;">.test1 {
    color: black;
}</span>
Copier après la connexion

其中haha.scss内容是:

<span style="color: #000000;">.test11 {
    color: deeppink;
}</span>
Copier après la connexion

编译成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>
Copier après la connexion

 

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>
Copier après la connexion

编译成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;
}
Copier après la connexion

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>
Copier après la connexion

编译成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>
Copier après la connexion

4 extend中链式扩展

test.scss内容是:

<span style="color: #000000;">.test4 {
    width:20px;
}
.test41 {
    @extend .test4;
    height: 20px;
}
.test42 {
    @extend .test41;
    top:20px;
}</span>
Copier après la connexion

编译成test.css内容是:

<span style="color: #000000;">.test4, .test41, .test42 {
  width: 20px;
}

.test41, .test42 {
  height: 20px;
}

.test42 {
  top: 20px;
}</span>
Copier après la connexion

5 占位符%,%不会被编译到css里面

test.scss内容是:

<span style="color: #000000;">.test5 a%name {
    width: 100px;
}
.lili {
    height: 200%;
    @extend %name;
}</span>
Copier après la connexion

编译成test.css内容是:

<span style="color: #000000;">.test5 a.lili {
  width: 100px;
}

.lili {
  height: 200%;
}</span>
Copier après la connexion

6 extend中防止继承不存在的样式出错,用!optional直接跳过空样式

test.scss内容是:

<span style="color: #000000;">.test6 {
    @extend noexist!optional;
    height: 100px;
}</span>
Copier après la connexion

编译成test.css内容是:

<span style="color: #000000;">.test6 {
  height: 100px;
}</span>
Copier après la connexion

7 @at-root指令导致一个或多个规则被限定输出在文档的根层级上，而不是被嵌套在其父选择器下

test.scss内容是:

<span style="color: #000000;">.test7 {
    height: 20px;
    @at-root {
        .children1 {
            color: red;
        }
        .children2 {
            color: black;
        }
    }
}</span>
Copier après la connexion

编译成test.css内容是:

<span style="color: #000000;">.test7 {
  height: 20px;
}
.children1 {
  color: red;
}

.children2 {
  color: black;
}</span>
Copier après la connexion

8 @at-root(without:类名)将选择器移动到嵌套指令之外

test.scss内容是:

<span style="color: #000000;">.gaga {
    @media name {
      .page {
        width: 8px;
        @at-root (without: media) {  //注意此处目前测试是不支持类名的,比如.test8
          color: red;
        }
      }
    }
}</span>
Copier après la connexion

编译成test.css内容是:

<span style="color: #000000;">@media name {
  .gaga .page {
    width: 8px;
  }
}
.gaga .page {
  color: red;
}</span>
Copier après la connexion

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>
Copier après la connexion

编译成test.css内容是:

<span style="color: #000000;">.test8 {
  width: 20px;
}

.test81 {
  width: 100px;
}

.test82 {
  width: 10px;
}</span>
Copier après la connexion

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>
Copier après la connexion

编译成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>
}
Copier après la connexion

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>
Copier après la connexion

编译成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;
}
Copier après la connexion

　　

12 while循环语句

test.scss内容是:

$i:3;
@while $i > 0 {
    .gray#{$i} {
        color: #333*$i;
    }
    $i:$i - 1; //注意此处不能写成$i:$i-1,因为会被当成字符串
}
Copier après la connexion

编译成test.css内容是:

.gray3 {
  color: #999999;
}

.gray2 {
  color: #666666;
}

.gray1 {
  color: #333333;
}
Copier après la connexion

　　

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);
}
Copier après la connexion

编译成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;
}
Copier après la connexion

　

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>
Copier après la connexion

编译成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>
Copier après la connexion

15 变量在混入@mixin的作用域,即传递给混入（mixin）的内容块在其被定义的作用域中进行运算，而不是混入（mixin）的作用域。这意味着混入（mixin）的局部变量不能传递给样式块使用

test.scss内容是:

$color: white;
@mixin haha($color:black) {
    background-color: $color;
    @content;
}
.test12 {
    @include haha{
        color: $color;
    }
}
Copier après la connexion

编译成test.css内容是:

<span style="color: #000000;">.test12 {
  background</span>-<span style="color: #000000;">color: black;
  color: white;
}</span>
Copier après la connexion

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>
Copier après la connexion

编译成test.css内容是:

<span style="color: #000000;">.test13 {
  font</span>-<span style="color: #000000;">size: 15px;
}</span>
Copier après la connexion
Étiquettes associées：
sass高级语法
source：php.cn
Article précédent：meta标签 Article suivant：css3选择器（上）
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Optimisez la requête pour ajouter du contenu à l'heure actuelle dans OÙ J'ai une requête qui fait ce qui suit : ANDTIME(NOW()+INTERVALli.tzOffsetHOUR-INTERVALli.d...
Depuis 2024-04-04 22:45:06
0
1
296
Plusieurs lettres de départ pour trier les pays Maintenant, dans ma classe de lycée, nous apprenons MySQL et comment sélectionner et trier...
Depuis 2024-03-30 22:35:22
0
2
391
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal