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

用到的sass语法是:

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

如下图:

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

test.scss内容是:

  1. @import "lili.scss"; //导入一个文件
  2. @import "lili.scss", "haha.scss"; //导入两个文件
  3. /*但在以下情况下, 仅作为普通的 CSS @import 规则语句,不会导入任何 Sass 文件。
  4. *(1) 如果文件的扩展名是 .css。
  5. *(2) 如果文件名以 http:// 开始。
  6. *(3) 如果文件名是 url()
  7. *(4)如果@import 中包含任何的媒体查询(media queries)
  8. */
  9. @import "lili.css";
  10. @import "http://foo.com/bar";
  11. @import url(lili);
  12. @import "lili" screen;
  13.  
  14. /*在import里面插入动态变量,但是仅适用于url方式*/
  15. $name:family;
  16. @import url("http://fonts.googleapis.com/css?family=#{$name}");
  17.  
  18. /*导入scss文件,却不需要将它编译为css文件做法:
  19. *(1)新建一个文件夹,为了将不需要编译的文件和需要编译的文件分开,这点千万注意
  20. *(2)在已经建好的文件夹里面,将不要编译的*.scss文件命名为_*.scss
  21. *(3)导入的时候不要用下划线,直接@import("新建文件夹名字/*.scss")
  22. */

其中lili.scss内容是:

  1. .test1 {
  2. color: black;
  3. }

其中haha.scss内容是:

  1. .test11 {
  2. color: deeppink;
  3. }

编译成test.css内容是:

  1. @import url(lili.css);
  2. @import "http://foo.com/bar";
  3. @import url(lili);
  4. @import "lili" screen;
  5. @import url("http://fonts.googleapis.com/css?family=family");
  6. .test1 {
  7. color: black;
  8. }
  9.  
  10. .test1 {
  11. color: black;
  12. }
  13.  
  14. .test11 {
  15. color: deeppink;
  16. }

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

test.scss内容是:

  1. .test2 {
  2. border: 1px #f00;
  3. background-color: #fdd;
  4. }
  5. .test2.test21 {
  6. background-image: url("/image/hacked.png");
  7. }
  8. .test2 .test22 {
  9. background-image: url("/image/haha.png");
  10. }
  11. html .test2 {
  12. width: 100px;
  13. }
  14. .lili {
  15. @extend .test2;
  16. border-width: 3px;
  17. }

编译成test.css内容是:

  1. .test2, .lili {
  2. border: 1px #f00;
  3. background-color: #fdd;
  4. }
  5.  
  6. .test2.test21, .test21.lili {
  7. background-image: url("/image/hacked.png");
  8. }
  9.  
  10. .test2 .test22, .lili .test22 {
  11. background-image: url("/image/haha.png");
  12. }
  13.  
  14. html .test2, html .lili {
  15. width: 100px;
  16. }
  17.  
  18. .lili {
  19. border-width: 3px;
  20. }

3 extend函数,继承单元素选择器样式,同时继承与它相关的样式,包括继承它的父选择器

test.scss内容是:

  1. a:hover {
  2. color: green;
  3. }
  4. a.class1:hover {
  5. height: 10px;
  6. }
  7. html a:hover {
  8. width: 10px;
  9. }
  10. .test3 {
  11. @extend a:hover;
  12. width: 20px;
  13. }

编译成test.css内容是:

  1. a:hover, .test3 {
  2. color: green;
  3. }
  4.  
  5. a.class1:hover, .class1.test3 {
  6. height: 10px;
  7. }
  8.  
  9. html a:hover, html .test3 {
  10. width: 10px;
  11. }
  12.  
  13. .test3 {
  14. width: 20px;
  15. }

4 extend中链式扩展

test.scss内容是:

  1. .test4 {
  2. width:20px;
  3. }
  4. .test41 {
  5. @extend .test4;
  6. height: 20px;
  7. }
  8. .test42 {
  9. @extend .test41;
  10. top:20px;
  11. }

编译成test.css内容是:

  1. .test4, .test41, .test42 {
  2. width: 20px;
  3. }
  4.  
  5. .test41, .test42 {
  6. height: 20px;
  7. }
  8.  
  9. .test42 {
  10. top: 20px;
  11. }

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

test.scss内容是:

  1. .test5 a%name {
  2. width: 100px;
  3. }
  4. .lili {
  5. height: 200%;
  6. @extend %name;
  7. }

编译成test.css内容是:

  1. .test5 a.lili {
  2. width: 100px;
  3. }
  4.  
  5. .lili {
  6. height: 200%;
  7. }

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

test.scss内容是:

  1. .test6 {
  2. @extend noexist!optional;
  3. height: 100px;
  4. }

编译成test.css内容是:

  1. .test6 {
  2. height: 100px;
  3. }

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

