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

sass高级语法的更多相关文章

  1. sass高级语法的补充

    1. 继承 2.混入 3.函数 我这篇博客需要点基础才能看懂, 但我这篇博客是对上一篇的 sass高级语法 的补充 从这方面来看也无所谓了

  2. sass笔记-2|Sass基础语法之让样式表更具条理性和可读性

    这一篇主要详述保持sass条理性和可读性的3个最基本方法--嵌套.导入和注释. 零. 变量 变量本身的作用是为了保持属性值的可维护性,把所有需要维护的属性值放在同一个地方,快速更改,处处生效,可谓售后 ...

  3. sass 基本语法

    sass语法 文件后缀名 sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号. 而本教程 ...

  4. 009 webpack将ES高级语法进行装换

    一:ES高级转换 1.main.js中的js不能解析 // js的主要入口 import $ from 'jquery' import './css/index.css' import './css/ ...

  5. tn文本分析语言(三):高级语法

    标签(空格分隔): 未分类 高级操作 1.脚本表达式 用双引号包含的脚本被称为脚本表达式,目前支持嵌入Python. 脚本表达式只能在顺序表达式中使用.代码可以在三个位置存在: |位置|功能|例子| ...

  6. Swift高级语法学习总结(转)

    Swift高级语法学习总结 1.函数 1.1 func funcNmae()->(){} 这样就定义了一个函数,它的参数为空,返回值为空,如果有参数和返回值直接写在两个括号里就可以了 1.2 参 ...

  7. CSS 高级语法 ---- 继承和选择器的分组

    1. 选择器的分组 —————————————————————————   可以对选择器进行分组,被分组的选择器享用共同的声明.   h1,h2,h3,h4,h5,h6 { color: green; ...

  8. Swift高级语法学习总结

    Swift基础语法学习总结Swift高级语法学习总结Swift语法总结补充(一) 1.函数 1.1 func funcNmae()->(){} 这样就定义了一个函数,它的参数为空,返回值为空,如 ...

  9. C++ 高级语法学习与总结(代码实例)

     C++11增加了许多的特性,auto就是一个很明显的例子.  还有就是typedid()获取数据变量的类型 看下面简短的代码: atuo: 很像java中的加强for循环..... //获取一个数据 ...

随机推荐

  1. 整理的一些PHP面试题目

    1.strlen()和mb_strlen()的作用分别是什么? strlen()和mb_strlen()的作用都是来获取字符串的长度,其中strlen()只针对单字节编码字符,也就是计算字符串的总字节 ...

  2. Sparse Filtering 学习笔记(一)网络结构与特征矩阵

      Sparse Filtering 是一个用于提取特征的无监督学习算法,与通常特征学习算法试图建模训练数据的分布的做法不同,Sparse Filtering 直接对训练数据的特征分布进行分析,在所谓 ...

  3. QT学习笔记3

    对话框 新建了一个对话框,在新建项目选择类型时是Dialog即可. 添加的代码如下,注意QCheckBox 并没有添加头文件定义,只是加了类的前向声明.因为我们仅仅使用的是指针,并不涉及到这些类的函数 ...

  4. 关于SQL递归查询在不同数据库中的实现方法

    比如表结构数据如下: Table:Tree ID Name ParentId 1 一级  0 2  二级 1 3  三级 2 4 四级 3 SQL SERVER 2005查询方法: //上查 with ...

  5. 【原创】Kakfa cluster包源代码分析

    kafka.cluster包定义了Kafka的基本逻辑概念:broker.cluster.partition和replica——这些是最基本的概念.只有弄懂了这些概念,你才真正地使用kakfa来帮助完 ...

  6. 十年微软(Microsoft)MVP

    十年微软(Microsoft)MVP,七月一日收到邮件,今早收到从美国微软寄过来的证书!

  7. The conversion of a varchar data type to a datetime data type resulted in an out-of-range value

    刚刚有在程序中,传递一个空值至MS SQL Server数据库,这个值的数据类型为DATETIME执行时,它却发生了如标题提示的异常:The conversion of a varchar data ...

  8. .Net(C#)最简单的邮件发送案例

    一.序言 刚开始接触邮件发送功能的时候,在网上找的资料都挺复杂的!对于新手入门有点难(至少对于本人来说,第一次接触的时候确实不容易).这里就写一段简单的邮箱发送代码,备忘,也给新手一个参考(相关类的字 ...

  9. .net微信公众号开发——消息与事件

    作者:王先荣    本文介绍如何处理微信公众号开发中的消息与事件,包括:(1)消息(事件)概况:(2)验证消息的真实性:(3)解析消息:(4)被动回复消息:(5)发送其他消息.    开源项目地址:h ...

  10. thinkphp端口配置

    <?php return array( //'配置项'=>'配置值' 'MODULE_ALLOW_LIST' => array('Home'), 'DEFAULT_MODULE' = ...