Sass学习笔记（补充）

时间 2019-12-10

标签 sass 学习笔记补充繁體版

原文原文链接

阅读目录

1. Sass和SCSS的区别css

2. @while循环html

3. @at-rootgit

4. @contentgithub

5. 凸显注释编程

6. CSS输出样式浏览器

7. 重置浏览器样式sass

8. Sass调试和@debug命令、@warn命令编程语言

9. 使用Sass时的注意事项
ide

相关连接：Sass学习笔记前篇函数

相关连接：Sass关于颜色函数的乐趣

在Sass学习笔记前篇，记载了Sass安装、基本用法、编程语法，在这篇，将补充在前篇未记载的知识。

1. Sass和SCSS的区别

参考连接：http://sass.bootcss.com/docs/scss-for-sass-users/

SCSS是Sass3引入新的语法，其实它们没有什么本质的区别，Sass是以“.sass”后缀为扩展名，SCSS是以“.scss”后缀为扩展名。

Sass与SCSS的语法区别，Sass是以严格的缩进式语法规则来写，不使用大括号和分号；SCSS和CSS同样，要使用大括号和分号。

/* SCSS语法 */
.main {
  background-color: #eee;
  .container {
    background-color: #fff;
    color: #222;
  }
}

/* Sass语法 */
.main 
  background-color: #eee
  .container
    background-color: #fff
    color: #222

编译后的CSS样式：

/* SCSS语法 */
.main {
  background-color: #eee;
}
.main .container {
  background-color: #fff;
  color: #222;
}

/* Sass语法 */
.main {
  background-color: #eee;
}
.main .container {
  background-color: #fff;
  color: #222;
}

2. @while循环

在Sass中，除了@for和@each循环外，还支持@while循环。跟其余编程语言相似，语法是while(条件){语句}。Sass是以@来控制命令的，因此须要加符号@。

$i: 1;
@while $i < 3 {
  .div-#{$i} {
    width: 100px * $i;
  }
  $i: $i + 1;
}

编译后的CSS样式：

.div-1 {
  width: 100px;
}
.div-2 {
  width: 200px;
}

3. @at-root

Sass3.3.0新增的功能，能够跳出选择器嵌套的。通常全部的嵌套，都是继承上级选择器的，@at-root就能够跳出全部的上级选择器。

A. @at-root普通

body {
  font-size: 12px;
  @at-root .div {
    background-color: #eee;
  }
}

编译后的CSS样式：

body {
  font-size: 12px;
}
.div {
  background-color: #eee;
}

B. @at-root(without: …)和@at-root(with: …)

@at-root默认只会跳出选择器，@at-root至关于@at-root(without: rule)，rule表示常规CSS。

可是@at-root默认是不会跳出@media和@support的，若是想跳出这两个，则将rule改成media或者support，也就是@at-root(without: media)或者@at-root(without: support)。

还有一个@at-root(without: all)，也就是字面意思，跳出全部的嵌套，包括media、support和常规CSS。

/* media */
@media print {
  .page1 {
    width: 40%;
    @at-root (without: media) {
      .active {
        color: red;
      }
    }
  }
}
/* all */
@media print {
  .page2 {
    width: 40%;
    @at-root (without: all) {
      .active {
        color: red;
      }
    }
  }
}

编译后的CSS样式：

/* media */
@media print {
  .page1 {
    width: 40%;
  }
}
.page1 .active {
  color: red;
}

/* all */
@media print {
  .page2 {
    width: 40%;
  }
}
.active {
  color: red;
}

with或without做用相反，也就是不跳出，若是将Sass代码中的without改成with，编译后的CSS样式为：

/* media */
@media print {
  .page1 {
    width: 40%;
  }
  .active {
    color: red;
  }
}

/* all */
@media print {
  .page2 {
    width: 40%;
  }
  .page2 .active {
    color: red;
  }
}

C. 应用于@keyframe

.myAnimation {
    animation: myAnimation 3s;
    @at-root {
        @keyframes myAnimation {
          from{width:0;}
          to{width:120px;}
        }
    }
}

编译后的CSS样式：

.myAnimation {
  animation: myAnimation 3s;
}
@keyframes myAnimation {
  from {
    width: 0;
  }
  to {
    width: 120px;
  }
}

