普通变量

1
$fontSize:12px;

默认变量

1
$fontSize:12px; !default;

变量覆盖:只需要在默认变量之前重新声明下变量即可

1
2
$fontSize:14px;
$fontSize:12px; !default;

变量的调用

1
2
3
4
$fontSize:14px;
.demotest{
  font-size:$fontSize;
}

局部变量和全局变量
全局变量就是定义在元素外面的变量

1
2
3
4
5
6
7
8
9
10
$color:orange !default; //定义全局变量
.block{
  color:$color; //调用全局变量;
}
.em{
    $color:red; //定义局部变量
    a{
      color:$color;//调用局部变量
    }
}

嵌套
1、选择器嵌套
比如实现下面的css

1
2
3
4
5
6
nav a {
  color:red;
}
header nav a {
  color:green;
}

在sass,就可以使用选择器嵌套来实现

1
2
3
4
5
6
7
8
nav {
  a {
    color:red;
    header & {  //& 符是对当前选择器的引用
      color:green;
    }
   }
}

2、属性嵌套
比如实现下面的css

1
2
3
4
5
6
//css有一些属性前缀相同,只是后缀不一样
//比如: border、margin、padding、font等
.box{
    border-top:1px solid #eee;
    border-bottom:1px solid #ddd;
}

在sass,就可以使用使用属性嵌套实现

1
2
3
4
5
6
.box{
    border:{
      top:1px solid #eee;
      bottom:1px solid #ddd;
    }
}

3、伪类嵌套
伪类嵌套和属性嵌套非常类似,只不过伪类嵌套需要借助’&’符合配合使用
比如写个大家都熟悉的clearfix

1
2
3
4
5
6
7
8
9
10
.clearfix {
    display: block;
    &:after{
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
}

编译出来的css

1
2
3
4
5
6
7
8
9
10
.clearfix {
    display: block;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

混合宏-声明混合宏
需要重复使用大段样式时,使用变量无法达到目的时就使用混合宏-使用@mixin来声明一个混合宏。个人建议:如果你的代码块中涉及到变量,建议使用混合宏来创建相同的代码块。
1、不带参数混合宏

1
2
3
4
@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

2、带参数混合宏
a) 传一个不带值的参数

1
2
3
4
@mixin border-radius($radius){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

b)传一个带值的参数

1
2
3
4
@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

c)传多个参数

1
2
3
4
@mixin center($width,$height){
     margin-top: -($height) / 2;
     margin-left: -($width) / 2;
}

3、复杂的混合宏

1
2
3
4
5
6
7
8
9
//带有多个参数时,可以使用"..."来替代
@mixin box-shadow($shadow...){
    @if length($shadow) >= 1{
        @include prefixer(box-shadow,$shadow);
    }@else{
        $shadow:0 0 4px rgba(0,0,0,.3);
        @include prefixer(box-shadow,$shadow);
    }
}

混合宏-调用混合宏
使用@include来调用声明好的混合宏

1
2
3
4
5
6
7
8
//调用上面不带参数的混合宏
.button{
    @include border-radius;
}
//调用传一个不带值的参数
.button{
    @include border-radius(4px);
}

继承
通过关键词 @extend来继承已存在的类样式块,从而实现代码的继承。个人建议:如果你的代码块不需要专任何变量参数,而且有一个基类已在文件中存在,那么建议使用 Sass 的继承。

1
2
3
4
5
6
7
8
.btn {
    border: 1px solid #ccc;
    padding: 6px 10px;
}
.btn-primary {
    background-color: #f36;
    @extend .btn;
}

编译出来后

1
2
3
4
5
6
7
.btn, .btn-primary{
    border: 1px solid #ccc;
    padding: 6px 10px;
}
.btn-primary {
    background-color: #f36;
}

占位符 %placeholder
%placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码

1
2
3
4
5
6
%mt5{
    margin-top:5px;
}
%pt5{
    padding-top:5px;
}

上面这段代码没有被@extend调用,不产生任何代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
%mt5{
    margin-top:5px;
}
%pt5{
    padding-top:5px;
}
.btn {
    @extend %mt5;
    @extend %pt5;
}
.block {
    @extend %mt5;
    span {
        @extend %pt5;
    }
}

