前端开发

SASS学习

安装及使用

安装gem

先按照ruby，在安装gem，过程略。

安装sass

1
gem install sass

sass转换为css

编译模式有四种：nested(默认)、expanded、compact、compressed

1
sass input.scss output.css

监视修改watch

1
sass --watch input.scss:output.css

也可以使用gulp、grunt等自动化构建工具

略

Sass基础

  • 变量：以美元符号$开头，在SCSS中，可以代替值进行加减乘除、也可以代替名值对的名称等。Data类型有：strings、lists、maps、colors。
  • 嵌套：属性可以嵌套，选择器也可以嵌套。在嵌套代码块中，&可以引用父元素，常用于a:hover伪类等。
  • 注释：//编译后不保留，/编译为CSS后保留/，/! 重要注释，压缩模式编译也会保留 /
1
2
3
4
5
6
7
8
9
10
11
12
13
//编译后不保留
$color : #333;

/*编译后保留*/
#main {
    background-color: $color + #555;
    a {
        color: $color;
        &:hover  {
            color: $color - #222;
        }
    }
}

操作符

颜色可以相加、相减，也可以乘以或除以某个数。对于变量，scss在可以进行运算时会进行运算，所以如果将要作为plain CSS的话，使用#{}插入（在拼接选择器或样式名称时，也用#{}插入）。

1
2
3
4
5
6
7
8
9
p {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
}
//编译为以下代码：
p {
    font: 12px/30px;
}

对于string变量，可以使用+进行字符串连接，如sans- + “serif”编译后为sans-serif

混入、继承、引入

合理使用混入和继承可以是SASS代码可重用、可读性以及可维护性更高。混入适合将某一类的特征提取出来，可以考虑将布局样式（如居中）、边框样式（三维边框圆角、阴影）提取出来。

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
//可以为scss格式(默认)，也可以为css格式
@import "path/foo.scss"

@mixin left {
    float: left;
}
div {
    @include left;
    margin: 10px;
}
//可以添加参数，这是mixin最强大的地方
@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
.class1 {
    border: 1px solid #ddd;
}
.class2 {
    @extend .class1;
    font-size: 120%;
}

此外，还有@media、@debug、@warn、@error、@at-root等

条件控制

条件控制有：if @if @for @each @while

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
if(true, 1px, 2px) //1px
if(false, 1px, 2px) //2px

$type: monster;
p {
    @if $type == ocean{
        color: blue;
    } @else if $type == monster {
        color: green;
    }
}

@for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
}

@each $animal in puma, 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;
  }
}

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

资源

Sass官网文档
SASS用法指南-阮一峰