Fanfan's Blog

Better than ever

0%

SASS - awesome

Posted on Edited on Disqus:

This can be seen as Chapter 2 after this one ➡ Chapter 1
Resources lists
1. SASS lang
2. Usage conclusion (Chinese)
3. SASS 中文网
4. One article with several good demos using SASS
5. SASS-GUIDELINES

@mixin or @extend

Too many articles, in short, avoid using @extend.

BEM - maybe not some bad idea

Getting Sass-y with BEM

@if @for @each @while

another article

在命令行中输出时可以看到提示信息，让用户了解某些事情。在一些复杂的@mixin或@function中使用@warn, @error或@debug，可以起到一定的作用，可以让程序员更容易的发现和追查问题，也更好的提供用户体验。

1.) @if
@if指令是一个SassScript，它可以根据条件来处理样式块，如果条件为true返回一个样式块，反之false返回另一个样式块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$boolean: true !default;

@mixin simple-mixin {
    @if $boolean {
        @debug "$boolean is #{$boolean}";
        display: block;
    }
    @else {
        @debug "$boolean is #{$boolean}";
        display: none;
    }
}

.some-selector {
    @include simple-mixin;
}

// result
.some-selector {
  display: block; }

2.) @for support asc or desc
two forms:
a.) @for $var from through (include end)
b.) @for $var from to (skip end)

eg.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$class-slug: for !default;

@for $i from 1 through 4 {
    .#{$class-slug}-#{$i}{
        width: 60px + $i;
    }
}

//resule
.for-1 {
  width: 61px; }

.for-2 {
  width: 62px; }

.for-3 {
  width: 63px; }

.for-4 {
  width: 64px; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$class-slug: for !default;

@for $i from 1 to 4 {
    .#{$class-slug}-#{$i}{
        width: 60px + $i;
    }
}
//result
.for-1 {
  width: 61px; }

.for-2 {
  width: 62px; }

.for-3 {
  width: 63px; }

3.) @each
@each $var in <list>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$list: adam john wynn mason kuroir;

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}
//result
.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; }

4.) @while
@whild指令也需要SassScript表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为false时停止循环。这个和@for指令很相似，只要@while后面的条件为true就会执行。

这里有一个@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;
}
//result:
.while-4 {
  width: 24px; }

.while-3 {
  width: 23px; }

.while-2 {
  width: 22px; }

.while-1 {
  width: 21px; }
1
2
3
4
5
6
7
8
9
10
11
$filter:false !default; //是否开启ie滤镜
//背景色半透明
@mixin bgcolor-alpha($bgcolor: rgba(0,0,0,.5)){
  color:#fff;
  @if $filter{
    filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#{ie-hex-str($bgcolor)}', endColorstr='#{ie-hex-str($bgcolor)}');
  }@else{
    background-color: #333;
  }
  background-color:$bgcolor;
}

这是半透明rgba背景的一段代码，高级浏览器用rgba，ie6-8如果开启滤镜用滤镜，不开启滤镜就用纯色，常用于图片下方浮现标题。至于多条件的，可以参考sass揭秘之@mixin,%,@function里面的神来之笔的@mixin prefixer
(This is really blowing my mind, you don't read then you don't know what you don't know at all.)

%placeholder (used with @extend)

@at-root

@at-root的内联选择器模式，将不会让你的选择器发生任何的嵌套，直接移除了父选择。在来看一个嵌套深一点的用例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.foo {
    @at-root .bar {
        color: gray;

        @at-root button{
            color:red;

            @at-root span {
                color: orange;
            }
        }
    }
}
//CSS
.bar {
  color: gray; 
}
button {
  color: red; 
}
span {
  color: orange; 
}

article link is here, too many info, cannot handle atm.

nth() function

article link, overkill for now.
length(), index(), @function

SASS function

article link, to be continued

10 common mixin

article link