被@extend调用后,编译出来的css(编译出来的代码会将相同的代码合并在一起

1
2
3
4
5
6
.btn, .block {
  margin-top: 5px;
}
.btn, .block span {
  padding-top: 5px;
}

混合宏 vs 继承 vs 占位符
个人建议使用时,遵循适合最好的原则,不要滥用。如果比较图片无法显示,请点击链接查看http://img.mukewang.com/55263aa30001913307940364.jpg

插值#{}
插值–通常是指变量插值,或者变量替换,Sass是基于Ruby的,它使用 ${}进行表达式替换

1
2
3
$description:"awesome";
@warn "this is #{$description} "
//输出 this is awesome

需要注意的是,变量中的$不能像PHP一样丢掉。变量被#{}包裹了起来。另外值得一提的是:你可以插入任何类型的变量,不仅仅是字符串
什么时候应该使用插值?
1、字符串-最常见的变量替换场景:打印字符串中变量的内容
情景1

1
2
3
4
5
6
7
8
9
10
11
//假设你有一组叫$colors名的颜色映射(映射是指一个存储了一系列 key/value 组合的变量),但你已经受够了一次又一次地敲 map-get($colors, ...)。所以,你写了一个简单的color()函数,使用key去获得相应的值
 $colors: (
    "primary": tomato,
    "secondary": hotpink
);
@function color($key) {
    @return map-get($colors, $key);
}
.el {
    background-color: color(primary);
}

现在,当你敲错名称,或者去取一个不存在的key时,你想给出哪个key没有找到错误的信息。
调用color(awesomeness)

1
2
3
4
5
@function color($key) {
      @if not map-has-key($colors,$key) {
         @warn "key '#{$key}' not found in $colors map.";
      }
      @return map-get($colors , $key);

在这个场景里,由于这个$colors变量没有使用插值,它将打印以下信息:

1
Key awesomeness not found in $colors map.

2、css函数-css函数中的变量,如calc(),url()等
情景1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  $sidebar-width: 250px;
 .main {
    width: calc(100% - $sidebar-width);
 }
//你会惊讶地发现,根本不work。没有报错,容器的大小却又不正确。如果你去审查你的dom元素,你会看到这个 — 被划掉了。因为,这是不合法的
//因为calc()是一个CSS函数,不是一个Sass函数。这就是说Sass会将整个表达式解释成一个字符串
$type-of-expression: type-of(calc(100% - $sidebar-width)); // string
.main{
    width:calc(100% - #{$sidebar-width});
}
//$sidebar-width被认为是一个常规字符串,所以打出来就是它自己,当我们用插值这样做时,Sass编译这个样式文件时,它会用#{$sidebar-width}的值,即
.main {
     width: calc(100% - 250px);
}

情景2

1
2
3
4
5
6
@for $i from 1 through $max {
    .el:nth-of-type(#{$i}) {
        ...
     }
}
//for循环和:nth-*()选择器一起使用。再一次说明,你需要使用插值变量,才能最终得到想得到的结果

Sass会把CSS函数认为是字符串,所以想要在最后获得它们的值,要求你转义所有同它们一起使用的变量
3、css指令-如 @support , @page , @media

1
2
3
4
5
//如果你的变量在@media字符串后面,需要使用插值才可以
$value : screen;
@media #{$value} {
    ...
}
1
2
3
4
5
//如果@media后面紧跟(),你就不再需要插值变量里,因为sass会求出所有在这些括号里的值
$value: 1336px;
@media (max-width: $value) {
    ...
}

4、选择器-使用变量作为一个选择器,或者选择器的一部分

1
2
3
4
$value : cunstom;
selector-#{$value} {
    property : value;

借鉴文章:
https://webdesign.tutsplus.com/tutorials/all-you-ever-need-to-know-about-sass-interpolation–cms-21375

数据类型
1、数字:如,12、12px
2、字符串:如,jill、”jill”
3、颜色:如,blue、#ddd、rgba(0,0,0,.3)
4、布尔值
5、空值
6、值列表:如,1.5rem 1rem 0 、1.5rem,1rem,0

数学运算-单位最好一致(函数中有不同单位,将会报错)
1、加法

1
2
3
.box{
    width : 20rem + 1rem;
}

2、减法

1
2
3
4
5
$full-width: 960px;
$sidebar-width: 200px;
.content {
    width: $full-width - $sidebar-width;
}

3、乘法
注意:两个值单位相同时,只需要为一个数值提供单位即可,单位不一致,也会报错哦

1
2
3
.box { width:10px * 2px; } //20px*px isn't a valid CSS value.
.box { width: 20px * 2em;}//40em*px isn't a valid CSS value.
.box { width: 10px * 2;}//ok

4、除法
”/ ”符号被当作除法运算符时有以下几种情况:
a 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
b 如果数值被圆括号包围。
c 如果数值是另一个数学表达式的一部分。

1
2
3
4
5
6
7
8
9
p {
    font: 10px/8px; // 纯 CSS,不是除法运算
    $width: 1000px;width: $width/2; // 使用了变量,是除法运算
    width: round(1.5)/2; // 使用了函数,是除法运算
    width:(1000 / 100px);//?
    height: (500px/2); // 使用了圆括号,是除法运算
    margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算
    width: (1000px / 100px); //如果两个值带有相同的单位值时,除法运算之后会得到一个不带单位的数值  
}

字符运算
1、通过加法符号“+”来对字符串进行连接

1
2
3
4
5
6
7
8
$content: "Hello" + "" + "Sass!";
.box:before {
     content: " #{$content} ";
}
//编译后
.box:before {
    content: " Hello Sass! ";
}

2、通过 +,把字符连接在一起

1
2
3
4
5
6
7
div {
    cursor: e + -resize;
}
//编译后
div {
    cursor: e-resize;
}
控制命令

@if

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//控制一个元素隐藏或显示
@mixin blockOrHidden($boolean:true) {
    @if $boolean {
       @debug "$boolean is #{$boolean}";
       display:block;
    }
    @else {
       @debug "$boolean is #{$boolean}";
       display:none;
    }
//编译后
.block {
    display: block;
}
.hidden {
    display: none;
}

for循环
在sass的@for有两种方式

1
2
3
//$i 表示变量,start 表示起始值,end 表示结束值
@for $i from <start> through <end>//关键字 through 表示包括 end 这个数
@for $i from <start> to <end>     //而 to 则不包括 end 这个数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
$grid-prefix : span !default;
$grid-width : 60px !default;
$grid-gutter: 20px !default;
%grid {
    float: left;
    margin-left: $grid-gutter / 2;
    margin-right: $grid-gutter / 2;
}
//方式1
@for $i from 1 through 12{
    .#{$grid-prefix}#{$i} {
        width : $grid-width * $i + $grid-gutter * ($i - 1);
        @extend %grid;
    }
}
//编译后
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
.span1 {
  width: 60px;
}
.span2 {
  width: 140px;
}
.span3 {
  width: 220px;
}
.span4 {
  width: 300px;
}
.span5 {
  width: 380px;
}
.span6 {
  width: 460px;
}
.span7 {
  width: 540px;
}
.span8 {
  width: 620px;
}
.span9 {
  width: 700px;
}
.span10 {
  width: 780px;
}
.span11 {
  width: 860px;
}
.span12 {
  width: 940px;
}

@while循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$types : 4;
$type-width : 20px;
@while $types > 0 {
    .while-#{$types} {
        width : $type-width + $types;
    }
    $types : $types - 1;
}
//编译后
.while-4 {
  width: 24px;
}
.while-3 {
  width: 23px;
}
.while-2 {
  width: 22px;
}
.while-1 {
  width: 21px;
}

@each循环
@each循环就是去遍历一个列表,然后从列表中取出对应的值

1
@each $var in <list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$list: adam john wynn mason kuroir;//$list 就是一个列表
@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
     }
}
.author-bio { @include author-images;}
//编译后
.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }
函数功能

