Chendi Wu

Appearance

image.png

注释 ​

  • 标准的CSS注释 /_ xxx _/ ，会保留到编译后的文件。
  • 单行注释 // xxx，只保留在SASS源文件中，编译后被省略。

变量 ​

scss认为中划线和下划线是完全相等的 $primary-color === $primary_color

less
$primary-color: #cf449c;

作用域 ​

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。 将局部变量转换为全局变量可以添加 !global

less
// 编译前
#main {
  $width: 5px !global;
  width: $width;
}

#sidebar {
  width: $width;
}

// 编译后
#main {
  width: 5px;
}

#sidebar {
  width: 5px;
}

默认值 ​

变量已赋值 ​

less
// 编译前
$primary-color: #000;
$primary-color: #cf449c !default;

#main {
  color: $primary-color;
}

// 编译后
#main {
  color: #000;
}

变量未赋值 ​

less
// 编译前
$primary-color: null;
$primary-color: #cf449c !default;

#main {
  color: $primary-color;
}

// 编译后
#main {
  color: #cf449c;
}

嵌套 ​

less
// 编译前
.popupBody {
  padding: 0 24px 70px 24px;
  .popupBody-lib {
    padding: 40px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #f2f2f2;
    margin-bottom: 25px;
  }

  .popupBody-img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }
}

// 编译后
.popupBody {
  padding: 0 24px 70px 24px;
}
.popupBody .popupBody-lib {
  padding: 40px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f2f2f2;
  margin-bottom: 25px;
}
.popupBody .popupBody-img {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

父选择器：& ​

同级 ​

less
// 编译前
.popupBody {
  padding: 0 24px 70px 24px;
  &-lib {
    padding: 40px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #f2f2f2;
    margin-bottom: 25px;
  }

  &-img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }
}

// 编译后
.popupBody {
  padding: 0 24px 70px 24px;
}
.popupBody-lib {
  padding: 40px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f2f2f2;
  margin-bottom: 25px;
}
.popupBody-img {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

子级 ​

less
// 编译前
.popupBody {
  padding: 0 24px 70px 24px;
  #{&}-lib {
    padding: 40px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #f2f2f2;
    margin-bottom: 25px;
  }

  #{&}-img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }
}

// 编译后
.popupBody {
  padding: 0 24px 70px 24px;
}
.popupBody .popupBody-lib {
  padding: 40px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f2f2f2;
  margin-bottom: 25px;
}
.popupBody .popupBody-img {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

属性嵌套 ​

less
// 编译前
.wrap {
  font: {
    family: fantasy;
    size: 30px;
    weight: bold;
  }
}

// 编译后
.wrap {
  font-family: fantasy;
  font-size: 30px;
  font-weight: bold;
}

嵌套 @import ​

less
// 编译前

// example.scss
.popupBody-lib {
  padding: 40px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f2f2f2;
  margin-bottom: 25px;
}

// index.scss
.popupBody {
  padding: 0 24px 70px 24px;
  @import './example';
  .popupBody-img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }
}

// 编译后
.popupBody {
  padding: 0 24px 70px 24px;
}
.popupBody .popupBody-lib {
  padding: 40px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f2f2f2;
  margin-bottom: 25px;
}
.popupBody .popupBody-img {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

占位符选择器：% ​

当占位符选择器单独使用时（未通过 @extend 调用），不会编译到 CSS 文件中；方便定义样式的重复使用

less
// 编译前
.wrap {
  background: #fff;
  %title {
    font: {
      family: fantasy;
      size: 30px;
      weight: bold;
    }
  }
}
.wrap-title {
  @extend %title;
}

// 编译后
.wrap {
  background: #fff;
}
.wrap .wrap-title {
  font-family: fantasy;
  font-size: 30px;
  font-weight: bold;
}

@mixin ​

less
// 编译前
@mixin font {
  font: {
    family: fantasy;
    size: 30px;
    weight: bold;
  }
}

.wrap {
  background: #fff;
  @include font;
}

// 编译后
.wrap {
  background: #fff;
  font-family: fantasy;
  font-size: 30px;
  font-weight: bold;
}

传参 ​

单个 ​

less
// 编译前
@mixin ellipsis($line) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}
.wrap {
  @include ellipsis(2);
}

// 编译后
.wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

多个 ​

less
// 编译前
@mixin hue($color, $background, $border) {
  color: $color;
  border: 1px solid $border;
  background-color: $background;
}
.wrap {
  @include hue($background: #fff, $color: red, $border: red);
}

// 编译后
.wrap {
  color: red;
  border: 1px solid red;
  background-color: #fff;
}
less
// 编译前
@mixin box-shadow($shadows...) {
  box-shadow: $shadows;
}
.wrap {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

// 编译后
.wrap {
  box-shadow:
    0px 4px 5px #666,
    2px 6px 10px #999;
}

案例-换肤 ​

以前写的一个换肤，但是这种不推荐，自定义程度太低，需要大量重新设计。 推荐：

  • css in js
  • 写一套css，然后传值给后台，由后台生成整套的css进行替换（ant，element）
less
@import './skin-variable.scss';

@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    $theme-map: $theme-map !global;
    [data-theme='#{$theme-name}'] & {
      @content;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}

@mixin background_color($color) {
  @include themeify {
    background: themed($color) or rgba($color: #ffffff, $alpha: 0.2) !important;
  }
}

@mixin btnStyle($bg, $color) {
  @include themeify {
    background: themed($bg) !important;
    color: themed($color) !important;
  }
}

@mixin colorm($color) {
  @include themeify {
    color: themed($color) or #ffffff !important;
  }
}

@mixin border($color) {
  @include themeify {
    border: 1px solid themed($color) or #ffffff !important;
  }
}