zoukankan      html  css  js  c++  java
  • [SCSS] Reuse Styles with the SCSS @extend Directive

    We can write reusable styles with the SCSS @extend or @mixin directives. Which one is better? It depends. A better question is, how do they differ?
    Extends:
    change the source order, mixins don’t.
    maintain relationships, mixins don’t.
    share inherited traits, mixins don’t.
    can extend multiple classes, mixins don’t.
    can create multiple class declarations in the compiled CSS, mixins don’t.
    can use the placeholder selector, mixins don’t.

    Mixins:
    can accept arguments, extends don’t.
    can pass additional content, extends don’t.
    repeat code when compiled, extends group class names together.
    work well wIth media queries, extends have a limited interaction wIth media queries.

    In this lesson we learn about writing reusable styles with the @extend directive and how it compares to the @mixin directive.

    .base {
      color: red;
    
      &:hover {color: green}
      &::after {content: "?"}
    
      &-stuff {height: 5rem} // this will not be extended
    }
    
    .cool {height: 20rem}
    
    .new {
      width: 20px;
      // extend multi classes
      @extend .base, .cool;
    }
    
    /*
     It is possible to use placeholder
    */
    
    %base {
      color: red;
    }
    
    .new2 {
      @extend %base;
    }
    
    /*
      Placeholder for extend with mixin
    */
    %hero {background: linear-gradient(red, white, black)}
    %villain {background: darkred}
    
    @mixin character($type: hero) {
      height: 20px;
      width: 20px;
    
      @extend %#{$type} // #{} --> output a string
    }
    
    .doc-ock {@include character(villain)}
    
    
    /*
      Works with media query
    */
    @media screen and (min- 800px) {
      %buddy { color: purple; }
    }
    
    @media screen and (min- 800px) {
      .buddy {
        @extend %buddy;
      }
    }

    Reference to http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

  • 相关阅读:
    【数论】线性模方程
    【数论】拓展欧几里得
    BZOJ1433: [ZJOI2009]假期的宿舍
    BZOJ2823: [AHOI2012]信号塔
    BZOJ1088: [SCOI2005]扫雷Mine
    BZOJ1257: [CQOI2007]余数之和sum
    BZOJ1227: [SDOI2009]虔诚的墓主人
    BZOJ1856: [Scoi2010]字符串
    BZOJ1084: [SCOI2005]最大子矩阵
    BZOJ2007: [Noi2010]海拔
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6799442.html
Copyright © 2011-2022 走看看