Sass / Scss 样式预处理的一些常用技巧

前言

现在，样式预处理语言已经成了前端进行页面布局编写样式的标配辅助工具，当前已经基本没人去手写纯 css 样式了，在众多样式预处理语言当中，Sass / Scss 及 Less 是最多人使用的样式预处理语言。本文主要是介绍使用 Sass 预处理的一些常用技巧。

使用 Sass 的一些常用技巧

一、@at-root 的使用可以让你突破所在的作用域

我们在编写 sass 时，一般是喜欢让 css 代码形成深度的树结构，但有时如果我们为了不想 sass 给我们生成的 css 样式层次太深（原则是不超过 3 层结构，如：.root .parents .children {color:red;}），想把特定的 css 样式与根节点脱离开来，此时，我们可以使用 Sass 的 @at-root 来实现我们想要的效果，顾名思义，at root 就是让生成的 css 代码以此节点为根节点，不受外层节点影响，但不影响你按树结构来书写 css 代码，sass 代码如下：

.root {
   @at-root .parents {
      .children {
         color: red;
      }
   }
}

其生成的 css 代码如下，.root 对其没有任何影响：

.parents {
    .children {
       color: red;
    }
}

二、使用 sass 的 mixin 及 for..from..through 循环快速生成简单的 bootstrap 栅格系统样式

此处结合 mixin 及 for..from..through 生成的简单 bootstrap 栅格系统样式算是 sass 使用的一个非常经典的例子，代码如下：

// References from: https://github.com/twbs/bootstrap
// Mixed by Nelson Kuang
$grid-columns: 12;
@mixin make-col($size, $columns: $grid-columns) {
  flex: 0 0 percentage($size / $columns);
  // Add a `max-width` to ensure content within each column does not blow out
  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  // do not appear to require this.
  max-width: percentage($size / $columns);
}
.row {
  display: flex;
}
.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

@for $i from 1 through $grid-columns {
  .col-#{$i} {
    @include make-col($i, $grid-columns);
  }
}

其生成的 css 代码如下:

.col-1 {
  flex: 0 0 8.33%;
  max-width: 8.333%;
}
.col-2 {
  flex: 0 0 16.666%;
  max-width: 16.666%;
}
/** 3, 4, ...等等 **/
.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

三、使用 each in 循环输出想要的样式

$blue_1: blue;
$blue_2: darkblue;
/** $green_1, $green_2, ...等等变量的定义 **/
@each $color, $start_value, $end_value in (blue, $blue_1, $blue_2), (green, $green_1, $green_2 ),(red, $red_1, $red_2),(yellow, $yellow_1, $yellow_2) {
    .bg_#{$color} {
         background: linear-gradient(to right, $start_value, $end_value); 
    }
}

其生成的 css 代码如下:

.bg_blue {
  background: linear-gradient(to right, blue, darkblue);
}
.bg_green {
  background: linear-gradient(to right, green, darkgreen);
}
/** ...等等 **/

四、移动端开发常用到的像素转 rem 单位

Rem 解决方案已经成为当前移动端开发必备的设备自适应方案，在 sass 中我们可以这样定义:

$mockup_width: 750 !default;           // PSD设计图模版宽度
@function px2rem( $px ){
	@return toFixed( $px * 10 / $mockup_width , 3 ) + rem;
}

/// Reference to https://css-tricks.com/snippets/sass/fix-number-n-digits/
/// toFixed() function in Sass
/// @author Hugo Giraudel
/// @param {Number} $float - Number to format
/// @param {Number} $digits [2] - Number of digits to leave
/// @return {Number}
@function toFixed($float, $digits: 2) {
  $sass-precision: 5;
  
  @if $digits > $sass-precision {
    @warn "Sass sets default precision to #{$sass-precision} digits, and there is no way to change that for now."
    + "The returned number will have #{$sass-precision} digits, even if you asked for `#{$digits}`."
    + "See https://github.com/sass/sass/issues/1122 for further informations.";
  }
  
  $pow: pow(10, $digits);
  @return round($float * $pow) / $pow;
}

/// Power function
/// @param {Number} $x
/// @param {Number} $n
/// @return {Number}
@function pow($x, $n) {
  $ret: 1;
    
  @if $n >= 0 {
    @for $i from 1 through $n {
      $ret: $ret * $x;
    } 
  } @else {
    @for $i from $n to 0 {
      $ret: $ret / $x;
    }
  }
  
  @return $ret;
}

在 sass 中使用方式如下：

    .container {
      position: relative;
      height: px2rem(100); // 调用上面定义的 px2rem 方法
      border-bottom: 1px solid #d6d6d6;
      background-color: #fbfbfb;
    }

五、文字超出用 … 表示的支持一到多行的经典 mixin

页面布局中经常会遇到这样的一个情况，要求单行不换行，超出文字用 … 表示；或者多行显示文字，超出文字用 … 表示。下面一个 mixin 搞定

@mixin ellipsis($clamp: 1){
    overflow: hidden;
    text-overflow: ellipsis;
    @if($clamp == 1){
        white-space: nowrap;
    }@else{
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: $clamp;
        -webkit-box-orient: vertical;
    }
}

六、其他一些常用的 mixin

// 定位上下左右居中
@mixin center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// 定位上下居中
@mixin centerV {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

// 定位左右居中
@mixin centerH {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

// 宽高
@mixin wh($width, $height){
	width: $width;
	height: $height;
}

// 宽高顶位置左位置
@mixin whtl($width, $height, $top, $left){
	width: $width;
	height: $height;
	top: $top;
	left: $left;
}

// 宽高顶位置右位置
@mixin whtr($width, $height, $top, $right){
	width: $width;
	height: $height;
	top: $top;
	right: $right;
}

// 宽高底位置左位置
@mixin whbl($width, $height, $bottom, $left){
	width: $width;
	height: $height;
	bottom: $bottom;
	left: $left;
}

// 宽高底位置右位置
@mixin whbr($width, $height, $bottom, $right){
	width: $width;
	height: $height;
	bottom: $bottom;
	right: $right;
}

// 字体大小、行高、字体
@mixin font($size, $line-height, $family: 'Microsoft YaHei') {
	font: #{$size}/#{$line-height} $family;
}

// 字体大小，颜色
@mixin sc($size, $color){
	font-size: $size;
	color: $color;
}

// 背景图片 bg img stretch
@mixin bis($url) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

// 移动端1像素底边
@mixin borderBottom($color) {
  position: relative;

  &::after {
    /* 其他的也类似 */
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    transform: scale(1, .5);
    transform-origin: 0 bottom;
    background-color: $color;
  }
}

// 移动端1像素顶边
@mixin borderTop($color) {
  position: relative;

  &::before {
    /* 其他的也类似 */
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform: scale(1, .5);
    transform-origin: 0 top;
    background-color: $color;
    z-index: 2;
  }
}