Your CSS

is a mess.”

Your CSS

is a mess.

Broken from the start?

Sass to the rescue!

But... wait.

It's not all bright and shiny.

Complexity,

maintainability,

scary code...

Don't

over-{think|engineer}

KISS

Keep It

Simple, Stupid!

KYSS

Keep Your

Sass Simple

KYSSS

Keep Your

Sass Simple & Straightforward

KYSSSS

Keep Your

Sass Simple, Smart & Straightforward...

Write

simple APIs

.parent {
  @include _(
    10 8 6 4, 
    $gutter: alpha omega omega default
  );
}
.parent {
  width: 100%;

  @include respond-to("desktop") {
    width: 75%;
  }
}
$color: map-get(
  map-get(
    map-get(
      $themes, "shopping"
    ), "colors"
  ), "secondary"
);
$color: theme-conf(
  "shopping", "colors", "secondary"
);

Beware of selector nesting

Don't do everything in Sass

Rethinking
Atwood's law

Anything that can be written in Sass will eventually be written in Sass (probably by me)

SassyJSON

@include json-encode((
  "cats"   : true, 
  "answer" : 42
));
// {"cats": true, "answer": 42}

SassySort

$list: sort(
  "How" "cool" "Sass" "is?" 42
);
// 42 "cool" "How" "is?" "Sass"

SassyBitwise

$value: bitwise(42 '&' 48);
// 32

Some things shouldn't

be done

Vendor    
prefixing
?

Maybe not.

Autoprefixer

Less code

Up-to-date

REM?

Think twice.

px_to_rem

Less code

Easier

Clean

your code

.selector {
color: blue; 
backgroud: url(unicorn.png);
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  position:  relative }
.selector {
  position: relative;
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
  color: blue;
  backgroud: url("unicorn.png");
}

cssguidelin.es

scss-lint

Document

your code

.selector {
  overflow: hidden;
  white-space: nowrap;
  margin: -.5em;
  z-index: 42;
}
/**
 * 1. Clear inner floats
 * 2. Force all items on same line
 * 3. Cancel items padding
 * 4. Above content, below modal
 */
.selector {
  overflow: hidden;    /* 1 */
  white-space: nowrap; /* 2 */
  margin: -.5em;       /* 3 */
  z-index: 42;         /* 4 */
}

Document

your Sass

SassDoc

/// Mixin to size an element
/// @access public
/// @param {Number} $width - Width
/// @param {Number} $height - Height
/// @example scss - Sizing an element
/// .element {
///   @include size(100%, 5em);
/// }

SassDoc

SassDoc

Test

your code

True

or

BootCamp

@include describe("A suite") {
 @include it("contains spec with expectation") {
  @include should(
   expect(2 + 2), 
   to(be(4))
  );
 }
}

Bootcamp

KISS - KYSS

cleantest,

document

And everything will be fine.

Thanks!

@HugoGiraudel

Keep Calm And Write Sass

By Hugo Giraudel

Keep Calm And Write Sass

  • 2,697
Loading comments...

More from Hugo Giraudel