你的位置:首页 > 网页设计

[网页设计]sass高级语法


github地址:https://github.com/lily1010/sass/tree/master/course03

用到的sass语法是:

sass --watch test.scss:test.css --style expanded

如下图:

1 导入外部文件,缺省文件后缀默认是sass/scss文件,一般在头部声明

test.scss内容是:

@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") */

其中lili.scss内容是:

.test1 {  color: black;}

其中haha.scss内容是:

.test11 {  color: deeppink;}

编译成test.css内容是:

@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;}

 

2 extend函数,不只继承类名选择器的样式,还继承与它相关的样式,包括继承它的父选择器

test.scss内容是:

.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;} 

编译成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内容是:

a:hover {  color: green;}a.class1:hover {  height: 10px;}html a:hover {  width: 10px;}.test3 {  @extend a:hover;  width: 20px;}

编译成test.css内容是:

a:hover, .test3 { color: green;}a.class1:hover, .class1.test3 { height: 10px;}html a:hover, html .test3 { width: 10px;}.test3 { width: 20px;}

 

4 extend中链式扩展

test.scss内容是:

.test4 {  width:20px;}.test41 {  @extend .test4;  height: 20px;}.test42 {  @extend .test41;  top:20px;}

编译成test.css内容是:

.test4, .test41, .test42 { width: 20px;}.test41, .test42 { height: 20px;}.test42 { top: 20px;}

 

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

test.scss内容是:

.test5 a%name {  width: 100px;}.lili {  height: 200%;  @extend %name;}

编译成test.css内容是:

.test5 a.lili { width: 100px;}.lili { height: 200%;}

 

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

test.scss内容是:

.test6 {  @extend noexist!optional;  height: 100px;}

编译成test.css内容是:

.test6 { height: 100px;}

 

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

test.scss内容是:

.test7 {  height: 20px;  @at-root {    .children1 {      color: red;    }    .children2 {      color: black;    }  }}

编译成test.css内容是:

.test7 { height: 20px;}.children1 { color: red;}.children2 { color: black;}

 

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

test.scss内容是:

.gaga {  @media name {   .page {    width: 8px;    @at-root (without: media) { //注意此处目前测试是不支持类名的,比如.test8     color: red;    }   }  }}

编译成test.css内容是:

@media name { .gaga .page {  width: 8px; }}.gaga .page { color: red;}

 

9 if条件判断,注意不支持if...else...

test.scss内容是:

.test8 {  //if...if..  @if 1+1 == 2 {    width: 20px;  }  @if 5 < 3 {    width: 100px;  }}.test81 { //if...else if...  @if 1+1 != 2 {    width: 20px;  }  @else if 5 > 3 {    width: 100px;  }}.test82 { //if...else if...else...  @if 1+1 != 2 {    width: 20px;  }  @else if 5 < 3 {     width: 100px;  }  @else {    width: 10px;  }}

编译成test.css内容是:

.test8 { width: 20px;}.test81 { width: 100px;}.test82 { width: 10px;}

 

10 for循环语句

test.scss内容是:

//第一种格式 @for $var from <start> through <end>,注意范围包括<start>和<end>的值@for $i from 1 through 3 {  .gray#{$i*3} {    color: #333*$i;   }}//第二种格式 @for $var from <start> to <end>,注意范围从<start>开始运行,但不包括<end>的值@for $i from 1 to 4 {  .gray2#{$i*3} {    color: #333*$i;   }}

编译成test.css内容是:

.gray3 { color: #333333;}.gray6 { color: #666666;}.gray9 { color: #999999;}.gray23 { color: #333333;}.gray26 { color: #666666;}.gray29 { color: #999999;}

 

11 each循环语句  @each $var in <list or map>

test.scss内容是:

$name:"lili","yaya","sansa"; //注意数组list的写法@each $i in $name {  test9.#{$i} {    width: 10px;  }}$name2:(name21:"lili",name22:"yaya",name23:"sansa"); //注意对象map的写法@each $i in $name2 {  test9.#{$i} {    width: 10px;  }}$name3:(name31:1,name32:2,name33:3); //注意对象map的写法@each $key,$value in $name3 {  test9.#{$key} {    width: 10px*$value;  }}

编译成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内容是:

@mixin lala {  html {    color: #888;    @content;  }}@include lala { //此处名字必须和上面保持一致  .logo {    font-size: 15px;  }}

编译成test.css内容是:

html { color: #888;}html .logo { font-size: 15px;}

 

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

test.scss内容是:

$color: white;@mixin haha($color:black) {  background-color: $color;  @content;}.test12 {  @include haha{    color: $color;  }}

编译成test.css内容是:

.test12 { background-color: black; color: white;}

 

16 函数,用法类似@mixin

test.scss内容是:

@function sasa($name) {  @return $name;}.test13 {  font-size: sasa(15px);}

编译成test.css内容是:

.test13 { font-size: 15px;}