Simple Mixin Example (Sass Bites Podcast #2)

sass-simple-mixin.css

/* CSS Output */


/* Example 1 */
div {
  display: inline-block;
  width: 200px;
  height: 200px;
}

span {
  margin: 20px;
  position: relative;
  top: 40px;
  left: 40px;
  text-align: center;
  padding: 20px;
}

.yes {
  background: red;
  display: inline-block;
}

.no {
  background: blue;
}

.yes {
  color: black;
  font-size: 1em;
}

/* Example 2 */
.yes {
  background: red;
}

.no {
  background: blue;
}

.no {
  color: black;
  font-size: 1em;
}

sass-simple-mixin.sass

/* Sass Code */

/* General div/span styles */
div
  display: inline-block
  width: 200px
  height: 200px

span
  margin: 20px
  position: relative
  top: 40px
  left: 40px
  text-align: center
  padding: 20px

/* Example 1: Yes */
%yes-extend
  // yes background is red
  background: red
  display: inline-block

=my-mixin($value1, $value2: 1em, $value3: true)
  // if $value3:true, color will be red
  // if $value3:false, color will be blue
  color: $value1
  font-size: $value2
  @if $value3
    @extend %yes-extend
  @else
    @extend %no-extend

.yes
  +my-mixin(black)

/* Example 2: No Example */
%no-extend
  // no background color is blue
  background: blue

=my-mixin($value1, $value2: 1em, $value3: false)
  color: $value1
  font-size: $value2
  @if $value3
    @extend %yes-extend
  @else
    @extend %no-extend

.no
  +my-mixin(black)

sass-simple-mixin.scss

/* SCSS Code */

/* General div/span styles */
div {
  display: inline-block;
  width: 200px;
  height: 200px;

}
span {
  margin: 20px;
  position: relative;
  top: 40px;
  left: 40px;
  text-align: center;
  padding: 20px;
}

/* Example 1: Yes  */
%yes-extend {
  // yes background is red
  background: red;
  display: inline-block;
  
}
@mixin my-mixin($value1, $value2:1em, $value3:true) {
  // if $value3:true, color will be red
  // if $value3:false, color will be blue
  color: $value1;
  font-size: $value2;
  @if $value3 { @extend %yes-extend; }
  @else { @extend %no-extend; }
}
.yes {
  @include my-mixin(black);
}

/* Example 2: No Example */
%no-extend {
  // no background color is blue
  background: blue;
}
@mixin my-mixin($value1, $value2:1em, $value3:false) {
  color: $value1;
  font-size: $value2;
  @if $value3 { @extend %yes-extend; }
  @else { @extend %no-extend; }
}
.no {
  @include my-mixin(black);
}

sass-simple-mixn.html

<!-- Simple Mixin HTML Code -->

<div class="yes"><span>Yes</span></div>
<div class="no"><span>No</span></div>

Sass Bites Podcast #2
https://www.youtube.com/watch?v=yA647_8cUQI
https://www.youtube.com/user/sassbites