20131211-sass-3-3



20131211-sass-3-3

0 0


20131211-sass-3-3


On Github sassydc / 20131211-sass-3-3

New Features in Sass 3.3

welch canavan (@xiwcx)

Front End Developer at National Geographic

former co-host of Sassy PGH

co-host of Sassy DC

Sass 3.3

$ gem install sass --pre

OR

head over to Sassmeister.com

String Manipulation

is-quoted(), str-length(), str-index(), str-insert(), str-slice(), to-upper-case(), to-lower-case()

Meta Scripting

call(), function-exists(), mixin-exists(), inline if()

New and Improved Parent Selector (&)

.scss

.block-element {

  &:active { ... }

  .unauthenticated & { ... }
}

.css

.block-element:active { ... }
.unauthenticated .block-element { ... }

3.3

.scss

.block-element {
  ...

  @at-root {
    #{&}--modifier { ... }
  }
}

.css

.block-element { ... }
.block-element--modifier { ... }

Maps

.scss

$bp-sm: 30em;
$bp-med: 50em;
$bp-lrg: 80em;

Sass 3.3

.scss

$breakpoints: (
  $sm: 30em,
  $med: 50em,
  $lrg: 80em
);

Example

Source Maps

Sass 3.2

$ sass --debug-info style.scss:style.css
@media -sass-debug-info{
    filename{
        font-family:file\:\/\/\/Users\/wcanavan\/code\/test\/style\.scss
    }
    line{
        font-family:\000033
  }
}

Sass 3.3

$ sass --sourcemap style.scss:style.css
{
    "version": 3,
    "mappings": "AAEA,GAAI;EACA,KAAK,EAHD,IAAI",
    "sources": ["style.scss"],
    "file": "style.css"
}

@at-root

.scss

.block {
  ...

  .block-element { ... }
}

.css

.block { ... }
.block .block-element { ... }

Sass 3.3

.scss

.block {
  ...

  @at-root {
    .#{&}-element { ... }
  }
}

.css

.block { ... }
.block-element { ... }

Even Better: BEM Mixin Example by Scott Kellum

What's the big deal?

Thanks

Nathan Weizenbaum, Chris Eppstein, Sam Richards, and Scott Kellum

Further Reading

Sass Changelog

The Mind-blowing Power of Sass 3.3 Video and Slides