Sassive Aggressive: Level Up Your CSS with Sass
Upcoming SlideShare
Loading in...5
×
 

Sassive Aggressive: Level Up Your CSS with Sass

on

  • 2,154 views

As the line between designer and developer continues to blur, we need more from CSS than it can offer. Sass is an extension of CSS that adds basic features CSS is sorely missing (like variables and ...

As the line between designer and developer continues to blur, we need more from CSS than it can offer. Sass is an extension of CSS that adds basic features CSS is sorely missing (like variables and nesting). But Sass kicks things to a new level with mixins (flexible, re-usable blocks of CSS) and advanced selector inheritance. Simply put, Sass makes CSS authoring fun again.

Statistics

Views

Total Views
2,154
Views on SlideShare
2,149
Embed Views
5

Actions

Likes
1
Downloads
21
Comments
0

2 Embeds 5

http://www.linkedin.com 3
https://si0.twimg.com 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Sassive Aggressive: Level Up Your CSS with Sass Sassive Aggressive: Level Up Your CSS with Sass Presentation Transcript

    • Sassive Aggressive// Level Up Your CSS with Sass@import the-awesome
    • What is Sass?
    • What is Sass? Syntactically awesome stylesheets
    • We all use CSS sucks
    • butWe all use CSS sucks
    • butWe all use CSS sucks Especially if you’ve used Sass.
    • Sass takes everythingthat’s missing from CSS and puts it into CSS.
    • Sass takes everythingthat’s missing from CSS and puts it into CSS.
    • Things like…h1 { color: #000; font: 16px/1.6 Georgia; margin: 0;}
    • Variablesh1 { color: $logo-color; font: 16px/1.6 Georgia; margin: 0;}
    • Nestingh1 { color: #000; font: 16px/1.6 Georgia; margin: 0; a { display: block; width: 100px; height: 50px; }}
    • The Ampersandh1 { color: #000; font: 16px/1.6 Georgia; margin: 0; &.new { color: red; }}
    • Selector Inheritanceh1 { color: #000; font: 16px/1.6 Georgia; margin: 0;}h2 { @extend h1; font-size: 14px;}
    • Calculationsh1 { color: #000; font: 16px/1.6 Georgia; margin: $default_margin * 2;}
    • Color Manipulationh1 { color: lighten(#000, 25%); font: 16px/1.6 Georgia; margin: 0;}
    • Mixinsh1 { color: #000; font: 16px/1.6 Georgia; margin: 0; @include border-radius(4px);}
    • And so, so much more.
    • Sass does not replace CSS.
    • Sass does not replace CSS. Sass makes CSS.
    • Sass does not replace CSS. Sass makes CSS. better.
    • Three more things before we play…
    • 1 What’s ? http://compass-style.org • a framework that uses Sass • an open source project • a collection of reusable design patterns that makes using the latest CSS features super easy Compass is not Sass, but they are oen grouped together.
    • 2 Two Syntaxes SCSS
    • 2 Two Syntaxes SCSS h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; a { display: block; width: 100px; height: 50px; } }
    • 2 Two Syntaxes SCSS booooooo h1 { color: #000; font: 16px/1.6 Georgia; margin: 0; a { display: block; width: 100px; height: 50px; } }
    • 2 Two Syntaxes SCSS booooooo h1 { of the color: #000; ’s op inion ER: A dam esent Joel’s S CLAIM 16px/1.6 pr font: ot re Georgia; .DI ta x do n yntax SCS S margin:f the SCSS s syn 0; opin{ a ion o display: block; width: 100px; height: 50px; } }
    • 2 Two Syntaxes Sass h1 color: #000 font: 16px/1.6 Georgia margin: 0 a display: block width: 100px height: 50px
    • 2 Two Syntaxes Sass yaaaaaay h1 color: #000 font: 16px/1.6 Georgia margin: 0 a display: block width: 100px height: 50px
    • 3 The Command Line Don’t be afraid.
    • Let’s look at some code!
    • itche d to a point , we sw th Sass/ TE: A t this tratio n (wiNO demo ns to-up dating liv e code e left and au on th n the r ight). SCSS iled C SS o comp
    • See the code: https://github.com/jayroh/sass-harvard Note that the code samples are stored within the same file, but on different branches. Here are the direct links to each branch:Ampersand (Sass/SCSS) Mixins (Sass/SCSS)Calculations (Sass/SCSS) Nesting (Sass/SCSS) Colors (Sass/SCSS) Partials (Sass/SCSS) Compass (Sass/SCSS) Responsive (Sass/SCSS) Extend (Sass/SCSS) Sprites (Sass/SCSS) Loops (Sass/SCSS) Variables (Sass/SCSS)
    • Who are these guys?Joel Oliveira Adam Darowski e47th PatientsLikeMe @jayroh @adarowski