SASS - 图1

注释

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

    变量

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

  1. $primary-color: #cf449c;

作用域

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

  1. // 编译前
  2. #main {
  3.   $width: 5px !global;
  4.   width: $width;
  5. }
  7. #sidebar {
  8.   width: $width;
  9. }
  11. // 编译后
  12. #main {
  13.   width: 5px;
  14. }
  16. #sidebar {
  17.   width: 5px;
  18. }

默认值

变量已赋值

  1. // 编译前
  2. $primary-color: #000;
  3. $primary-color: #cf449c !default;
  5. #main {
  6.   color: $primary-color;
  7. }
  9. // 编译后
  10. #main {
  11.   color: #000;
  12. }

变量未赋值

  1. // 编译前
  2. $primary-color: null;
  3. $primary-color: #cf449c !default;
  5. #main {
  6.   color: $primary-color;
  7. }
  9. // 编译后
  10. #main {
  11.   color: #cf449c;
  12. }

嵌套

  1. // 编译前
  2. .popupBody {
  3.   padding: 0 24px 70px 24px;
  4.   .popupBody-lib {
  5.     padding: 40px;
  6.     background: #ffffff;
  7.     border-radius: 16px;
  8.     border: 1px solid #f2f2f2;
  9.     margin-bottom: 25px;
  10.   }
  12.   .popupBody-img {
  13.     width: 32px;
  14.     height: 32px;
  15.     margin-right: 10px;
  16.   }
  17. }
  19. // 编译后
  20. .popupBody {
  21.   padding: 0 24px 70px 24px;
  22. }
  23. .popupBody .popupBody-lib {
  24.   padding: 40px;
  25.   background: #ffffff;
  26.   border-radius: 16px;
  27.   border: 1px solid #f2f2f2;
  28.   margin-bottom: 25px;
  29. }
  30. .popupBody .popupBody-img {
  31.   width: 32px;
  32.   height: 32px;
  33.   margin-right: 10px;
  34. }

父选择器：&

同级

  1. // 编译前
  2. .popupBody {
  3.   padding: 0 24px 70px 24px;
  4.   &-lib {
  5.     padding: 40px;
  6.     background: #ffffff;
  7.     border-radius: 16px;
  8.     border: 1px solid #f2f2f2;
  9.     margin-bottom: 25px;
  10.   }
  12.   &-img {
  13.     width: 32px;
  14.     height: 32px;
  15.     margin-right: 10px;
  16.   }
  17. }
  19. // 编译后
  20. .popupBody {
  21.   padding: 0 24px 70px 24px;
  22. }
  23. .popupBody-lib {
  24.   padding: 40px;
  25.   background: #ffffff;
  26.   border-radius: 16px;
  27.   border: 1px solid #f2f2f2;
  28.   margin-bottom: 25px;
  29. }
  30. .popupBody-img {
  31.   width: 32px;
  32.   height: 32px;
  33.   margin-right: 10px;
  34. }

子级

  1. // 编译前
  2. .popupBody {
  3.   padding: 0 24px 70px 24px;
  4.   #{&}-lib {
  5.     padding: 40px;
  6.     background: #ffffff;
  7.     border-radius: 16px;
  8.     border: 1px solid #f2f2f2;
  9.     margin-bottom: 25px;
  10.   }
  12.   #{&}-img {
  13.     width: 32px;
  14.     height: 32px;
  15.     margin-right: 10px;
  16.   }
  17. }
  19. // 编译后
  20. .popupBody {
  21.   padding: 0 24px 70px 24px;
  22. }
  23. .popupBody .popupBody-lib {
  24.   padding: 40px;
  25.   background: #ffffff;
  26.   border-radius: 16px;
  27.   border: 1px solid #f2f2f2;
  28.   margin-bottom: 25px;
  29. }
  30. .popupBody .popupBody-img {
  31.   width: 32px;
  32.   height: 32px;
  33.   margin-right: 10px;
  34. }

属性嵌套

  1. // 编译前
  2. .wrap {
  3.   font: {
  4.     family: fantasy;
  5.     size: 30px;
  6.     weight: bold;
  7.   }
  8. }
  10. // 编译后
  11. .wrap {
  12.   font-family: fantasy;
  13.   font-size: 30px;
  14.   font-weight: bold;
  15. }

