001.控制指令与扩展

1. 控制指令

Sass支持基本控制指令和表达式。

1.1. @if指令

1.1.1. @if

@if将指令,如果表达式返回除false或null之外的任何值,则使用嵌套在其下的样式:

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

编译后

p {
  border: 1px solid; 
}

1.2. @else if与@else

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

编译后

p {
  color: green;
}

1.3. 简短if指令

$type: monster;
.content{
    border-top:if(true, 1px, 2px);
    border-bottom:if(false, 1px, 2px);
}

编译后

.content {
  border-top: 1px;
  border-bottom: 2px; }

1.4. @for指令

@for将指令重复输出一组样式。

该指令有两种形式:

  • @for $var <start> through <end>
  • @for $var <start> to <end>。

当<start>大于<end>时,计数器将递减。

1.4.1. @for $var <start> through <end>

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

编译后

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

1.4.2. @for $var <start> to <end>

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

编译后

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }

1.5. @while 指令

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

编译后

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

1.6. @each 指令

@each将指令格式:@each $var in <list or map>。

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

编译后

.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'); }


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

编译后

h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

1.6.1. 多重赋值

@each将指令也可以使用多个变量,@each $var1,$var2, ... in <list>。

@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;
  }
}

编译后

.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; }

2. sass扩展

对于独特的需求,Sass将为用户提供了多项高级定制功能。使用这些功能需要对Ruby有深刻的理解。

2.1. 自定义 Sass 函数

用户通过 Ruby API 可以自定义 Sass将函数,更多信息请查看 源代码文档。

2.2. 缓存存储

Sass将会缓存已经解析的文档,这使得它们可以重复使用,而无需再次解析,除非他们已经被更改。 默认情况下,Sass将会将这些缓存文件写到 :cache_location指定的文件系统中。如果你不能写入文件系统或者需要ruby进程或计算机共享缓存,那么你可以定义自己的缓存存储,并设置:cache_store选项。有关创建自定义缓存存储的详细信息,请查看源代码文档。

2.3. 自定义导入

Sass将导入主要负责获取路径传递给@import并找到这些路径相应的Sass将代码。默认情况下,这些代码是从文件系统中加载,但是Importers可以从数据库加载,通过HTTP,或者使用不同的文件命名方案,被添加到Sass将。

每个importer负责一个单独的加载路径(或任何相应的后端概念)。importer可以和普通的文件系统路径一起放置在:load_paths数组中。

当解析一个@import的时候,Sass将通过加载路径寻找importer来成功地导入路径。一旦被发现,该导入的文件就会被使用。

用户创建的导入必须继承自 Sass::Importers::Base。

results matching ""

    No results matching ""