test.scss内容是:

  1. .test7 {
  2. height: 20px;
  3. @at-root {
  4. .children1 {
  5. color: red;
  6. }
  7. .children2 {
  8. color: black;
  9. }
  10. }
  11. }

编译成test.css内容是:

  1. .test7 {
  2. height: 20px;
  3. }
  4. .children1 {
  5. color: red;
  6. }
  7.  
  8. .children2 {
  9. color: black;
  10. }

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

test.scss内容是:

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

编译成test.css内容是:

  1. @media name {
  2. .gaga .page {
  3. width: 8px;
  4. }
  5. }
  6. .gaga .page {
  7. color: red;
  8. }

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

test.scss内容是:

  1. .test8 { //if...if..
  2. @if 1+1 == 2 {
  3. width: 20px;
  4. }
  5. @if 5 < 3 {
  6. width: 100px;
  7. }
  8. }
  9. .test81 { //if...else if...
  10. @if 1+1 != 2 {
  11. width: 20px;
  12. }
  13. @else if 5 > 3 {
  14. width: 100px;
  15. }
  16. }
  17. .test82 { //if...else if...else...
  18. @if 1+1 != 2 {
  19. width: 20px;
  20. }
  21. @else if 5 < 3 {
  22. width: 100px;
  23. }
  24. @else {
  25. width: 10px;
  26. }
  27. }

编译成test.css内容是:

  1. .test8 {
  2. width: 20px;
  3. }
  4.  
  5. .test81 {
  6. width: 100px;
  7. }
  8.  
  9. .test82 {
  10. width: 10px;
  11. }

10 for循环语句

test.scss内容是:

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

编译成test.css内容是:

  1. .gray3 {
  2. color: #333333;
  3. }
  4.  
  5. .gray6 {
  6. color: #666666;
  7. }
  8.  
  9. .gray9 {
  10. color: #999999;
  11. }
  12.  
  13. .gray23 {
  14. color: #333333;
  15. }
  16.  
  17. .gray26 {
  18. color: #666666;
  19. }
  20.  
  21. .gray29 {
  22. color: #999999;
  23. }

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

test.scss内容是:

  1. $name:"lili","yaya","sansa"; //注意数组list的写法
  2. @each $i in $name {
  3. test9.#{$i} {
  4. width: 10px;
  5. }
  6. }
  7.  
  8. $name2:(name21:"lili",name22:"yaya",name23:"sansa"); //注意对象map的写法
  9. @each $i in $name2 {
  10. test9.#{$i} {
  11. width: 10px;
  12. }
  13. }
  14.  
  15. $name3:(name31:1,name32:2,name33:3); //注意对象map的写法
  16. @each $key,$value in $name3 {
  17. test9.#{$key} {
  18. width: 10px*$value;
  19. }
  20. }

编译成test.css内容是:

  1. test9.lili {
  2. width: 10px;
  3. }
  4.  
  5. test9.yaya {
  6. width: 10px;
  7. }
  8.  
  9. test9.sansa {
  10. width: 10px;
  11. }
  12.  
  13. test9.name21 lili {
  14. width: 10px;
  15. }
  16.  
  17. test9.name22 yaya {
  18. width: 10px;
  19. }
  20.  
  21. test9.name23 sansa {
  22. width: 10px;
  23. }
  24.  
  25. test9.name31 {
  26. width: 10px;
  27. }
  28.  
  29. test9.name32 {
  30. width: 20px;
  31. }
  32.  
  33. test9.name33 {
  34. width: 30px;
  35. }

  

12 while循环语句

test.scss内容是:

  1. $i:3;
  2. @while $i > 0 {
  3. .gray#{$i} {
  4. color: #333*$i;
  5. }
  6. $i:$i - 1; //注意此处不能写成$i:$i-1,因为会被当成字符串
  7. }

编译成test.css内容是:

  1. .gray3 {
  2. color: #999999;
  3. }
  4.  
  5. .gray2 {
  6. color: #666666;
  7. }
  8.  
  9. .gray1 {
  10. color: #333333;
  11. }

  

13 混入指令,实现代码块复用