嵌套 @import

  1. // 编译前
  3. // example.scss
  4. .popupBody-lib {
  5.   padding: 40px;
  6.   background: #ffffff;
  7.   border-radius: 16px;
  8.   border: 1px solid #f2f2f2;
  9.   margin-bottom: 25px;
  10. }
  13. // index.scss
  14. .popupBody {
  15.   padding: 0 24px 70px 24px;
  16.   @import "./example";
  17.   .popupBody-img {
  18.     width: 32px;
  19.     height: 32px;
  20.     margin-right: 10px;
  21.   }
  22. }
  24. // 编译后
  25. .popupBody {
  26.   padding: 0 24px 70px 24px;
  27. }
  28. .popupBody .popupBody-lib {
  29.   padding: 40px;
  30.   background: #ffffff;
  31.   border-radius: 16px;
  32.   border: 1px solid #f2f2f2;
  33.   margin-bottom: 25px;
  34. }
  35. .popupBody .popupBody-img {
  36.   width: 32px;
  37.   height: 32px;
  38.   margin-right: 10px;
  39. }

占位符选择器：%

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

  1. // 编译前
  2. .wrap {
  3.   background: #fff;
  4.   %title {
  5.     font: {
  6.       family: fantasy;
  7.       size: 30px;
  8.       weight: bold;
  9.     }
  10.   }
  11. }
  12. .wrap-title {
  13.   @extend %title;
  14. }
  16. // 编译后
  17. .wrap {
  18.   background: #fff;
  19. }
  20. .wrap .wrap-title {
  21.   font-family: fantasy;
  22.   font-size: 30px;
  23.   font-weight: bold;
  24. }

@mixin

  1. // 编译前
  2. @mixin font {
  3.   font: {
  4.     family: fantasy;
  5.     size: 30px;
  6.     weight: bold;
  7.   }
  8. }
  10. .wrap {
  11.   background: #fff;
  12.   @include font;
  13. }
  15. // 编译后
  16. .wrap {
  17.   background: #fff;
  18.   font-family: fantasy;
  19.   font-size: 30px;
  20.   font-weight: bold;
  21. }

传参

单个

  1. // 编译前
  2. @mixin ellipsis($line) {
  3.   overflow: hidden;
  4.   text-overflow: ellipsis;
  5.   display: -webkit-box;
  6.   -webkit-line-clamp: $line;
  7.   -webkit-box-orient: vertical;
  8. }
  9. .wrap {
  10.   @include ellipsis(2);
  11. }
  13. // 编译后
  14. .wrap {
  15.   overflow: hidden;
  16.   text-overflow: ellipsis;
  17.   display: -webkit-box;
  18.   -webkit-line-clamp: 2;
  19.   -webkit-box-orient: vertical;
  20. }

多个

  1. // 编译前
  2. @mixin hue($color, $background, $border) {
  3.   color: $color;
  4.   border: 1px solid $border;
  5.   background-color: $background;
  6. }
  7. .wrap {
  8.   @include hue($background: #fff, $color: red, $border: red);
  9. }
  11. // 编译后
  12. .wrap {
  13.   color: red;
  14.   border: 1px solid red;
  15.   background-color: #fff;
  16. }
  1. // 编译前
  2. @mixin box-shadow($shadows...) {
  3.   box-shadow: $shadows;
  4. }
  5. .wrap {
  6.   @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
  7. }
  9. // 编译后
  10. .wrap {
  11.   box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  12. }

案例-换肤

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

  • css in js
  • 写一套css，然后传值给后台，由后台生成整套的css进行替换（ant，element）
  1. @import "./skin-variable.scss";
  3. @mixin themeify {
  4.     @each $theme-name, $theme-map in $themes {
  5.         $theme-map: $theme-map !global;
  6.         [data-theme="#{$theme-name}"] & {
  7.             @content;
  8.         }
  9.     }
  10. }
  12. @function themed($key) {
  13.     @return map-get($theme-map, $key);
  14. }
  16. @mixin background_color($color) {
  17.     @include themeify {
  18.         background: themed($color) or rgba($color: #ffffff, $alpha: 0.2) !important;
  19.     }
  20. }
  22. @mixin btnStyle($bg, $color) {
  23.     @include themeify {
  24.         background: themed($bg) !important;
  25.         color: themed($color) !important;
  26.     }
  27. }
  29. @mixin colorm($color) {
  30.     @include themeify {
  31.         color: themed($color) or #ffffff !important;
  32.     }
  33. }
  35. @mixin border($color) {
  36.     @include themeify {
  37.         border: 1px solid themed($color) or #ffffff !important;
  38.     }
  39. }