Sass Tips

[evantianx]

@extend

避免重复书写样式。

<div class="error seriousError">
  Oh no! You've been hacked!
</div>

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

会被转换为:

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; 
}

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); 
}

.seriousError {
  border-width: 3px; 
}

也即任何运用在扩展的选择符上的样式及选择符，同样会被应用于被扩展选择符之上:

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

会被转换为:

.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold; 
}

为 Scss 中的某些数值变量添加单位

$value: 20;
$length: $value + px;

上述是我们一般做法，而且是有效的。然而当我们之后使用$length进行计算时，会抛出错误，原因在于+将$length转换为了字符串。

✅ 正确的做法:

$value: 20;
$length: $value + 0px;

或者

$value: 20;
$length: $value * 1px;

@at-root

用来保持良好的组织架构

.grandparent {
  .parent {
    @at-root body.index .child {
     //do something
    }
  }
}

会转换为:

body.index .child {
  //do something
}

[evantianx]

一些有用的 Mixin ／ Function

子元素居中

/**
 *  无需知道子元素或者父元素的宽度或高度实现绝对居中或某个方向居中
 *  @param: {boolean}  $horizontal  水平方向是否居中
 *  @param: {boolean}  $vertical 垂直方向是否居中
 *  两个参数默认均为 true, 即默认设置绝对居中    
 */
@mixin centerer($horizontal: true, $vertical: true) {
  position: absolute;
  @if ($horizontal and $vertical) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } @else if ($horizontal) {
    left: 50%;
    transform: translate(-50%, 0);
  } @else if ($vertical) {
    top: 50%;
    transform: translate(0, -50%);
  }
}

示例:

.parent {
  position: relative;
}

.child {
  @include centerer;
}

不同透明度的黑色／白色

@function black($opacity) {
  @return rgba(black, $opacity);
}

示例:

.half-black {
  background: black(0.5);
}

获取处于某个数值范围的数

这里获取指的是:

• 若处于范围内，则直接取该值;
• 不在范围内，则根据情况取边界值.

/// 将 $number 限制于 $min 和 $max 之间
/// @param {Number} $number  要验证的数值
/// @param {Number} $min  最小边界值
/// @param {Number} $max  最大边界值
/// @return {Number}
@function clamp($number, $min, $max) {
  @return min(max($number, $min), $max);
}

示例:

/// Opacity mixin
/// @param {Float} $value - 透明度值
/// @output 透明度样式
@mixin opacity($value) {
  $clamped-value: clamp($value, 0, 1);

  @if $value != $clamped-value {
    @warn "Mixin `opacity` needs a float; #{$value} given, clamped to #{$clamped-value}.";
  }

  opacity: $clamped-value;
}