字符串函数

unquote($string) : 删除字符串中的引号

1
2
3
4
5
6
.test4 {
    content: unquote("'Hello Sass!'");
}
//编译后
.test4 {  content: 'Hello Sass!'; }
//从测试的效果中可以看出,unquote( ) 函数只能删除字符串最前和最后的引号(双引号或单引号),而无法删除字符串中间的引号。如果字符没有带引号,返回的将是字符串本身

quote($string) : 给字符串添加引号
如果字符串,自身带有引号会统一换成双引号 “”

To-upper-case()、To-lower-case()

1
2
3
4
5
6
7
8
9
//To-upper-case() 函数将字符串小写字母转换成大写字母
.text{
    test : to-upper-case(aAa);
}
//编译后
.text{
    test : AAA
}
//To-lower-case() 函数 与 To-upper-case() 刚好相反,将字符串转换成小写字母
数字函数

percentage($value) : 将一个不带单位的数转换成百分比值

1
2
3
.footer{
    width : precentage(20px / 200px);
}

round() : 将一个数四舍五入为一个最接近的整数

1
2
3
.footer {
   width:round(12.3px)
}

ceil():将一个数转换成最接近于自己的整数,会将一个大于自身的任何小数转换成大于本身 1 的整数。也就是只做入,不做舍的计算

