首页 > > 网页制作 > css >

sass高级语法

2018-06-24 00:15:55来源：未知阅读 ()

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：HTML <select> 标签创建单选或多选菜单

下一篇：HTML <hr /> 标签在页面中创建一条水平线

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签