4. @content

@content是Sass3.2.0新增的，可使混合宏@mixin接受一整块样式，接受的样式从@content开始。

@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body {
    color: red 
  }
}

编译后的CSS样式：

@media only screen and (max-width: 480px) {
  body {
    color: red;
  }
}

5. 凸显注释

咱们从CSS输出样式中，能够看出，只有压缩输出样式compressed，不会对注释输出，其余全部的输出样式的CSS代码都带有注释。

可是有时候，咱们想要压缩的CSS文件也有注释，这时候，咱们就能够用凸显注释。凸显注释就是在Sass标准注释中加一个感叹号!。例：/*! 凸显注释 */。

/*! 凸显注释 */
.main {
  background-color: #eee;
  .container {
    background-color: #fff;
    color: #222;
  }
}

编译后的CSS样式：

/*! 凸显注释 */.main{background-color:#eee}.main .container{background-color:#fff;color:#222}

6. CSS输出样式

Sass编译CSS样式风格有四种：nested、expanded、compact、compressed。

A. :nested 嵌套输出方式，默认值

nested是Sass默认的输出方式，它反映了CSS的结构样式和HTML文档结构，缩进的层级反映了嵌套的层级。每一个属性都占有一行，每条选择器是根据嵌套的层级缩进的。例如：

.main {
 background-color: #eee;
 .container { background-color: #fff;
 color: #222;
  }
}

编译后的CSS样式：

.main {
 background-color: #eee; }
 .main .container {
 background-color: #fff;
 color: #222; }

B. :expanded 正常输出方式，没有缩进的、扩展的

expanded和nested类似，区别就在于缩进，expanded的选择器和闭大括号不会缩进，属性值缩进所属的选择器内。

仍是以上面样式为例，编译后的CSS样式：

.main {
  background-color: #eee;
}
.main .container {
  background-color: #fff;
  color: #222;
}

C. :compact 紧密输出方式，单行输出

compact是单行CSS输出方式，一条选择器和它的属性值占一行。

一样以上面样式为例，编译后的CSS样式：

.main { background-color: #eee; }
.main .container { background-color: #fff; color: #222; }

D. :compressed 压缩输出方式，去掉注释及空格

compressed会去掉标准的Sass和CSS注释及空格，选择器和属性值紧挨着输出。

以上面样式为例，编译后的CSS样式：

.main{background-color:#eee}.main .container{background-color:#fff;color:#222}

7. 重置浏览器样式

咱们在写CSS时，首先都会引入一段重置浏览器样式的代码，这是由于不一样的浏览器对标签的默认样式值不一样，，因此咱们须要有一套样式表来重置浏览器样式，避免咱们写的网页在各个浏览器中形成的显示差别。

http://cssreset.com/，该网站有最流行的CSS重置样式表，能够根据本身的需求复制。

还有一种标准化方法，跟重置方法有点不同，它会使浏览器中不一致的地方标准化，而不是从新修改这些地方。

http://necolas.github.io/normalize.css/，该网站提供了normalize.css的样式文件。（好像国内有被墙了，只能FQ了。）
https://github.com/kristerkari/normalize.scss，能够在该页面，下载normalize.scss文件。在写Sass时，不管是normalize.css仍是normalize.scss均可以使用，引用到样式表开头便可。

8. Sass调试和@debug命令、@warn命令

A. @debug命令和@warn命令

@debug伪指令检测错误，并将SassScript表达式值显示到标准错误输出流。@debug命令不会常常用到，可是它在调试自定义混合宏和函数时会起到很大的做用。

@warn命令用户对问题提供警告建议；它将SassScript表达式显示到标准错误输出流。

B. Chrome浏览器调试

未完待续。

C. Firefox浏览器调试

未完待续。

9. 使用Sass时的注意事项

在写Sass代码时就应该注意代码规范
不要嵌套太多层代码，最好不要超过三层
非必须状况下，不要写重复的混合宏
最好按模块书写样式表，再用@import导入主样式文件表

参考连接：http://sass-lang.com/

http://sass.bootcss.com/

http://www.w3cplus.com/sassguide/syntax.html

SASS在线转换器