CSS Workshop

Made by Adam Kaplan and Stephanie Briones.

Why Sass?

At a high level, Sass is simply a CSS preprocessor thats provides more features than using plain CSS alone.

Setting up your directory structure

Partials are organzied by components, mixins, and settings.

components
  _normalize.scss
  _layout.scss
  _typography.scss
  _buttons.scss
  _code.scss
  _utilities.scss

_mixins.scss
_settings.scss

Create a primary stylesheet

The primary stylesheet main.scss allows you to keep everything nice and clean. The order is important because stylesheets read from top to bottom, and styles are applied on top of one another.

Sass supports multiline CSS comments with /* */ and single-line comments with //. This single-line comments won't appear in the CSS output. Learn more.

// Variables and mixins
@import "settings";
@import "mixins";

// Components
@import "components/normalize";
@import "components/layout";
@import "components/typography";
@import "components/buttons";
@import "components/code";

// Utilities
@import "components/utilities";

Build a settings file

The settings.scss partial contains all your variables and should not include any Sass that outputs CSS.

// Font Weights
$regular: 400;
$bold:    600;

// Body Font
$body-font: $regular 100%/1.5 "soleil", sans-serif;

// Header Font
$header-font: $bold 100%/1.25 "futura-pt", sans-serif;

// Colors
$primary-color: #4285f4;
$white:         #fff;
$light-gray:    #f7f7f7;
$gray:          #bbb;
$black:         #0b0e10;
$yellow:        #fff8dc;
$border-light:  #eee;
$border-dark:   #ddd;

// Primary Button Color
$primary-button:       $primary-color;
$primary-button-hover: darken($primary-color, 5%);

// Grid
$content-width: 40em;

// Medium screens
$medium: "(min-width: 40em)";

// Large screens
$large: "(min-width: 64em)";

// Z-index
$overlay-high: 9999;
$overlay-med:  9000;
$overlay-low:  8000;

Mobile first media queries

Introduce layout-specific rules only when you need them. Use min-width to layer complexity on your layout as the viewport widens. It’s easier to have all the media queries nested and nearby, rather than at the end of the stylesheet or in a separate document.

Read my guide to responsive design to learn more.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
<ul class="schedule">
  <li class="schedule__item">1</li>
  <li class="schedule__item">2</li>
  <li class="schedule__item">3</li>
  <li class="schedule__item">4</li>
  <li class="schedule__item">5</li>
  <li class="schedule__item">6</li>
</ul>
/* ==========================================================================
   Schedule Example
   ========================================================================== */

.schedule {
  @extend %clearfix;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Small screens (default) */
.schedule__item {
  @include prefix-property(border-radius, 6px);
  @include prefix-property(transition, background .5s);
  background: #e88370;
  border: 3px solid $white;
  color: $white;
  padding: .5em;
  text-align: center;

  /* Medium screens */
  @media #{$medium} {
    background: #e8bf70;
    float: left;
    width: 50%;
  }

  /* Large screens */
  @media #{$large} {
    background: #7099e8;
    width: 33.333%;
  }
}

DRY up with mixins

Mixins are one of Sass’s most powerful features. They allow re-use of styles without having to memorize or copy and paste them.

/* ==========================================================================
   Mixins
   ========================================================================== */

@mixin prefix-property($property, $value) {
  -webkit-#{$property}: $value;
  -moz-#{$property}: $value;
  -ms-#{$property}: $value;
  -o-#{$property}: $value;
  #{$property}: $value;
}

@mixin transition($arguments) {
  @include prefix-property(transition, $arguments);
}

@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schedule__item {
  @include ellipsis;
  @include prefix-property(border-radius, 6px);
  @include prefix-property(transition, .5s);
  background: #fb917e;
  color: $white;
  padding: .5em;
  text-align: center;
}

Eliminate repetitive CSS with extend

Sass brings a bunch of benefits over CSS like nesting and @extend, which we can use to make a better clearfix. @extend basically tells Sass that one selector should inherit the styles of another selector.

/* Clearfix created by Nicolas Gallagher */
%clearfix {
  *zoom: 1;

  &:before,
  &:after {
    content: " ";
    display: table;
  }

  &:after { clear: both; }
}

Sass supports the special placeholder selector %, a silent class, which only compiles to CSS until we use it, eliminating repetitive CSS! You can use these to replace the class/id selectors.

.row {
  @extend %clearfix;
  border: 1px solid #ddd;
  margin: 1em 0;
}

Resources