Sass学习笔记(补充)
Posted JollyLee
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Sass学习笔记(补充)相关的知识,希望对你有一定的参考价值。
阅读目录
相关链接: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; }
/* 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://www.w3cplus.com/sassguide/syntax.html
以上是关于Sass学习笔记(补充)的主要内容,如果未能解决你的问题,请参考以下文章