Sass 学习心得

[lbwa]

预编译目标格式.photo-#{list}

.author-bio .photo-adam {
  background: url("./img.png") no-repeat;
}
.author-bio .photo-john {
  background: url("./img.png") no-repeat;
}
.author-bio .photo-wynn {
  background: url("./img.png") no-repeat;
}
.author-bio .photo-mason {
  background: url("./img.png") no-repeat;
}
.author-bio .photo-jim {
  background: url("./img.png") no-repeat;
}

即形如.photo-#{list}的样子，一部分属性键名是个固定的，另一部分键名是某 list 中的某一个字符串。
Scss 文件为：

$list: adam john wynn mason jim // 列表
@mixin author-images {
  @each $author in $list {      // 循环列表每一项
    .photo-#{$author} {         // Scss 插值，#{ 插值内容 }
      background: url('./img.png') no-repeat
    }
  }
}

.author-bio {
  @include author-images;
}

以上方法的一个局限性是，要有另外一个类.author-bio来使用@include调用混合宏@mixin。

与@for、while循环相比，@for $i from <start> through <end> 是在一定的数值范围内进行循环；while是当@while 表达式中表达式为真时，就会执行代码块；@each 变量 in $list循环的是一个自定义list列表。

使用 map 管理变量

格式如下：

$social-colors: (
    dribble: #ea4c89,    // 以逗号分隔
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee     // 最后一对键值对没有逗号结尾
);

其中，格式类似于JSON的格式。该数据结构通过键名查找键值。该map结构的优势在于可集中管理变量，并后期可以很容易的添加或或删除变量数据。

map-get($map, $key) 获取数据

使用map-get($map, $key)来获取$map中$key的数据。若$map中不存在$key的数据。那么将不会编译该条 CSS，此时，并不会报错。为了防止这种情况，在调用map-get($map, $key)之前先使用map-has-key($map,$key)来检测对应值是否存在。

map-has-key($map,$key) 检测是否存在数据

map-has-key($map,$key) 检测是否存在$key数据，该函数返回一个布尔值，可在使用map-get($map, $key)之前添加一个检测判断以防止因没有对应$key数据，而不编译 CSS 的情况。

格式如下：

@if map-has-key($social-colors,facebook){  // 判断值是否否存在
    .btn-facebook {
        color: map-get($social-colors,facebook);
    }
} @else {
    @warn "No color found for facebook in $social-colors map."
}

为了简化检测值的代码，避免过多的 if 语句，可将判断封装在自定义函数中，代码如下：

@function colors($color) {
  @if not map-has-key($social-colors, $color){
    @warn "No color found for `$color` in $social-colors."
  }
  @return map-get($social-colors, $color)  // 返回调用的 map 函数，类似惰性加载机制
}

注：可能是在命令行的开头位置看见警告信息！

例如：

$ sass test1.scss --style expanded
WARNING: No color found for baby-color in $social-colors.
         on line 23 of test.scss, in `colors`
         from line 29 of test.scss

.btn-github {
  color: #171515;
}

map-keys($map) 结合 $list 使用

map-keys($map)返回$map中的所有 key，这些值赋予给一个变量。

示例为：

$list: map-keys($social-colors);

之前的自定义函数可修改为：

@function colors ($color) {
  $name: map-keys($social-colors);
  @if not index($name, $color) {  // 此处 index() 可替换为 @for 或 @each 
    @warn "#{$color} is not a valid color name.";
  }
  @return map-get($social-colors, $color);
}

与之前使用map-has-key($map, $key)的区别在于，使用map-keys($map)返回一个列表（取出所有 key ），是在该列表中查询是否存在对应 key ，而使用map-has-key($map, $key)是在map中查找对应 key 。

map-values($map)的用法与map-keys($map)相似，只是map-values($map)是取出所有的 value 值。

map-merge($map1, $map2) 合并两个 map

格式如下：

@new-map: map-merge($color, $color1);

其中，当map1和map2存在相同键名的值对，那么map2将覆盖map1的数据。

map-remove($map, $key) 删除某一 $key 得到新的 map

$map:map-remove($social-colors, key-of-remove-item);

注意，该方法返回的是一个新的 map 数据结构，对原结构不构成影响。

@import

Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixin 都可以在主文件中使用。

@media

Sass 中的 @media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面。

[lbwa]

集合属性和单个属性之间的兼容

在使用 mixin 时 宏内有缩写属性时，缩写属性将覆盖宏外部的属性。

如 mixin 中 background 属性是 background-image background-size background-repeat 等多个属性的缩写，
调用mixin 中的 background 属性时，将覆盖 mixin 外的这三个属性。

因此，在调用 mixin 后需要修改 mixin 中其中某一项特性下，不建议在 mixin 中包含要修改的项，因为在外部修改的值会被 mixin 中的值覆盖，最后表现为修改某属性失败。

本质是，集合属性的值会覆盖单个属性的值。如 background 会覆盖 background-color 的值。

[lbwa]

动态创建 @mixin 的内容

样式内容块可通过 @content 传递到 @mixin 的中的任何指定位置。

@mixin apply
  * html
    @content

@include apply
  #logo
    background-image: url('/logo/git')

notice：在 *.sass 语法中，可使用 = 代替 @mixin，+代替 @include。

示例代码等价于：

=apply
  * html
    @content

+apply
  #logo
    background-image: url('/logo.gif')

示例代码的最终编译结果是：

* html #logo {
  background-image: url('/logo.gif');
}

[lbwa]

Sass 中 类，函数，混入 三者的使用场景总结

1. 固定的样式 snippet 用 类 。

.hover-animation
  position: relative
  top: 0
  left: 0
  &:after
    position: absolute
    top: 100%
    left: 0
    width: 100%
    height: 2px
    margin-top: 5px
    background-color: rgba(255, 255, 255, 1)
    content: ' '
    opacity: 0
    transition: all .3s
    transform: translateY(10px)
  &:hover:after
  opacity: 1
  transform: translateY(0)

可能多次使用的样式 snippet 都可提取为 基础样式类。应尽量用多个基础类内 组合 最终样式。示例代码定义了一个元素被悬浮时产生动画的基础类。可在任意需要该动画的位置调用该类。避免了多次重复书写。

2. 根据特定规则得到样式值，使用 函数。

$grid-width: 1px
$gutter-width: 10px

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

#sidebar
  width: grid-width(5)

3. 在样式 snippet 中，内容是动态时，且需要动态的组成一个特定 snippet 时，使用 @mixin。

=apply
  * html
    @content

+apply
  #logo
    background-image: url('/logo.gif')

将得到：

* html
  #logo
    background-image: url('/logo.gif')

另外，@mixin 可将基础片段以 @include 的方式插入到任意的其他类的样式中。