test.scss内容是:

  1. @mixin left01 { //不带参数
  2. float: left;
  3. }
  4. .test10 {
  5. @include left01;
  6. }
  7.  
  8. @mixin left02($left) { //带1个参数
  9. float: $left;
  10. }
  11. .test101 {
  12. @include left02(left);
  13. }
  14.  
  15. @mixin left03($left,$width) { //带2个参数,或者说参数为数组
  16. float: $left;
  17. .lili {
  18. width: $width;
  19. }
  20. }
  21. .test102 {
  22. @include left03(left,100px);
  23. }
  24.  
  25. @mixin left04($name31,$name32,$name33) { //参数为对象,但是接受传递的参数必须是对象相对应key,同时需要用...传递参数
  26. .lili {
  27. width: $name31;
  28. height: $name32;
  29. top: $name33;
  30. }
  31. }
  32. $map:(name31:"1px",name32:"2px",name33:"3px");
  33. .test103 {
  34. @include left04($map...);
  35. }
  36.  
  37. @mixin left05($left:right) { //带默认参数,不传参的话就用默认参数
  38. float: $left;
  39. }
  40. .test104 {
  41. @include left05;
  42. }
  43.  
  44. @mixin box-shadow($shadows...) { //不定参数,用...
  45. -moz-box-shadow: $shadows;
  46. -webkit-box-shadow: $shadows;
  47. box-shadow: $shadows;
  48. }
  49. .shadows {
  50. @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
  51. }

编译成test.css内容是:

  1. .test10 {
  2. float: left;
  3. }
  4.  
  5. .test101 {
  6. float: left;
  7. }
  8.  
  9. .test102 {
  10. float: left;
  11. }
  12. .test102 .lili {
  13. width: 100px;
  14. }
  15.  
  16. .test103 .lili {
  17. width: "1px";
  18. height: "2px";
  19. top: "3px";
  20. }
  21.  
  22. .test104 {
  23. float: right;
  24. }
  25.  
  26. .shadows {
  27. -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  28. -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  29. box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  30. }

 

14 传递内容块@content到混入,传递到@content位置

test.scss内容是:

  1. @mixin lala {
  2. html {
  3. color: #888;
  4. @content;
  5. }
  6. }
  7. @include lala { //此处名字必须和上面保持一致
  8. .logo {
  9. font-size: 15px;
  10. }
  11. }

编译成test.css内容是:

  1. html {
  2. color: #888;
  3. }
  4. html .logo {
  5. font-size: 15px;
  6. }

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

test.scss内容是:

  1. $color: white;
  2. @mixin haha($color:black) {
  3. background-color: $color;
  4. @content;
  5. }
  6. .test12 {
  7. @include haha{
  8. color: $color;
  9. }
  10. }

编译成test.css内容是:

  1. .test12 {
  2. background-color: black;
  3. color: white;
  4. }

16 函数,用法类似@mixin

test.scss内容是:

  1. @function sasa($name) {
  2. @return $name;
  3. }
  4. .test13 {
  5. font-size: sasa(15px);
  6. }

编译成test.css内容是:

  1. .test13 {
  2. font-size: 15px;
  3. }

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. web前端学习笔记(CSS盒子的定位)

    相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它.      使用relat ...

  2. pe创建激活administrator后消除问题,删除用户问题

    启动pe进入电脑,打开清楚密码,然后选择administrator,点击激活.然后就可以用administrator登陆电脑. 使用完毕后,想要注销administrator. 方法1. 在cmd中输 ...

  3. java中String的相等比较

    首先贴出测试用例: package test; import org.junit.Test; /** * Created by Administrator on 2015/9/16. * */ pub ...

  4. installshield生成时提示6003错误的一种可能

    因为项目需要,2014年写过的一个老项目需要重新打包.开发电脑换了,原来开发的系统是win7,现在已经升到了win10.而且原来使用installshield limited 2013开发的打包项目已 ...

  5. 深入分析MVC中通过IOC实现Controller依赖注入的原理

    这几天利用空闲时间,我将ASP.NET反编译后的源代码并结合园子里几位大侠的写的文章认真的看了一遍,收获颇丰,同时也摘要了一些学习内容,存入了该篇文章:<ASP.NET运行机制图解>,在对 ...

  6. 微信开发系列----02:实现POST请求响应

    继续昨天的,现在我们的微信测试成功了,可以开发实现微信的各种功能,今天主要实现微信的简单交互,比如发送语音,图片,文本等请求,网站服务器发送对应的响应. 项目GitHub地址:  https://gi ...

  7. MVC的路径查找顺序

    使用MVC的朋友们,知道MVC的funny之处. 但是如果出现路径找不到,请记住以下的页面路径寻找顺序. http://www.cnblogs.com/sosoft/ 首先,知道你的Controlle ...

  8. iOS 阶段学习第23天笔记(XML数据格式介绍)

    iOS学习(OC语言)知识点整理 一.XML数据格式介绍 1)概念:xml是extensible markup language扩展的标记语言,一般用来表示.传输和存储数据 2)xml与json目前使 ...

  9. iOS阶段学习第三天笔记(运算符)

    iOS学习(C语言)知识点整理笔记 1.运算符 一.算术运算符 1)表达式由变量.常量.运算符构成,有确定的类型和值 2)算术运算符包括: +(加),-(减),*(乘),/(除),%(模) 3)算术运 ...

  10. hibernate简单注释(一.1)

    **************************************************************************************************** ...