and talk about it….

Getting Sassy

I’ve been learning a lot of new things at work these days. A LOT of new things. As a matter of fact, I’ve been waking up thinking of code. This. has. got. to. stop. I just had a couple of books come today from Amazon, so I’m looking forward to taking a break from the code and diving into them tonight.

But first, I want to write this blog post about SASS. It just really blows me away how much power it has. I came to SASS from LESS. I thought LESS was enough. But, now that I’ve seen the power of SASS, and now that I’ve seen how complex stuff other people have written that I’m trying to “install” is, I’m looking forward to writing some plain ol’ mixins and functions that can be plopped into a directory on my site without needing to go through some huge front-end dev complex install/build brouhaha. Kind-of like how I’ve always used jquery plugins. Pull them down from the web, plop them in a directory. Link to them. I like it like that. (Expect a future post from Gladys and I on this whole new era of front-end dev complexity.)

So, in preparation to go a little deeper with SASS, I decided I should learn all the parts of the language first. And there were many places I went to for that, and wound up taking copious notes and trying things out. I figured I’d share, because I’ve written them up in a different order than the official SASS documentation. And I’m sure I’ll be revising things as I learn more, but here is where I am with this right now.

SASS documentation, Gertified

As far as I can tell, the .sass syntax isn’t used much. One site said nobody uses it. So all this is based off of the .scss syntax.

And stuff in blockquotes is from the official SASS documentation (found at sass-lang.com).

@IMPORT

Used to import other .scss files and partials into a .scss file.

Put these statements at the beginning of the file, in the order you want them included. It is also possible to nest them in a selector, but that restricts what is allowed in them.

Don’t include the underscores for partials nor the .scss extensions in the file names.

NESTING& (the ampersand)

The & is replaced with the parent selector. In addition to what is shown above, you can also do this:

@at-root

This can come in handy for flattening CSS specificity while still making it so you can group your selectors. It writes the selectors inside it out to the root level of the document. You can also use it for single selectors, like

SassScript

SassScript allows you to define properties using variables, math operators, functions, etc. Following are the features of SassScript…

VARIABLES

Variables are scoped to the container they are defined in, unless you use the !global flag.

Variables defined outside of any selectors are global.

You can use !default after a variable assignment, which will make the assignment as long as the variable wasn’t already assigned or has a value of null.

Note the #{ } interpolation syntax, which allows you to use the value of the variable as part of a selector or property name. When using interpolation, quoted strings are unquoted.

It’s also possible to use #{} to put SassScript into property values. In most cases this isn’t any better than using a variable, but using #{} does mean that any operations near it will be treated as plain CSS. For example:

MIXINS

If a mixin doesn’t contain any arguments, or isn’t passed any values, you can omit the parenthesis.

EXTENDING

You can extend a placeholder or a CSS selector. The % syntax defines a placeholder. It is not compiled to actual CSS, it is only valuable if used. But it allows you to extend a set of styles without basing them off of another selector. It’s sort of like a variable for a set of styles. In this example, column also extends sidebar, which means it picks up those styles as well as the stretch placeholder styles.

Extending makes use of selector combining so, if you don’t have to pass variables, use placeholders instead of mixins for repeating chunks of styles to generate less code in the compiled CSS.

You can’t extend concatenated selectors:

However, you can do stuff like this:

You can play with this stuff at http://sassmeister.com/ to try and wrap your head around the nitty gritty of @extend.

The !optional flag after the extend is supposed to make the extend fail gracefully if there isn’t a class found to extend. No CSS was output in this case.

My thought is that for best practices – and understandability and maintainability – keep those extends simple! As I always say, just because you can do something doesn’t mean that you should.

FUNCTIONS

Functions are like mixins, only they return a value rather than styles. And you can do lots of processing in them.

Functions are called without the @include statement that mixins use.

Functions can be called with or without explicit keyword arguments. Keywords come in handy when you have a long list of arguments to pass and/or don’t want to pass all of them. (Named arguments can be passed in in any order.)

There are lots of built-in functions, too lengthy to list here. But these are the categories of functions:

Color functions – for manipulating RGB, HSL, and opacity values

String functions – a lot of these are similar to javascript string functions

Number functions – again, similar to what javascript offers for numbers

Hint: always quote interpolated named colors if they are meant to become part of a selector.

OPERATIONS

Arithmetic

+, -, /, *, % (addition, subtraction, division, multiplication, modulo) – these can also be used on colors

expressions are evaluated left-to-right, with multiplication and division taking priority over division and subtraction. You can also use parenthesis around operations to add clarity. Spaces are not required but also can add clarity.

Phew, that was a long post, huh? Well, I am known for my gift of gab. I do have to apologize, though, this post isn’t fully accessible because I used a lot of SassMeister screenshots. It was the easiest way. Please use the official Sass documentation if you need a more accessible reference.