1
2
3
4
5
6
7
.footer {
     width:ceil(12.3px);
}
//编译后
.footer {
     width: 13px;
}

floor():刚好与 ceil() 函数功能相反,其主要将一个数去除其小数部分,并且不做任何的进位。也就是只做舍,不做入的计算

1
2
3
4
5
6
7
.footer {
     width:floor(12.3px);
}
//编译后
.footer {
     width: 12px;
}

abs() : 返回一个数的绝对值

min()、max():在多个数之中找到最小的一个,这个函数可以设置任意多个参数

random() :用来获取一个随机数

列表函数

length($list):返回一个列表的长度值

1
2
3
$list:(1,2px) ;
length(10px 20px (border 1px solid) 2em) //4
length($list) //2

nth(

list,n):返回一个列表中指定的某个标签值
$n 必须是大于 0 的整数,且1 是指列表中的第一个标签值,2 是指列给中的第二个标签值,以此类推

1
2
3
4
nth(10px 20px 30px,1) //10px
nth((1px solid #eee) border left,1) //1px solid #eee
nth((1px solid #eee),border,left,1) //?
nth((Helvetica,Arial,sans-serif),2) //Arial

join(list1,list2, [$separator]):将两个列给连接在一起,变成一个列表

1
2
3
//join() 只能将两个列表连接成一个列表,如果直接连接两个以上的列表将会报错
//但很多时候不只碰到两个列表连接成一个列表,这个时候就需要将多个 join() 函数合并在一起使用
join((blue red), join((#abc #def),(#dee #eff)))

结合以上,来个演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$list1:jill,mage,leng;
$list2:2,33;
$joins: join($list1,$list2,space); //join() 函数中 $separator 除了默认值 auto 之外,还有 comma 和 space 两个值,其中 comma 值指定列表中的列表项值之间使用逗号(,)分隔,space 值指定列表中的列表项值之间使用空格( )分隔。
$nthList:$joins;
.test-join
    content:length($joins);
}
@for $i from 1 through (length($nthList)) { 
    .test-#{$i}{
      color: nth($nthList,$i);
    }
}
//编译后
.test-join {  content: 5; }
.test-1 {  color: jill; }
.test-2 {  color: mage; }
.test-3 {  color: leng; }
.test-4 {  color: 2; }
.test-5 {  color: 33; }

append(list1,val, [$separator]):将某个值放在列表的最后
zip($lists…):将几个列表结合成一个多维的列表
注意:
1、在使用zip()函数时,每个单一的列表个数值必须是相同的
2、每行每行的存,每列每列的取

1
2
3
4
5
6
7
8
9
10
11
12
$zips:zip(1px 2px 3px,solid dashed dotted,green blue red);//1px solid green, 2px dashed blue, 3px dotted red
.test-zip { content:length($zips);} //3
@for $i from 1 to (length($zips)+1){
    .test-#{$i} {
        border: nth($zips,$i);
    }
}
//编译后
.test-zip {  content: 3; }
.test-1 {  border: 1px solid green; }
.test-2 {  border: 2px dashed blue; }
.test-3 {  border: 3px dotted red; }

index(list,value):返回一个值在列表中的位置值

1
2
3
index(1px solid red, 1px) //1 ->在 Sass 中,第一个值就是1,第二个值就是 2
index(1px solid red,dotted) //false -> 列表中没有找到 dotted
false

Introspection函数
Introspection 函数包括了几个判断型函数-这几个函数主要用来对值做一个判断的作用:
1、type-of($value):返回一个值的类型

1
2
3
4
5
.testIntrospection{
    content:type-of(1 / 2 = 2);
}
//编译后
.testIntrospection {  content: string; }

2、unit(number):返回一个值的单位3、unitless(number):判断一个值是否带有单位

1
2
unitless(100) //true ->如果不带单位返回的值为 true
unitless(100px) //false ->带单位返回的值为 false

4、comparable(number?1,number-2):判断两个值是否可以做加、减和合并

1
2
comparable(2rem,1em)//false ->不可以返回的值是 false
comparable(2px,1cm)//true ->可以返回的值为 true

Miscellaneous函数
在这里把 Miscellaneous 函数称为三元条件函数,主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值

1
if($condition,$if-true,$if-false)

map -管理变量

1
2
3
4
5
6
//用个 $ 加上命名空间来声明 map。后面紧接是一个小括号 (),将数据以 key:value 的形式赋予,其中 key 和 value 是成对出现,并且每对之间使用逗号 (,) 分隔,其中最后一组后面没有逗号
$map:(
    $key1:value1,
    $key2:value2,
    $key3:value3
}

使用 map 可以很容易收集键的值和动态插入,比如换皮肤的项目

1
2
3
4
5
6
7
8
9
10
11
12
//map 嵌套 map。其实就是 map 的某一个 key 当成 map,里面可以继续放一对或者多对 key:value
$theme-color:(
    defalt:(
      bgcolor:#fff;
      text-color:#444;
      link-color:#ddd;
    ),
    primary:(
        bgcolor: #000,
        text-color:#fff,
        link-color: #93f
    )

在 Sass 中 map 自身带了七个函数
1、map-get(map,key):根据给定的key值,返回map中相关的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//$map:定义好的map;$key:需要遍历的key;如果$key不存在$map中,将返回null
$social-colors:(
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
//假设需要获取facebook键值对应的值
.btn-dribble{
    color:map-get($social-colors,facebook);
    background-color: map-get($social-colors,weibo);//如果 $key 不在 $map 中,不会编译出 CSS,其实在 Sass 中,map-get($social- colors,weibo) 返回了一个 null
}
//编译后
.btn-dribble {
    color: #3b5998;
}

2、map-merge(map1,map2):将两个map合并成一个新的map
3、map-remove(map,key):从map中删除一个key,返回一个新的map

1
2
3
4
5
6
7
8
$map:map-remove($social-colors,dribble);
//编译后
$map:(
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);

4、map-keys($map):返回map中所有的key

1
2
3
4
5
@each $name in map-keys($social-colors) {
    .btn-#{$name} {
        color : colors($name);
    }
}

5、map-values(map):返回map中所有的value6、map?has?key(map,$key):根据给定的key值判断map是否有对应的value值,如果有返回true,否则返回false

1
2
3
4
5
6
7
8
9
10
11
//自定义一个函数
@function colors($color){
    @if not map-has-key($social-colors,$color){
        @warn "no color found for '#{$color}' in $social-colors map";
    }
    @return map-get($social-colors,$color);
}
//调用函数
.btn-dribble { color: colors(dribble);}
.btn-facebook { color: colors(facebook);}
.btn-github { color: colors(github);}

7、keywords($args):返回一个函数的参数,这个参数可以动态的设置key和value

1
2
3
4
5
6
7
8
9
10
11
//其中 $args 变成 key(会自动去掉$符号),而 $args 对应的值就是value
@mixin map($args...){
    @debug keywords($args);
}
@include map(
  $dribble: #ea4c89,
  $facebook: #3b5998,
  $github: #171515,
  $google: #db4437,
  $twitter: #55acee
);
颜色函数

RGB()颜色函数
1、rgb(red,green,blue):根据红、绿、蓝三个值创建一个颜色;2、rgba(red,green,blue,alpha):根据红、绿、蓝和透明度值创建一个颜色;3、red(color):从一个颜色中获取其中红色值;
4、green(color):从一个颜色中获取其中绿色值;5、blue(color):从一个颜色中获取其中蓝色值;
6、mix(color?1,color-2,[$weight]):把两种颜色混合在一起

HSL函数
1、hsl(hue,saturation,lightness):通过色相(hue)、饱和度(saturation)和亮度(lightness)的值创建一个颜色;2、hsla(hue,saturation,lightness,alpha):通过色相(hue)、饱和度(saturation)、亮度(lightness)和透明(alpha)的值创建一个颜色;3、hue(color):
从一个颜色中获取色相(hue)值;
4、saturation(color):从一个颜色中获取饱和度(saturation)值;5、lightness(color):
从一个颜色中获取亮度(lightness)值;
6、adjust-hue(color,degrees):
通过改变一个颜色的色相值,创建一个新的颜色;
7、lighten(color,amount):
通过改变颜色的亮度值,让颜色变亮,创建一个新的颜色;
8、darken(color,amount):
通过改变颜色的亮度值,让颜色变暗,创建一个新的颜色;
9、saturate(color,amount):
通过改变颜色的饱和度值,让颜色更饱和,从而创建一个新的颜色
10、desaturate(color,amount):通过改变颜色的饱和度值,让颜色更少的饱和,从而创建出一个新的颜色;
11、grayscale(color):将一个颜色变成灰色,相当于desaturate(color,100%);
12、complement(color):返回一个补充色,相当于adjust?hue(color,180deg);
13、invert($color):
反回一个反相色,红、绿、蓝色值倒过来,而透明度不变。

Opacity函数
1、alpha(color)/opacity(color):获取颜色透明度值;
2、rgba(color,alpha):改变颜色的透明度值;
3、opacify(color,amount) / fade-in(color,amount):使颜色更不透明;
4、transparentize(color,amount) / fade-out(color,amount)**:使颜色更加透明。

@规则

@import
@import 根据文件名引入。 默认情况下,它会寻找 Sass 文件并直接引入, 但是,在少数几种情况下,它会被编译成 CSS 的 @import 规则:
1、文件的扩展名是 .css。
2、文件名以 http:// 开头。
3、文件名是 url()。
4、@import 包含了任何媒体查询(media queries)

1
2
3
4
5
6
7
8
9
@import "foo.css";
@import "foo" screen;
@import url(foo);
//编译后
@import "foo.css";
@import "foo" screen;
@import url(foo);
1
2
3
4
//如果你有一个 SCSS 或 Sass 文件需要引入, 但是你又不希望它被编译为一个 CSS 文件, 这时,你就可以在文件名前面加一个下划线,就能避免被编译
//例如,你有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了, 而且你还可以这样引入 _colors.scss 文件
@import "colors";//不用加下划线
//注意:在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如, _colors.scss 不能与 colors.scss 并存

嵌套@import

1
2
3
4
5
6
//example.scss文件
.example{ color:red};
//引用
#main{@import "example";}
//编译后
#main .example{color:red}

@media
1、嵌套在css规则中,有点类似js的冒泡功能

1
2
3
4
5
6
7
8
9
10
11
12
13
.sidebar{
    width:300px;
    @media screen and (orientation: landscape) {
        width: 500px;
  }
}
//编译后
.sidebar {width: 300px; }
 @media screen and (orientation: landscape) {
    .sidebar {
        width: 500px;
    }
 }

2、@media 嵌套 @media(还可以使用插值哦)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
@media #{$media} {
    .sidebar {
        @media (#{$feature}: #{$value}) {
           width: 500px;
        }
     }
}
//编译后
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
    .sidebar {width: 500px; }
}

@extend
Sass 中的 @extend 是用来扩展选择器或占位符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//@extend 是用来扩展选择器
.hoverlink {
    @extend a:hover;
}
a:hover { text-decoration: underline;}
//编译后
a:hover, .hoverlink {text-decoration: underline; }
//使用 @extend 来继承多个选择器或占位符的样式
.error {
    border: 1px #f00;
    background-color: #fdd;
}
.attention {
    font-size: 3em;
    background-color: #ff0;
}
.seriousError {
    @extend .error;
    @extend .attention;
    border-width: 3px;
}

@at-root
@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root

1
2
3
4
5
6
7
8
9
10
11
12
.a { color: red;
    .b { color: orange;
        .c { color: yellow;
            @at-root .d { color: green; }
         }
     }
 }
//编译后
.a { color: red;}
.a .b { color: orange;}
.a .b .c { color: yellow;}
.d { color: green;} //跳出来了

@debug
@debug 在 Sass 中是用来调试的,当你的在 Sass 的源码中使用了 @debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug
@warm
@warn 和 @debug 功能类似,用来帮助我们更好的调试 Sass。
@error

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@mixin error($x){
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @error "你需要将#{$x}值设置在10以内的数";
  }
}
.test {
  @include error(15);
}
//编译后
你需要将15值设置在10以内的数 on line 7 at column 5

sass 的使用的更多相关文章

  1. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  2. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  3. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  4. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  5. SASS教程sass超详细教程

    SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...

  6. Sass之坑Compass编译报错

    前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上 ...

  7. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  8. Sass用法指南

    写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这 ...

  9. PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用

    如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...

  10. Sass:初识Sass与Koala工具的使用

    一.下载Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输 ...

随机推荐

  1. 开始学习深度学习和循环神经网络Some starting points for deep learning and RNNs

    Bengio, LeCun, Jordan, Hinton, Schmidhuber, Ng, de Freitas and OpenAI have done reddit AMA's.  These ...

  2. Hive安装与配置——深入浅出学Hive

    第一部分:软件准备与环境规划 Hadoop环境介绍 •Hadoop安装路径 •/home/test/Desktop/hadoop-1.0.0/ •Hadoop 元数据存放目录 •/home/test/ ...

  3. 会话追踪(session tracking)

    HTTP是一种无连接的协议,如果一个客户端只是单纯地请求一个文件(HTML或GIF),服务器端可以响应给客户端,并不需要知道一连串的请求是否来自于相同的客户端,而且也不需要担心客户端是否处在连接状态. ...

  4. PyDev:warning: Debugger speedups using cython not foun

    在eclipse下调试代码开始时总提示一个警告: warning: Debugger speedups using cython not found. Run '"C:\Python36\p ...

  5. 解决 org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type的问题

    具体错误如下: Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying be ...

  6. Android -- ListView与Adapter

    ListView在Android中有着很重要的作用.Android开发中ListView是比较常用的组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示. 背景              ...

  7. Asp 将MSXML2.serverXMLHTTP返回的responseBody 内容转换成支持中文编码

    参考:ASP四个小技巧,抓取网页:GetBody,字节转字符BytesToBstr,正则表达式测试方法,生成静态页 Function GetBody(weburl) '创建对象 Dim ObjXMLH ...

  8. Android倒计时案例展示

    1. Handler 与Message方法实现倒计时功能 关于Handler与Message消息机制的原理可查看:Android--Handler使用应运及消息机制处理原理分析 这个设计思路也是最经常 ...

  9. C#基础视频教程6.1 如何简单读写数据库

    要理解MySQL,SQLServer,ACCESS都是数据库的品牌,不同品牌的数据库在不同的领域,适用场合有所不同.ACCESS应该是最简单,至少是Windows上最容易上手的数据库,MySQL可能跟 ...

  10. java创建二叉树并实现非递归中序遍历二叉树

    java创建二叉树并递归遍历二叉树前面已有讲解:http://www.cnblogs.com/lixiaolun/p/4658659.html. 在此基础上添加了非递归中序遍历二叉树: 二叉树类的代码 ...