Simple Extends Example (Sass Bites Podcast #3)

sass-simple-extends.css

/* CSS Output */

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

h2 {
  font-size: 2em;
  color: black;
  text-align: center;
  font-family: helvetica;
}

/* Example #1 */
.class-1 {
  background: red;
}

.class-2, .class-3 {
  background: green;
  text-decoration: underline;
}

.class-3 {
  background: orange;
}

/* Example #2 */
.my-title-class {
  font-size: 2em;
  color: green;
}
.my-title-class a {
  text-decoration: none;
  font-size: 0.6em;
  color: maroon;
}

.my-block {
  font-size: 0.9em;
  font-family: georgia;
}
.my-block p {
  font-size: 1.2em;
  color: green;
}
.my-block li {
  list-style: none;
  color: #999;
}

/* Example #3 */
.icon-mustache:before, .my-button:before,
.icon-pipe:before,
.my-other-button:before {
  font-family: "icon-font";
  display: inline-block;
}

.icon-mustache:before, .my-button:before {
  content: "\f100";
}

.icon-pipe:before, .my-other-button:before {
  content: "\f101";
}

.my-button:before {
  text-shadow: 2px 2px 2px blue;
  font-size: 4em;
}

sass-simple-extends.html

<!-- HTML Code -->

<div class="class-1"><h2>One</h2></div>
<div class="class-2"><h2>Two</h2></div>
<div class="class-3"><h2>Three</h2></div>
<div class="my-title-class"><a href="#">Four</a></div>
<div class="my-block"><p>Five</p></div>
<div class="my-block"><ul><li>Six</li><li>Seven</li><li>Eight</li></ul></div>

sass-simple-extends.sass

div
  display: inline-block
  width: 200px
  height: 200px

h2
  font-size: 2em
  color: black
  text-align: center
  font-family: helvetica

/* Example #1 */

%extend-1
  background: red

%extend-2
  background: green
  text-decoration: underline

%extend-3
  background: orange

.class-1
  @extend %extend-1

.class-2
  @extend %extend-2

.class-3
  @extend %extend-2
  @extend %extend-3

/* Example #2 */

%main-title
  font-size: 2em
  color: green
  a
    text-decoration: none
    font-size: 0.6em
    color: maroon

%main-copy
  font-size: 0.9em
  font-family: georgia
  p
    font-size: 1.2em
    color: green
  li
    list-style: none
    color: #999

.my-title-class
  @extend %main-title

.my-block
  @extend %main-copy

/* Example #3 */

.icon-mustache:before,
.icon-pipe:before
  font-family: "icon-font"
  display: inline-block

.icon-mustache:before
  content: "\f100"

.icon-pipe:before
  content: "\f101"

=icon-font($font-name)
  @extend .icon-#{$font-name}
  &:before
    @content

.my-button
  +icon-font(mustache)
    text-shadow: 2px 2px 2px blue
    font-size: 4em

.my-other-button
  +icon-font(pipe)

sass-simple-extends.scss

/* SCSS Code */ 

/* Simple Extends */
/* Courtsey of Sass Bites Podcast #3 */
/* https://www.youtube.com/watch?v=bdxhF-tNtS4 */
/* https://www.youtube.com/user/sassbites */ 
/* Caveat: @extends with NOT work with @media queries in the same way */
/* See the video above at around the 16:00 mark to see options when working with @media queries */

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

}
h2 {
  font-size: 2em;
  color: black;
  text-align: center;
  font-family: helvetica;
}

/* Example #1 */

%extend-1 {
  background: red;
}

%extend-2 {
  background: green;
  text-decoration: underline;
}

%extend-3 {
  background: orange;
}

.class-1 {
  @extend %extend-1;
}
.class-2 {
  @extend %extend-2;
}
.class-3 {
  @extend %extend-2;
  @extend %extend-3;
}

/* Example #2 */

%main-title {
  font-size: 2em;
  color: green;
  a {
    text-decoration: none;
    font-size: 0.6em;
    color: maroon;
  }
}

%main-copy{
  font-size: 0.9em;
  font-family: georgia;
  p {
    font-size: 1.2em;
    color: green;
  }
  li {
    list-style: none;
    color: #999;
  }
}

.my-title-class {
  @extend %main-title;
}

.my-block {
  @extend %main-copy;
}

/* Example #3 */

.icon-mustache:before,
.icon-pipe:before {
  font-family: "icon-font";
  display: inline-block;
}

.icon-mustache:before {
  content: "\f100";
}

.icon-pipe:before {
  content: "\f101";
}

@mixin icon-font($font-name) {
  @extend .icon-#{$font-name};
  &:before {
    @content;
  }
}

.my-button {
  @include icon-font(mustache) {
    text-shadow: 2px 2px 2px blue;
    font-size: 4em;
  };
}

.my-other-button {
  @include icon-font(pipe);
}

Simple Extends
Courtesy of Sass Bites Podcast #3
https://www.youtube.com/watch?v=bdxhF-tNtS4
https://www.youtube.com/user/sassbites