Introduction to Sass - Speaker Deck

Slide 1

Slide 1 text

Introduction to Sass With / Tim Knight @timknight

Slide 2

Slide 2 text

Who am I? Designer • Engineer • Rubyist • UX Designer Started in the Web in 1995 First Startup in 1997 (at 17, and exited at 23) Currently, Director of User Experience for GravityFree

Slide 3

Slide 3 text

Disclaimer I'm not covering it "all" Yes there are other preprocessors And even more opinions about which one is the best

Slide 4

Slide 4 text

So What is Sass? A CSS Preprocessor Originally created in Ruby Let's you use things like Nesting, Variables, Partials, Mixins, and Functions Is it Sass, SASS, or SCSS? Sass: Syntactically Awesome Stylesheets SCSS: Sassy CSS We'll be working with the default SCSS syntax

Slide 5

Slide 5 text

Installation Options

Slide 6

Slide 6 text

Using Ruby For Mac Users g e m i n s t a l l s a s s For Windows users, first install Ruby at , then: http://rubyinstaller.org/ g e m i n s t a l l s a s s Start the watcher from Terminal/Command Prompt: s a s s - - w a t c h a s s e t s / s a s s : a s s e t s / c s s

Slide 7

Slide 7 text

Using Grunt (Node) n p m i n s t a l l - - s a v e - d e v g r u n t - s a s s

Slide 8

Slide 8 text

For WordPress Checkout WP-SCSS at https://wordpress.org/plugins/wp-scss/

Slide 9

Slide 9 text

Win & Mac GUI Options Scout (Free): Koala (Free): Prepros ($29): CodeKit ($32): http://mhs.github.io/scout-app/ http://koala-app.com/ https://prepros.io/ http://incident57.com/codekit/

Slide 10

Slide 10 text

Why Sass? Helps DRY up your code? Better Code Organization Simplify Repeating Code Mathematical Features And so much more

Slide 11

Slide 11 text

What Does DRY Mean? Don't Repeat Yourself . s i d e b a r { w i d t h : 2 5 % ; } . s i d e b a r h 2 { f o n t - s i z e : 2 e m ; } . s i d e b a r i m g { b o r d e r : 2 p x s o l i d # c c c ; } . s i d e b a r { w i d t h : 2 5 % ; h 2 { f o n t - s i z e : 2 e m ; } i m g { b o r d e r : 2 p x s o l i d # c c c ; } }

Slide 12

Slide 12 text

Code Nesting Helps you organize your code Opportunities to Namespace So. The Inception Principle? What about parent references?

Slide 13

Slide 13 text

Demo

Slide 14

Slide 14 text

Using Variables Removes further duplication Helps build consistency Makes your life easier More expressive - $lime over #bada55

Slide 15

Slide 15 text

Demo

Slide 16

Slide 16 text

Code Comments Supports traditional /* */ comments that will render in your stylesheet Supports // comments that will not be included in your compiled sheets Traditional comments style can include variables

Slide 17

Slide 17 text

Demo

Slide 18

Slide 18 text

Partials Helps in code organization Does not create separate files and needs to be imported into your stylesheet Start with an underscore "_"

Slide 19

Slide 19 text

Demo

Slide 20

Slide 20 text

Lists A special type of a variable with multiple values You can loop (iterate) through each value in a list to generate different CSS

Slide 21

Slide 21 text

Demo

Slide 22

Slide 22 text

Placeholders / @ e x t e n d A special kind of class that isn't added into the CSS code unless specifically used Creates a single CSS instance with all the selectors Starts with a "%" To be used responsibly

Slide 23

Slide 23 text

Demo

Slide 24

Slide 24 text

Control Flow You can check if something is equal (= = ) or is not equal (! = ) to something else You can check if something is < , > , < = , > = If-Then-Else

Slide 25

Slide 25 text

Demo

Slide 26

Slide 26 text

Mixins Abstracts complexity Like a partial, but lets you provide attributes that can change the output you get back Sound crazy? Not to worry...

Slide 27

Slide 27 text

Demo

Slide 28

Slide 28 text

Calculations Understands unit-based math. 5 0 p x + 3 0 p x - , + , / , * , % Adjust colors programmatically

Slide 29

Slide 29 text

Demo

Slide 30

Slide 30 text

Before We Finish So what the hell is Compass?

Slide 31

Slide 31 text

So What is Compass? Often linked or mistaken as being a preprocessor itself A collection of Sass mixins and functions to assist in simplifying your code Has it's own configuration options Installed separately as a RubyGem and can influence the performance of your compile times because of its size

Slide 32

Slide 32 text

What About Bourbon? A leaner group of usable mixins and functions, so there is less performance overhead Installed directly into a project and can be easily edited for your needs

Slide 33

Slide 33 text

Questions?

Slide 34

Slide 34 text

Thank You! Slides are available at: https://speakerdeck.com/timknight/introduction-to-sass