Sass入门

Posted on | In

Sass入门

1.安装Sass（window需要安装Ruby,安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量）
1
gem install sass
2.编译Sass
1
2
3
4
5
6
7
8
#单文件转换命令
sass test/test.scss output/output.css

#单文件监听命令
sass --watch test/test.scss:output/output.css

#如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch test:output
3.拓展
1.嵌套
1
2
3
4
5
6
7
8
9
#main p {
    color: #00ff00;
    width: 97%;
  
    .redbox {
      background-color: #ff0000;
      color: #000000;
    }
  }

编译为

1
2
3
4
5
6
#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }
2.引用父选择器（&）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
a {
    font-weight: bold;
    &:hover { text-decoration: underline; }
  }
/*&层级很深，会先替换里面的*/
p{
    height: 200px;
    &:hover{
        background: red;
    }
    a{
        &:hover{
            text-decoration: underline;
        }
    }
}

编译为

1
2
3
4
5
6
7
8
9
10
11
a {
  font-weight: bold; }
  a:hover {
    text-decoration: underline; }
/**/
p {
  height: 200px; }
  p:hover {
    background: red; }
  p a:hover {
    text-decoration: underline; }
3.嵌套属性
1
2
3
4
5
6
7
.funky {
    font: {
      family: fantasy;
      size: 30em;
      weight: bold;
    }
  }

编译为

1
2
3
4
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }
4.变量
1
2
3
4
5
6
7
8
9
10
11
12
$width: 5em;
#main {
    width: $width;
}  
/*变量写在嵌套之中，就不会在全局中，可以加上 !global*/
#main {
    $width: 5em!global;
    width: $width;
}  
p{
    width: $width;
}

编译为

1
2
3
4
5
6
7
8
#main {
  width: 5em; }
/**/
#main {
  width: 5em; }

p {
  width: 5em; }
5.运算
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$width:20px;
#main {
    width: $width/2;
    margin-left: 5px + 8px/2px;
}  
/*有点类似es6的`${}`*/
p {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
  }
/**/
p:before {
    content: "Foo " + Bar;
    font-family: sans- + "serif";
  }
/*
*   #{}内支持运算
*/
$attr: border;
p {
     width: #{5 + 10}px;
     #{$attr}-color: blue;
  }

编译为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#main {
  width: 10px;
  margin-left: 9px; }
/**/

p {
  font: 12px/30px; }
/**/

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }
/**/

p {
  width: 15px;
  border-color: blue; }
6.@extend
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

编译成

1
2
3
4
5
6
7
8
9
10
11
12
13
.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; }

.seriousError, .criticalError {
  border-width: 3px; }

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; }
7.@if
1
2
3
4
5
6
7
8
9
10
11
12
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

编译成

1
2
p {
  color: green; }
8.@for
1
2
3
4
5
6
7
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
/**/
@for $i from 1 to 3 {
    .item-#{$i} { width: 2em * $i; }
}

编译成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.item-1 {
  width: 2em; }

.item-2 {
  width: 4em; }

.item-3 {
  width: 6em; }
/**/
.item-1 {
  width: 2em; }

.item-2 {
  width: 4em; }
9.@each
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

/*每一项对应*/
@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

/**/
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

编译成

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
.puma-icon {
  background-image: url("/images/puma.png"); }

.sea-slug-icon {
  background-image: url("/images/sea-slug.png"); }

.egret-icon {
  background-image: url("/images/egret.png"); }

.salamander-icon {
  background-image: url("/images/salamander.png"); }
/**/

.puma-icon {
  background-image: url("/images/puma.png");
  border: 2px solid black;
  cursor: default; }

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
  border: 2px solid blue;
  cursor: pointer; }

.egret-icon {
  background-image: url("/images/egret.png");
  border: 2px solid white;
  cursor: move; }

/**/
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.5em; }

h3 {
  font-size: 1.2em; }
10.@mixin
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
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
.page-title{
    @include large-text
}
/*mixin可以执行并且可以接受参数*/
@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 20px); }

/*@content*/
@mixin button { 
  font-size: 1em; 
  padding: 0.5em 1.0em;
  text-decoration: none; 
  color: #fff; @content;
  @content;  
} 
.button-green { 
    @include button { 
      background: green
    } 
}

编译成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000; }
/**/

p {
  border-color: blue;
  border-width: 20px;
  border-style: dashed; }
/**/

.button-green {
  font-size: 1em;
  padding: 0.5em 1.0em;
  text-decoration: none;
  color: #fff;
  background: green; }
11.Function
1
2
3
4
5
6
7
8
$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

编译成

1
2
#sidebar {
  width: 240px; }
比较

@mixin与@extend的区别：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*@mixin*/
@mixin button { 
  background-color: green; 
}
.button-1 {
   @include button; 
} 
.button-2 {
   @include button;
}

/*@extend
*有时候写的样式只想继承，不想编译出来的时候可以使用，只需要把button改成%button
*/
button { 
  background-color: green; 
}
.button-1 {
   @extend button; 
} 
.button-2 {
  @extend button;
}

编译成

1
2
3
4
5
6
7
8
9
10
/*@mixin*/
.button-1 {
  background-color: green; }

.button-2 {
  background-color: green; }

/*@extend*/
button, .button-1, .button-2 {
  background-color: green; }

1.@mixin可以传入参数，如果@mixin里样式代码很多，编译后会生成大量的代码。

2.@extend编译不会重复花括号内的内容。

12.%占位符
1
2
3
4
5
6
7
%choose-competency-icon{
  line-height: 96px;
}
.ion-ios-checkmark{ 
  @extend  %choose-competency-icon;
  color:$primary-color;
}

编译成

1
2
3
4
.ion-ios-checkmark{ 
  line-height: 96px;
  color:$primary-color;
}