scss常用技巧

循环

@for $var from 1 through 4 {
  $dis: $var * 30;
  $dispx: $dis + px;
  .pd-tablist-#{$dis} {
    .pd-tablist__item {
      padding-left: $dispx;
    }
    .pd-tabbtn {
      padding-left: $dispx;
    }
  }
}

mixin

// pd focusable box
@mixin pd-focusable-box($init-dashed: false,  $color: null, $size: 1px ) {
  background-clip: border-box; //make sure bg is layed under border
  border-width: $size;
  border-style: dashed;
  border-color: if($init-dashed, var(--cip_system-color_base400), transparent);

  &.pd-boxhover {
    border-color: if($color, $color, var(--cip_system-color_primary900));
  }

  &.pd-focus {
    border-style: solid;
    border-color: var(--cip_system-color_primary900);
  }

  @content;
}
使用：
.pd-button {
    @include pd-focusable-box();
}

if

h2 {
    color: if( 1 + 1 == 2 , green, red);
}

变量

$color-base100: hsla(0, 0%, 100%, 1) !default;  //#ffffff
$color-base200: hsla(0, 0%, 98%, 1) !default;   //#fbfbfb
$color-base300: hsla(0, 0%, 94%, 1) !default;   //#f0f0f0
$color-base400: hsla(0, 0%, 89%, 1) !default;   //#e3e3e3
$color-base500: hsla(0, 0%, 78%, 1) !default;   //#c7c7c7
$color-base600: hsla(0, 0%, 58%, 1) !default;   //#949494
$color-base650: hsla(0, 0%, 47%, 1) !default;   //#777777
$color-base700: hsla(0, 0%, 38%, 1) !default;   //#616161
$color-base800: hsla(0, 0%, 25%, 1) !default;   //#404040
$color-base900: hsla(0, 0%, 12%, 1) !default;   //#1f1f1f
$color-base1000: hsla(0, 0%, 0%, 1) !default;   //#000000

使用
.pd-button {
    background: var($color-base1000);
}

函数

@function gap($step: 1, $curr: config.$font-size){
  $gap: config.$gap-base-unit * $step;
  @return math.div($gap, $curr) * 1rem;
}

使用
.pd-button {
    padding-rigth: gap(2)
}

继承 @extend

.pd-tabitem {
    display: flex;
    align-items: center;
    padding: 0px px2rem(15px);
    cursor: pointer;
}

.pd-tabbtn {
  @extend .pd-tabitem;
  color: var(--cip_system-color_base800);
  &__text {
    padding-left: px2rem(6px);
    font-size: var(--cip_font-size-px-lv2);
    line-height: 15px;
  }
}

这样pd-tabbtn这个类也拥有pd-tabitem的属性