Sass with SCSS

Self-paced learning resources

It is really important to use flipped classroom techniques and provide students with a self-paced method to learn basic concepts outside of class and practice those concepts in class.

##Screencasts Every student has a Treehouse account. Treehouse has an introductory sequence of Sass classes. If they are good enough, we should use them.

We need to watch these and see

1. are they still relevant
2. do they get students to where they need to be for the projects (and for real-world work)?

• http://teamtreehouse.com/library/sass-basics
• http://teamtreehouse.com/library/advanced-sass
• http://teamtreehouse.com/library/modular-css-with-sass

I don't know if we need to go all the way into Compass. Do we? There are lots of cool things in there. http://teamtreehouse.com/library/compass-basics

There's another set of videos I've seen on SitePoint Premium, previewed here: https://www.youtube.com/watch?v=nbcfeVl4gyI

and sold here:

• http://css-snippets.com/sass-courses/step-by-step-sass/
• http://css-snippets.com/sass-courses/the-next-step-sass-compass/

For an additional $45 over Treehouse, I'm not sure of the additional value.

Textbooks

There's a short, cheap one here: http://abookapart.com/products/sass-for-web-designers

I have a copy you can look at if you like. There are others I can add to this list, but this one is scaled to the depth of the class. Should we recommend it?

Online resources

• [The main Sass site] http://sass-lang.com/
• Sass Guidelines
• Sass Style Guide

Interactive tutorials

Are there any?

#Week-by-week

##Intro to Sass

• How preprocessors work
• How code plyagrounds tools (codepen.io and http://sassmeister.com/) help you play and learn
• Variables & nesting
• Parent & selectors
• commenting and output styles
• Review your output--ie, common pitfalls of beginners

##Sass & Gulp/Grunt + next level

• Let's get Sass running with Autoprefixer, watching and error reporting
• File Directory setup, partials and manifest files
• Mixins and Functions - mixins will be more important for most students
• By using mixins, we can use libraries like Bourbon, Compass or roll our own (create your own useful library)

##Debugging Sass

• Source maps
• Editing Sass directly from Chrome (?)

##Sass and responsive development

• Extends and placeholders
• Extends + media queries
• how we can use functions and extends to create a grid system
• how we can use variables to keep media queries consistent
• nest media queries inside selectors for easier viewing, rather then all at the end (blah)
• more...

##Sass and styleguides

• ultimate ability to make consistency
• can easily create themeable websites, so colors and fonts can be swapped out in an instant
• best example is in working with something like Bootstrap, which is essentially a complicated styleguide. let's run through an example of processing Bootstrap (or some other front end framework).

#Notes

Required reading: http://sass-lang.com/guide

Incorporate into presentation/topic page

Introductory/conceptual

• SCSS syntax is a superset of CSS - everything you know still works, you just get to add new & cool techniques
• Sass is more efficient (it does more with less code) and expressive (it is better at describing what is going on)
• The Sass @import directive and partials allow well-structured file organization. (http://thesassway.com/beginner/how-to-structure-a-sass-project). This, like many of the techniques taught in this class, is overkill for small projects but a matter of survival in larger projects.
• "Directive" is a vocabulary word that you should understand and be able to give examples of.

Variables

• Variables are a way to store things (colors, font stacks, other CSS values) that you want to reuse many places.
• They also make things more understandable by allowing you to name things (like $warning-color) instead of just the hex value.
• The naming things is very important

Nesting and hierarchy

• Nesting lets you take advantage of hierarchy.
• You can structure your stylesheets like you structure your HTML.
• It makes complicated things easier to understand.
• When you are writing nested rules, use the parent selector (&) to refer back up the hierarchy
• You can nest properties as well as selectors (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#nested_properties)

Partials and modularity

• Partials are Sass files with little snippets of code.
• A good partial is focused on one thing and very modular.
• Partials can make it a little harder to find things when you are new to a project, but good file naming conventions fix that.
• A partial file name starts with a leading underscore.
• Names with leading underscores are not converted to CSS by themselves, they are imported into the primary Sass file using the @import directive.

Importing partials

• The @import directive lets you modularize your code.
• It's better than the CSS @import directive because it happens in the development environment, not as the page loads (causing additional HTTP requests and delays).
• The @import directive just takes the name without the underscore and no extension

Mixins DRY up your code

• The @mixin directive lets you make groups of CSS declarations and reuse them many places.
• Mixins save time, improving quality and, with good naming, makes your code easier to understand.
• They kind of look like JavaScript functions -- they can take parameters, too. But they don't return values.
• Some Sass tutorials use the example of using mixins to make vendor prefixes tolerable, but we have a better method with auto-prefixer.
• To use a mixin, use the @include directive.

@extends and inheritance

• The @extend directive share CSS properties from one selector to another.
• It implements inheritance, where one selector takes on the properties of another selector and, well, extends it.
• Mixins allow you to naturally implement a design that has visual consistency and cohesiveness (visual elements have common characteristics, so their classes have common code)
• You write less code and you don't repeat yourself. Again, higher quality, better design.
• This can get pretty complicated, especially when you start doing things like @extend-Only Selectors so it's important to analyze your web design prior to starting to code so you can take full advantage of what Sass can do.

SassScript

• You can use operators, parentheses, functions, and other language features in CSS directives using a set of extensions called SassScript.
• As you learn JavaScript and SassScript together, you will notice many similarities (and a few differences).
• Operators let you do simple math in your CSS directives, which can make your code easier to understand.
• Functions provide lots of useful little behaviors that make working with colors, opacity, strings, numbers, lists, and other more esoteric things fun and easy.

Responsive Design

• Use variables to keep track of breakpoints (http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/) $bp-small : 24em; $bp-med : 46.8em; $bp-large : 50em; $bp-xl : 73em;