Developing WordPress Themes with Modular Sass

Michael DeWitt

devdewitt.com

@devdewitt

Bones, sage, _s

What is Modular?

What is Sass?

//NESTING
.pricing-page {
    .link {
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

//CSS

.pricing-page .link {
    text-decoration: none;
}

.pricing-page .link:hover {
    text-decoration: underline;
}

//NESTING - .sass
.pricing-page
    .link
        text-decoration: none

        &:hover
            text-decoration: underline
   

.feature-page
    text-align: center

//CSS

.pricing-page .link {
    text-decoration: none;
}

.pricing-page .link:hover {
    text-decoration: underline;
}

.feature-page {
    text-align: center;
}

beware of over nesting!

2-3 levels deep is ideal.

//VARIABLES
$blue: #00f;
$black: #000;
$link-color: $blue;

.pricing-page {
    .link {
        color: $link-color;

        &:hover {
            color: $black;
        }
    }
}

//CSS

.pricing-page .link {
    color: #00f;
}
.pricing-page .link:hover {
    color: #000;
}

Change it once

change it everywhere

//Build some columns with interpolation
$columns: 4;

@for $i from 1 through $columns {
  .cols-#{$i} {
    width: ((100 / $columns) * $i) * 1%;
  }
}

//...The previous snippet would be compiled as:

.cols-1 {
  width: 25%;
}

.cols-2 {
  width: 50%;
}

.cols-3 {
  width: 75%;
}

.cols-4 {
  width: 100%;
}

Check out sass maps

//MIXINS
@mixin css-gradient($from: #dfdfdf, $to: #f8f8f8) {
	background-color: $to;
	background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
	background-image: -webkit-linear-gradient(top, $from, $to);
	background-image: -moz-linear-gradient(top, $from, $to);
	background-image: -o-linear-gradient(top, $from, $to);
	background-image: linear-gradient(to bottom, $from, $to);
}

.button {
    @include css-gradient($orange, $darkOrange);
}

//CSS

.button {
    background-color: #CF5615;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FB691A), to(#CF5615));
    background-image: -webkit-linear-gradient(top, #FB691A, #CF5615);
    background-image: -moz-linear-gradient(top, #FB691A, #CF5615);
    background-image: -o-linear-gradient(top, #FB691A, #CF5615);
    background-image: linear-gradient(to bottom, #FB691A, #CF5615);
}

bourbon.io/docs/

//FUNCTIONS

.button {
    @include css-gradient($orange, darken($orange, 10%));
}

//THREE SASS FEATURES, TIED TOGETHER

//EXTEND - create a module and customize it
%button {
    @include css-gradient(@orange, darken(@orange, 10%);
    color: @white;
    font-size: 0.75em;

    &:hover {
        @include css-gradient(@orange, darken(@orange, 20%);
    }
}

.big-button {
    @extend %button;
    font-size: 1em;
    padding: 1em;
}

@import "partials/normalize";

// Sass variables
@import "partials/variables";

// typography
@import "partials/typography";

// Sass functions
@import "partials/functions";

// import mixins
@import "partials/mixins";

// the grid
@import "partials/grid";

@media only screen and (min-width: 481px) {
	// styles in 481up.scss
	@import "breakpoints/481up";
} 

@media only screen and (min-width: 768px) {
	// styles in 768up.scss
	@import "breakpoints/768up";
}

@media only screen and (min-width: 1030px) {
	// styles in 1030up.scss
	@import "breakpoints/1030up";
} 

@media only screen and (min-width: 1240px) {
	// styles in 1240up.scss
	@import "breakpoints/1240up";
} 

Can Browsers Read Sass?

Compiling:

• WP-SCSS

• Native Ruby Gem

• COMPASS (CONFIG.RB)

• GULP/GRUNT

QUEStions