前戏:下面这些玩意还是比较实用的,好像是进阶Sass必备的,以后写起
CSS
要溜得飞起啊!
规则(Rules)
1. @import
Sass
扩展了CSS
的@import
规则,让它能够引入SCSS
和Sass
文件。 所有引入的SCSS
和Sass
文件都会被合并并输出一个单一的CSS
文件。 另外,被导入的文件中所定义的变量或mixins
都可以在主文件中使用。
@import
根据文件名引入。 默认情况下,它会寻找 Sass
文件并直接引入, 但是,在少数几种情况下,它会被编译成 CSS
的 @import
规则:
如果文件的扩展名是
.css
。如果文件名以
http://
开头。如果文件名是 url()。
@import
包含了任何媒体查询(media queries)
1.1 @import
几种用法
@import "icon.scss"; //带.scss,.sass扩展名
@import "icon"; //不带扩展名,Sass会自动寻找带有 .scss或 .sass 扩展名的同名文件并将其引入。
如果你有个 scss
文件需要引入, 但你又不希望它被编译成 CSS
文件, 这时,你就可以在文件名前面加个_下划线,就能避免被编译。 这将告诉 Sass
不要把它编译成 CSS
文件。 然后,你就可以像往常一样引入这个文件了,而且还可以省略掉文件名前面的下划线进行引用。
@import "_icons", "mixin"; //引入多个文件;
要注意的一点: 在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如, _icons.scss
不能与 icons.scss
并存。
2. @media
Sass
中的@media
指令和CSS
的使用规则一样的简单,但它有另外一个功能,可以嵌套在CSS
规则中。有点类似JS
的冒泡功能一样,如果在样式中使用@media
指令,它将冒泡到外面。
SCSS:
.box{
font-size: 18px;
@media screen and (max-width: 768px) and (min-width: 320px){
width: 300px;
}
@media screen and (max-width:1024px) and (min-width: 768px){
width: 600px;
}
}
编译为:
.box {
font-size: 18px;
}
@media screen and (max-width: 768px) and (min-width: 320px) {
.box {
width: 300px;
}
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.box {
width: 600px;
}
}
3. @extend
SCSS:
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
编译为:
.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
4. @at-root
主要解决编译出来的
css
选择器嵌套过于严重问题;
SCSS:
.view{
%public{ //使用了%placeholder,只有使用了@extend调用,才会生成代码;
content: '';
display: block;
}
background-color: #e0e0e0;
.view-head{
&:after{
@extend %public;
border-bottom: 1px solid #e0e0e0;
}
@at-root .view-head-before{ //.view-head-before会被单独提到一行;
float: left;
}
@at-root .view-head-after{ //.view-head-after会被单独提到一行;
float: right;
}
}
.view-footer{
&:before{
@extend %public;
}
color: #f00;
}
}
编译为:
.view { background-color: #e0e0e0; }
.view .view-head:after,
.view .view-footer:before { content: ''; display: block; }
.view .view-head:after { border-bottom: 1px solid #e0e0e0; }
.view-head-before { float: left; }
.view-head-after { float: right; }
.view .view-footer { color: #f00; }
5. @debug, @warn, @error
@debug
在Sass
中是用来调试的,当你的在Sass
的源码中使用了@debug
指令之后,Sass
代码在编译出错时,在命令终端会输出你设置的提示Bug
;
@warn and @debug功能类似,在这不举栗子了,浪费高度。
SCSS:
@mixin blockOrHidden($boolean:true) {
@if $boolean {
@debug "$boolean is #{$boolean}";
display: block;
}
@else {
@debug "$boolean is #{$boolean}";
display: none;
}
}
.block {
@include blockOrHidden; //默认是true;
}
.hidden{
@include blockOrHidden(false);
}
命令行输出:
3 DEBUG: $boolean is true.
7 DEBUG: $boolean is false.
指令(Directives)
1. @if @else
@if
指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块。在 Sass 中除了@if
之,还可以配合@else if
和 @else 一起使用。下面直接看栗子:
1.1 控制伪元素的content值
SCSS:
@mixin elseif($selector, $value){
#{$selector}{
$text: $value;
@if $text == google {
content: '#{$text}';
@debug "$text is #{$text}"; //在命令行会显示:DEBUG: $text is google.
}@else if $text == facebook{
content: '#{$text}';
@debug "$text is #{$text}";
}@else if $text == wechat{
content: '#{$text}';
@debug "$text is #{$text}";
}@else if $text == twitter{
content: '#{$text}';
@debug "$text is #{$text}";
}
}
}
@include elseif('div:before','google');
//(别嫌SCSS写得这么多,而最后输出就一行代码)
// 在实际项目中玩起来是很愉快的!
编译输出:
.box:before { content: "google"; }
1.2 控制元素显示隐藏的栗子
SCSS:
@mixin showOrhide($Boolean: true){
@if $Boolean{
display: block;
}@else{
display: none;
}
}
.db{ @include showOrhide(); } //默认true;
.dn{ @include showOrhide(false); }
编译输出:
.db { display: block; }
.dn { display: none; }
2. @for 两种用法
$i => 变量,s => 起始值,e => 结束值;
2.1 @for $i from [s] through [e]
SCSS:
@for $i from 1 through 2{ //through循环出来的值包括end值
.box-#{$i}{
width: 20px * $i;
}
}
编译为:
.box-1 { width: 20px; }
.box-2 { width: 40px; }
2.2 @for $i from [s] to [e]
SCSS:
@for $i from 1 to 2{ //to循环出来的值不包括end值
.icon-#{$i}{
font-size: 16px * $i;
}
}
编译为:
.icon-1 { font-size: 16px; }
2.3 和Interpolation#{}一起玩
SCSS:
$bgc: blue, green, red, yellow;
@for $i from 1 to length($bgc){
.bgc-#{nth($bgc, $i)}{
background-color: #{nth($bgc, $i)};
}
}
//上面说过to循环不包括end值,所以编译后只有3个class;
编译为:
.bgc-blue {
background-color: blue;
}
.bgc-green {
background-color: green;
}
.bgc-red {
background-color: red;
}
2.4 @for生成个网格
SCSS:
$elem: div;
$grid-width: 60px;
$grid-clear: 20px;
%grid{
float: left;
margin:0 $grid-clear/2 0 $grid-clear/2;
//margin:0 ($grid-clear/2) 0 ($grid-clear/2); //觉得看得有点乱也可以加上括号;
}
@for $i from 1 through 6{ //through
.#{$elem}-#{$i}{
@extend %grid;
width: $grid-width * $i + $grid-clear * ($i - 1);
}
}
用
to
编译出来的也是一样的css,主要区别于[e]
的取值不同;下面这段代码的[e]
值是7
,而to
方式的结束值是不包括最后一位的,所以to
方式生成出来的css
也是一样。
@for $i from 1 to 7{ //to
.#{$elem}-#{$i}{
@extend %grid;
width: $grid-width * $i + $grid-clear * ($i - 1);
}
}
编译为:
.div-1, .div-2, .div-3, .div-4, .div-5, .div-6 { float: left; margin: 0 10px 0 10px; }
.div-1 { width: 60px; }
.div-2 { width: 140px; }
.div-3 { width: 220px; }
.div-4 { width: 300px; }
.div-5 { width: 380px; }
.div-6 { width: 460px; }
3. @while
@while
指令也需要SassScript
表达式,并会生成不同的样式块,直到表达式值为false
时停止循环。这和@for
指令非常相似,只要@while
后面的条件为true
就会执行。
SCSS:
$s: 12;
@while $s > 0{
.fs-#{$s + 12}{
font-size: $s + 12px;
}
$s: $s - 2;
}
被编译为:
.fs-24 { font-size: 24px; }
.fs-22 { font-size: 22px; }
.fs-20 { font-size: 20px; }
.fs-18 { font-size: 18px; }
.fs-16 { font-size: 16px; }
.fs-14 { font-size: 14px; }
4. @each
@each
循环指令的形式@each $var in <list>
,$var
是个变量名,<list>
是一个SassScript
表达式,他将返回一个列表值。
SCSS:
$list: checked, user, login, note, down, more;
@mixin icon-list{
@each $i in $list{
.icon-#{$i}{
background-image: url('../images/#{$i}.png');
}
}
}
.icon{
background-repeat: no-repeat;
@include icon-list;
}
被编译为:
.icon { background-repeat: no-repeat; }
.icon .icon-checked { background-image: url("../images/checked.png"); }
.icon .icon-user { background-image: url("../images/user.png"); }
.icon .icon-login { background-image: url("../images/login.png"); }
.icon .icon-note { background-image: url("../images/note.png"); }
.icon .icon-down { background-image: url("../images/down.png"); }
.icon .icon-more { background-image: url("../images/more.png"); }
Reference API
SASS_REFERENCE — Sass Documentation #Directives
学完了回过头来整理也真是麻烦,算是总结吧。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。