zoukankan      html  css  js  c++  java
  • [Sass] Level 4: Extend -- Ex

    Better use @extend with % placeholder.

    Extend is useful when you want to reuse some of you class. Always use % placeholder.

    EXTEND I

    It looks like .blueprint and .surveyor have a number of matching properties. Add an @extendto .surveyor to make this section more efficient.

    .blueprint {
      background: blue;
      border-radius: 5px;
      margin-bottom: 15px;
      padding: 10px;
    }
    .surveyor {
      background: blue;
      border-radius: 5px;
      color: #fff;
      margin-bottom: 15px;
      padding: 10px;
    }

    Answer:

    .blueprint {
      background: blue;
      border-radius: 5px;
      margin-bottom: 15px;
      padding: 10px;
    }
    .surveyor {
        @extend .blueprint;
      color: #fff;
    }

    NESTED EXTEND

    The developers are using .notice in some places of the application, .error in others, and are unable to only use one or the other. Extend the .notice styles into an .error declaration.

    .notice {
      background: yellow;
      border: 5px solid #000;
      padding: 20px;
      &.alert {
        background: red;
        box-shadow: 0 0 10px red;
      }
      a {
        color: #222;
        &:hover {
          color: #313131;
        }
      }
    }

    Answer:

    .notice {
      background: yellow;
      border: 5px solid #000;
      padding: 20px;
      &.alert {
        background: red;
        box-shadow: 0 0 10px red;
      }
      a {
        color: #222;
        &:hover {
          color: #313131;
        }
      }
    }
    .error {
      @extend .notice;
    }

    EXTEND III

    Some of the CSS copied over originally contains already-combined selectors. Refactor the segment below to make use of extend on .socket instead, in case we need to add elements later.

    .socket,
    .wrench,
    .bolt {
      border-radius: 50%;
      padding: 15px;
      width: 30px;
    }
    .wrench {
      width: 100px;
    }
    .bolt {
      padding: 14px;
    }

    Answer:

    .socket {
      border-radius: 50%;
      padding: 15px;
      width: 30px;
    }
    .wrench {
      @extend .socket;
      width: 100px;
    }
    .bolt {
      @extend .socket;
      padding: 14px;
    }

    PLACEHOLDER SELECTOR I

    .group (commonly referred to as clearfix) is used throughout our application for clearing floats. To keep use of this relegated to our styles rather than allowing .group to be added as a class, convert .group over to a placeholder selector and update the extend inside .factory.

    .group {
      zoom: 1;
      &:before,
      &:after {
        content: '';
        display: table;
      }
      &:after {
        clear: both;
      }
    }
    
    .factory {
      @extend .group;
      background: #fff;
    }

    Answer:

    %group {
      zoom: 1;
      &:before,
      &:after {
        content: '';
        display: table;
      }
      &:after {
        clear: both;
      }
    }
    
    .factory {
      @extend %group;
      background: #fff;
    }

    PLACEHOLDER SELECTOR II

    Whoops - we've discovered an alteration to .blueprint later in our stylesheet, and extending.blueprint with .surveyor is creating extra selectors in .factory that aren't needed. Create a placeholder selector called container to hold the shared properties and extend it with.blueprint and .surveyor to remove the extra .factory .surveyor selector.

    .blueprint {
      background: blue;
      border-radius: 5px;
      margin-bottom: 15px;
      padding: 10px;
    }
    .surveyor {
      @extend .blueprint;
      color: #fff;
    }
    
    .factory {
      background: #fff;
      .blueprint {
        margin-bottom: 20px;
      }
    }

    Answer:

    %container{ 
      background: blue;
      border-radius: 5px;
      margin-bottom: 15px;
      padding: 10px;
    }
    
    .blueprint {
        @extend %container;
    }
    .surveyor {
      @extend %container;
      color: #fff;
    }
    
    .factory {
      background: #fff;
      .blueprint {
        margin-bottom: 20px;
      }
    }
  • 相关阅读:
    json数组去重
    java socket API
    java网络编程精解demo1---读取用户控制台的输入的数据并显示
    【CodeForces 489A】SwapSort
    【CSU 1556】Pseudoprime numbers
    【CodeForces 472A】Design Tutorial: Learn from Math
    【CodeForces 605A】BUPT 2015 newbie practice #2 div2-E
    【UVALive 3905】BUPT 2015 newbie practice #2 div2-D-3905
    【HDU 4925】BUPT 2015 newbie practice #2 div2-C-HDU 4925 Apple Tree
    【UVA 401】BUPT 2015 newbie practice #2 div2-B-Palindromes
  • 原文地址:https://www.cnblogs.com/Answer1215/p/3976225.html
Copyright © 2011-2022 走看看