自己学习sass的一些总结

·  阅读 50
  • 在sass中可以用$符号来给变量一个指定的值
    • example:
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
复制代码
  • sass的嵌套

    • example:
    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
    
      li { display: inline-block; }
    
      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }
    复制代码
  • 您不必将所有Sass都写在一个文件中。您可以根据需要将其拆分@use

    • example:
// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}
复制代码
  • mixin
    • example:
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }
复制代码
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
复制代码
  • 继承

    • example:
    /* This CSS will print because %message-shared is extended. */
    %message-shared {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    
    // This CSS won't print because %equal-heights is never extended.
    %equal-heights {
      display: flex;
      flex-wrap: wrap;
    }
    
    .message {
      @extend %message-shared;
    }
    
    .success {
      @extend %message-shared;
      border-color: green;
    }
    复制代码
分类:
前端
标签:
分类:
前端
标签: