Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sass-tastic!: A Beginners Guide to Understanding Sass

Sass-tastic!: A Beginners Guide to Understanding Sass

A beginners guide to understanding what Sass is and how it works.
Check out the Codepen Exercise to test out Sass: http://cdpn.io/e/JXBQOr

__Sasstastic Resources__
Sass (Offical) - http://sass-lang.com/

Sass for Web Designers - https://abookapart.com/products/sass-for-web-designers

__Sasstastic Tutorials__
Code School: https://www.codeschool.com/courses/assembling-sass

Treehouse: https://teamtreehouse.com/library/sass-basics
(taught by creator of Sass Hampton Catlin)

The Sass Way: http://thesassway.com/beginner

Courtney Jordan

April 27, 2016
Tweet

Other Decks in Technology

Transcript

  1. Who is This Awesome Person? Courtney Jordan • Front-End Designer/Developer

    for the Revenue and Transportation Cluster • Graphic Artist, Photographer & Typographer. • Worked on Dept. of Labor's Career Center Locator which was not only responsive but written in sass. • Addict of: Star Wars, Totoro and CATS! Twitter: @court_jordan GitHub: courtneyjordan
  2. So what is Sass? SASS = Syntactically Awesome Stylesheets Developed

    in 2006 by Hampton Catlin (Self Declared: Most awesome person in the history of the internet), Sass is a preprocessing language that allows developers to write styles in Sass and compile it into CSS. • SASS is the original syntax • SCSS syntax was added in following years after • Flexible and fun!
  3. Sass vs Scss Sass • Ruby-like syntax • Can be

    difficult to read • Missing one indent could risk breaking the whole style sheet Scss • Css-like syntax • Easier to read • Over indenting code can cause readability issues
  4. Create Variables Variables can be created to store colors, fonts

    and any kind of css style you would want to reuse. To create a variable, use the $ symbol. $grey: #CCC; $font: Helvetica; $margin-right: 10px;
  5. Indent Code When writing HTML developers usually indent their code

    so it’s easier to read. Sass can do the same thing!! Sass allows developers to write with indented code. Thus the code is easier to read and troubleshoot. The biggest advantage is to remove the redundancy of CSS style classes. No more reiterating the same starting style selectors for each rule. Remember to use with caution, overly indented code can cause readability issues.
  6. Create Mixins A mixin let’s you make groups of css

    properties that you can reuse. Mixins are great to use with vendor prefixes! 4 lines of code turns into 1 line of code. How Awesome is that?!
  7. Create Partials Partials are files that contain snippets of code.

    Partials are a great way to keep your css organized and maintained. _color.scss _fonts.scss _mixins.scss style.scss
  8. Import Code Styles Import allows for code to be split

    up into more smaller maintainable snippets of code. So you can keep fonts in the fonts file and colors in the color file and import them into the primary stylesheet.
  9. Sasstastic Resources Sass (Offical) - http://sass-lang.com/ Sass for Web Designers

    - https://abookapart.com/products/sass-for-web-designers Sasstastic Tutorials Code School: https://www.codeschool.com/courses/assembling-sass Treehouse: taught by creator of Sass Hampton Catlin https://teamtreehouse.com/library/sass-basics The Sass Way:(Free) http://thesassway.com/beginner