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

 

作者: 博主

Talk is cheap, show me the code!

《Sass/Scss样式预处理的一些常用技巧》有2个想法

发表评论

电子邮件地址不会被公开。

Captcha Code