html Sass mixin / extend /占位符比较

Posted 2021-05-11

<!-- Regular CSS: you have to use .button and .button_primary to get things to work -->
<a href="#" class="button">.button</a>

<a href="#" class="button button_primary">.button .button_primary</a>

<div class="output">
  <h5>Output</h5>
  <img src="http://elyseholladay.com/gdi/sass/output1.jpg">
</div>





<!-- Include with Sass: there is no button2 class to include. you use the class of the button type and @include .button2 in the SASS  -->
<a href="#" class="button2">button2 (mixin)</a>

<a href="#" class="button2_primary">.button2_primary @include button2</a>




<div class="output">
  <h5>Output</h5>
<img src="http://elyseholladay.com/gdi/sass/output2.jpg">
</div>



<!-- Extend with Sass: don't have to use .button3 class AND .button3_primary, but in the output  -->
<a href="#" class="button3">.button3</a>

<a href="#" class="button3_primary">.button3_primary @extend .button3</a>



<div class="output">
  <h5>Output</h5>
<img src="http://elyseholladay.com/gdi/sass/output3.jpg">
</div>



<!-- %Extend with Sass: don't have to use .button3 class AND .button3_primary, but in the output  -->
<a href="#" class="button4">%button4</a>

<a href="#" class="button4_primary">.button4_primary @extend %button4</a>
  
  
<div class="output">
  <h5>Output</h5>
<img src="http://elyseholladay.com/gdi/sass/output4.jpg">
</div>

.button {
  display: inline-block;
  padding: 6px 10px;
  text-transform: uppercase;
  margin-right: 10px;
  cursor: pointer;
  font-family: "Proxima Nova", Arial, san-serif;
  text-decoration: none;
  border: 2px solid black;
}
.button.button_primary {
  background: #c21a01;
  border-color: #9f111b;
  color: white;
}

.button2_primary {
  display: inline-block;
  padding: 6px 10px;
  text-transform: uppercase;
  margin-right: 10px;
  cursor: pointer;
  font-family: "Proxima Nova", Arial, san-serif;
  text-decoration: none;
  border: 2px solid black;
  background: #5dade2;
  border-color: #2980b9;
  color: white;
}

.button3, .button3_primary {
  display: inline-block;
  padding: 6px 10px;
  text-transform: uppercase;
  margin-right: 10px;
  cursor: pointer;
  font-family: "Proxima Nova", Arial, san-serif;
  text-decoration: none;
  border: 2px solid black;
}

.button3_primary {
  background: #601848;
  border-color: #300030;
  color: white;
}

.button4_primary {
  display: inline-block;
  padding: 6px 10px;
  text-transform: uppercase;
  margin-right: 10px;
  cursor: pointer;
  font-family: "Proxima Nova", Arial, san-serif;
  text-decoration: none;
  border: 2px solid black;
}

.button4_primary {
  background: #fabe28;
  border-color: #ff8a00;
  color: white;
}

.output {
  clear: both;
  width: 300px;
  margin: 2em;
  font-family: "Proxima Nova", Arial, san-serif;
}

h5 {
  font-size: 20px;
  text-transform: uppercase;
}

// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// ----

// REGULAR CSS/Sass
// a button needs both classes .button and .button_primary for things to work
.button
    display: inline-block
    padding: 6px 10px
    text-transform: uppercase
    margin-right: 10px
    cursor: pointer
    font-family: "Proxima Nova", Arial, san-serif
    text-decoration: none
    border: 2px solid black

    // primary button defines the color/style
    // &. means it will only apply if .button is ALSO there
    &.button_primary
        background: #C21A01
        border-color: #9F111B
        color: #fff
          
          
          
          
// INCLUDE
// .button2 isn't a class that can be applied on its own, but is a mixin that can ONLY be @included 
@mixin button2
    display: inline-block
    padding: 6px 10px
    text-transform: uppercase
    margin-right: 10px
    cursor: pointer
    font-family: "Proxima Nova", Arial, san-serif
    text-decoration: none
    border: 2px solid black

// not nested because button2 is a mixin, not a class. must include button2 or the button2 styles won't apply
.button2_primary
    @include button2
    background: #5dade2
    border-color: #2980B9
    color: #fff
      
      

      
// EXTEND
// .button3 is a class that can be applied, or if it isn't, you can @extend it
.button3
    display: inline-block
    padding: 6px 10px
    text-transform: uppercase
    margin-right: 10px
    cursor: pointer
    font-family: "Proxima Nova", Arial, san-serif
    text-decoration: none
    border: 2px solid black

// here you @extend .button3 and only have class .button3_primary in the HTML
.button3_primary
    @extend .button3
    background: #601848
    border-color: #300030
    color: #fff
      
      
      
      
// %extend
// like a mixin, %button4 isn't a class that can be applied on its own, but notice the difference in output
%button4
    display: inline-block
    padding: 6px 10px
    text-transform: uppercase
    margin-right: 10px
    cursor: pointer
    font-family: "Proxima Nova", Arial, san-serif
    text-decoration: none
    border: 2px solid black
      
// primary button, not nested, using a placeholder
.button4_primary
    @extend %button4
    background: #FABE28
    border-color: #FF8A00
    color: #fff

    
    
    
    
    
    
.output
    clear: both
    width: 300px
    margin: 2em
    font-family: "Proxima Nova", Arial, san-serif

h5
    font-size: 20px
    text-transform: uppercase
    
    
    

<!-- Regular CSS: you have to use .button and .button_primary to get things to work -->
<a href="#" class="button">.button</a>

<a href="#" class="button button_primary">.button .button_primary</a>

<div class="output">
  <h5>Output</h5>
  <img src="http://elyseholladay.com/gdi/sass/output1.jpg">
</div>





<!-- Include with Sass: there is no button2 class to include. you use the class of the button type and @include .button2 in the SASS  -->
<a href="#" class="button2">button2 (mixin)</a>

<a href="#" class="button2_primary">.button2_primary @include button2</a>




<div class="output">
  <h5>Output</h5>
<img src="http://elyseholladay.com/gdi/sass/output2.jpg">
</div>



<!-- Extend with Sass: don't have to use .button3 class AND .button3_primary, but in the output  -->
<a href="#" class="button3">.button3</a>

<a href="#" class="button3_primary">.button3_primary @extend .button3</a>



<div class="output">
  <h5>Output</h5>
<img src="http://elyseholladay.com/gdi/sass/output3.jpg">
</div>



<!-- %Extend with Sass: don't have to use .button3 class AND .button3_primary, but in the output  -->
<a href="#" class="button4">%button4</a>

<a href="#" class="button4_primary">.button4_primary @extend %button4</a>
  
  
<div class="output">
  <h5>Output</h5>
<img src="http://elyseholladay.com/gdi/sass/output4.jpg">
</div>