Lunch & Learn: Sass

lunchnlearn.css

/* Standard CSS comments are included in the output */
input[type="text"], input[type="password"], input[type="email"] {
  padding: 3px 5px;
  line-height: 20px;
}

/* Nesting is useful for grouping related rules, and reducing redundancy */
.fancy-list {
  border: 1px solid black;
}
.fancy-list .row {
  padding: 2px 4px;
}
.fancy-list .row, .fancy-list .row p {
  font-size: 12px;
}
.fancy-list .row.compact {
  font-size: 11px;
}
.sidebar .fancy-list .row {
  padding: 1px;
}
.fancy-list .row input[type="text"], .fancy-list .row input[type="password"], .fancy-list .row input[type="email"] {
  line-height: 18px;
}
.fancy-list .row input[type="checkbox"] {
  margin-right: 5px;
}
.fancy-list .row p, .fancy-list .row div {
  margin: 12px 0;
}
.fancy-list .row a {
  color: #336699;
}
.fancy-list .row a:hover {
  color: #4477aa;
}

/*
  Watch what happens with deeply nested blocks.
  These selectors are needlessly specific.
  This slows down the CSS parser, and makes these rules more difficult to override.
*/
#main .sidebar .fancy-list .row .heading a,
#main .sidebar .fancy-list .row .heading span,
#main .sidebar .fancy-list .row .cell a,
#main .sidebar .fancy-list .row .cell span {
  color: #369;
}
#main .sidebar .fancy-list .row .heading a:hover,
#main .sidebar .fancy-list .row .heading span:hover,
#main .sidebar .fancy-list .row .cell a:hover,
#main .sidebar .fancy-list .row .cell span:hover {
  color: #4477aa;
}

/* Mixin Example */
.heading {
  background-image: -moz-linear-gradient(0, white 0%, #eeeeee 100%);
  background-image: -webkit-linear-gradient(0, white 0%, #eeeeee 100%);
  background-image: linear-gradient(-90deg, white 0%, #eeeeee 100%);
}
.heading a {
  text-shadow: 0 1px 0 #999;
}
.heading a:hover {
  text-shadow: 0 1px 3px #999999;
}

.button {
  background-color: #555555;
}
.button.disabled {
  background-color: #3b3b3b;
}

/* Loops are useful for writing a series of styles */
.tree-depth-1 {
  padding-left: 10px;
}

.tree-depth-2 {
  padding-left: 20px;
}

.tree-depth-3 {
  padding-left: 30px;
}

.tree-depth-4 {
  padding-left: 40px;
}

.tree-depth-5 {
  padding-left: 50px;
}

.modal-background {
  background-color: rgba(0, 0, 0, 0.65);
}

.button {
  border: 1px solid #555;
  -webkit-transition: -webkit-transform 0.2, border 0.2s;
  -moz-transition: -moz-transform 0.2, border 0.2s;
  transition: transform 0.2, border 0.2s;
}

lunchnlearn.scss

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

// There are two styles of comments
// This style will be omitted from the output
/* Standard CSS comments are included in the output */


// ----- Variables -----
// Pretty straightforward. They can contain any valid CSS value.

$link-text-color: #369;
$link-text-color-hover: #47A;

$body-text-size: 12px;

// String variables can be used for frequently used selectors:
$textFields: 'input[type="text"], input[type="password"], input[type="email"]';

#{$textFields} {
  padding: 3px 5px;
  line-height: 20px;
}


// ----- Nesting -----
/* Nesting is useful for grouping related rules, and reducing redundancy */

.fancy-list {
  border: 1px solid black;

  .row {
    padding: 2px 4px;

    &, p { font-size: 12px }

    // The '&' character is a reference to the parent selector
    &.compact { font-size: 11px }
    .sidebar & { padding: 1px }

    #{$textFields} { line-height: 18px }

    input[type="checkbox"] { margin-right: 5px }

    p, div { margin: 12px 0 }

    a {
      color: $link-text-color;
      &:hover { color: #47A }
    }
  }
}


// Be conservative with nesting!
/*
  Watch what happens with deeply nested blocks.
  These selectors are needlessly specific.
  This slows down the CSS parser, and makes these rules more difficult to override.
*/

#main {
  .sidebar {
    .fancy-list {
      .row {
        .heading,
        .cell {
          a,
          span {
            color: #369;
            &:hover { color: #47A }
          }
        }
      }
    }
  }
}

// ----- Mixins -----
// DRY -- re-use common sets of styles

@mixin fancy-link {
  text-shadow: 0 1px 0 #999;
  &:hover { text-shadow: 0 1px 3px #999 }
}

// Mixins can take variables

@mixin gradient($start-color, $end-color) {
  background-image: -moz-linear-gradient(0, $start-color 0%, $end-color 100%);
  background-image: -webkit-linear-gradient(0, $start-color 0%, $end-color 100%);
  background-image: linear-gradient(-90deg, $start-color 0%, $end-color 100%);
}

/* Mixin Example */

.heading {
  @include gradient(#fff, #eee);
  a { @include fancy-link }
}

// Built-in functions

// There are many built-in functions
// Color functions are probably the most commonly used

$button-color: #555;

.button {
  background-color: $button-color;
  &.disabled { background-color: darken($button-color, 10%) }
}


// ----- Control Structures -----

/* Loops are useful for writing a series of styles */

@for $i from 1 through 5 {
  .tree-depth-#{$i} { padding-left: 10px * $i }
}

// ----- Functions -----

// Simple function that returns an rgba color value
@function black($opacity) {
  @return rgba(0,0,0,$opacity);
}

// The above function can now be used directly in place of a color value
.modal-background {
  background-color: black(0.65);
}

@mixin transition($properties...) {
  $prefixes: webkit moz standard;

  $prefix: (
    webkit: '-webkit-',
    moz:  '-moz-',
    standard: ''
  );

  $props: (
    webkit: (),
    moz: (),
    standard: ()
  );

  $prefixed: (
    border-bottom-left-radius
    border-bottom-right-radius
    border-radius
    border-top-left-radius
    border-top-right-radius
    box-shadow
    box-sizing
    linear-gradient
    transform
  );

  @each $p in $properties {
    @each $pf in $prefixes {
      $property: nth($p, 1);
      // add vendor prefix if needed for current property
      @if index($prefixed, $property) {
        $property: #{map-get($prefix, $pf)}$property;
      }
      // append the remaining values (time, timing function)
      @if length($p) > 1 {
        @for $i from 2 through length($p) {
          $property: $property #{nth($p, $i)}
        }
      }
      // add the property to the $props array for the current prefix
      $props: map-merge($props, ($pf: append(map-get($props, $pf), $property)));
    }
  }

  @each $k, $v in $props {
    #{map-get($prefix, $k)}transition: join((), $v, comma);
  }
}

.button {
  border: 1px solid #555;
  @include transition(transform 0.2, border 0.2s);
}