“Your CSS

is a mess.”

Jonathan Snook

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

Keep Sass Simple at SitePoint

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

Beware of selector nesting at SitePoint

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}

github.com/HugoGiraudel/SassyJSON

SassySort

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

github.com/HugoGiraudel/SassySort

SassyBitwise

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

github.com/HugoGiraudel/SassyBitwise

Some things shouldn't

be done

Vendor    
prefixing?

Maybe not.

Autoprefixer

Less code

Up-to-date

github.com/postcss/autoprefixer

REM?

Think twice.

px_to_rem

Less code

Easier

github.com/songawee/px_to_rem

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

github.com/causes/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

sassdoc.com

/// 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

github.com/thejameskyle/bootcamp

KISS - KYSS

clean, test,

document

And everything will be fine.

Thanks!

@HugoGiraudel

Keep Calm And Write Sass

By Kitty Giraudel

Made with Slides.com

Keep Calm And Write Sass

  • 5,014

More from Kitty Giraudel