New terms from treehouse – Sass Basics Part 2 – Speeding up Workflow with Sass and Advanced Sass Concepts

Speeding up Workflow with Sass

Creating a Color Palette

We start with this pretty much blank site, and add some colors.

Screen Shot 2014-11-06 at 3.22.23 PMScreen Shot 2014-11-06 at 3.23.15 PM

Let’s Sass things up with some variables.

Screen Shot 2014-11-06 at 3.25.19 PM

To modify the color variables, there are some functions you can use, such as lighten(). It takes two arguments, the first being the variable, the second being the percent lighter you want it to be. This is nice because it changes it dynamically, so if we were to change the color for the $text-color variable later it lighten that one instead. Notice how Sass calculated the hex code of the new color and put that into the CSS. There is a darken() function as well, which works the same way.

Screen Shot 2014-11-06 at 3.29.22 PM

Once again thinking as DRY as possible, this works well for variables.

Screen Shot 2014-11-06 at 3.31.55 PM

In art, there are complimentary colors, which are opposite on the color wheel.

Screen Shot 2014-11-06 at 3.33.06 PM

In Sass, you can generate a color’s compliment using the complement() function. Note that in this example, the lighten color is being calculated off of the calculated complement color.

Screen Shot 2014-11-06 at 3.35.30 PM

There are a whole bunch of other functions, like desaturate, hue, opacity, even a mix function that let’s you mix multiple colors together.

Screen Shot 2014-11-06 at 3.38.42 PM

Learn more about color operations and keyword arguments in the documentation.


Implement Files

It’s good to have one stylesheet, as it reduces the requests when loading a site. However, for devs one huge stylesheet is a pain to work with, so it’s better to have multiple files, all of which are imported by the one stylesheet that’s loaded by the site. A good practice is to have a sheet for just your Sass variables.

So, we create a separate sheet for that, then import it using @import, followed by the name of the file to import in quotes, followed by a semicolon.

Screen Shot 2014-11-06 at 3.50.42 PM

Note: the file name was started with an underscore. They did this so that Sass would not create a separate CSS file for it. If we hadn’t used an underscore, there –watch would make a variables.css file, which we don’t want. This is known as a partial Sass file.

Within the _variables file, it’s good to make use of Scss comments (which appear to be like JS’s, just two //) to divide up the sections.

Screen Shot 2014-11-06 at 3.54.09 PM

Make another stylesheet for global styles, and suddenly there’s no actually css in the main.css file that gets loaded. This is normal for a lot of Sass projects, it’ll just be a list of @import’s.

Another convention is to make a folder called pages, then create a stylesheet for each page of the site to import. The order matters – you need the variables and mixins first because the other stylesheets depend on and use them. Additionally, like normal CSS, things cascade and will overwrite if they’re called later.

Screen Shot 2014-11-06 at 4.01.07 PM

Another example is if you need to do special styling for blackberry browsers. You could start by importing main.css, which contains imports to all those other stylesheets, and then add your own styles on top of that. Additionally, you wouldn’t start the name with an underscore, so you’d get a separate blackberry.css file as well.

Screen Shot 2014-11-06 at 4.03.14 PM

If you want to use normalize or reset.css, simply import that first.

Screen Shot 2014-11-06 at 4.07.03 PM


Working with Sass Libraries

Bootstrap is a UI library/framework that gives you a flexible grid system and predefined styles. It was originally written in LESS, a competitor to Sass, but people have fixed this for you and it works well with Sass. Foundation is another responsive framework that was written in Sass.

There are also Sass libraries, which focus on helping your write Sass. Compass is the most popular one, but there are others, like Bourban, which is a bit simpler. You’ll need to use the command line to install Bourban, which will create a folder where specified with the needed files. You can then read through those to see what’s available to you, like button mixins for example.

Screen Shot 2014-11-06 at 4.18.56 PM

Screen Shot 2014-11-06 at 4.20.34 PM

To import, just @import like you would any other scss file. Now, we can use the library. The linear-gradient property is a good example as it’s not yet standardized across all browsers. Bourban takes one declaration and auto includes the vendor prefixes you need for that for each browser.

Screen Shot 2014-11-06 at 4.22.59 PMScreen Shot 2014-11-06 at 4.24.22 PM

It’s also helpful for defining font families. You can see here it put in the rest of the back up fonts for you in the CSS, based off the $lucida-grande variable.

Screen Shot 2014-11-06 at 4.27.21 PMScreen Shot 2014-11-06 at 4.28.00 PM


Sass Functions

Sass let’s you build your own functions. We’ll start by making some div’s.

Screen Shot 2014-11-07 at 1.22.11 PM

We’re going to build a Sass machine, which isn’t necessarily a normal site. When you give it a color, it will show you a color and the percent make up of it of RGB by size.

We’ll start by defining a color variable and set the first div to it, then float the other div’s so they’re all in a line.

Screen Shot 2014-11-07 at 1.29.58 PM

Next we’ll set the background colors for the rbg divs.

Screen Shot 2014-11-07 at 1.30.48 PM

Now we need their width to be overwritten and represent the amount of red, green or blue in our color. There’s a function called red() and we can pass it an argument, which will return the amount of red in the color from 0-255. We’ll set the red div’s width to that. We need it to be in px’s, so we’ll add that as well.

Screen Shot 2014-11-07 at 1.34.03 PMThis ends up putting everything in quotes though, which we don’t want. Luckily we can use the unquote() function to fix that.

Screen Shot 2014-11-07 at 1.34.46 PM

It would be better to do this as a function though. They’re written at the top like mixins and variables. You start it with @function, then the name of the function, any arguments you want to pass in (note that these parameters need to start with a $), then curly braces for the code. Within that you need to use @return, which is what the function returns.

Screen Shot 2014-11-07 at 1.37.53 PM

We then plug that in and get this.

Screen Shot 2014-11-07 at 1.38.29 PM

And we’re done! We can now change the value of the $color variable and the div’s below will change accordingly.

Screen Shot 2014-11-07 at 1.39.32 PM


Speeding up Workflow with Sass

Debugging Sass

Common mistake – forgetting a semi colon. Sass is pretty strict about this. We forgot one for our $margin variable, and you can see Sass is sassing us about it at the top of our html and css pages

Note that it adds the content at the top of your html using a before psuedo class and the content property.

Screen Shot 2014-11-07 at 1.47.00 PM Screen Shot 2014-11-07 at 1.48.00 PM Screen Shot 2014-11-07 at 1.48.36 PM

If you mess up a curly brace, the compiler won’t know anything’s wrong til it gets to the end of the file. Here, we forgot a closing brace for the h1. Sass thought the .entry’s closing brace was the h1’s now, and now thinks there is none for the .entry. Note that because of this it’s telling you the error at the end of the file, which is wrong. It basically counts the number of braces and let’s you know if it’s off.

Screen Shot 2014-11-07 at 1.50.32 PMThere are lots of Sass options, which you can access from your console with sass –help. There are a lot of cool options, like –style, which let’s you modify how the css is outputted (by default it’s nested like we’ve seen before). If you do compressed, you can minify a scss file into css.

Screen Shot 2014-11-07 at 1.54.11 PM

Screen Shot 2014-11-07 at 1.55.31 PM

Note that you can modify the output so it puts that in the css file, rather than printing it to the console, by putting :filenameyouwantittogoto after it.

Screen Shot 2014-11-07 at 1.56.18 PM

Alternatively, you can use the expanded style and have it print out normal CSS rather than the nested kind.

Another cool option is –line-numbers, or -l, which will put in CSS comments letting you know where to look in the scss file/what line for the corresponding code.

Screen Shot 2014-11-07 at 1.58.56 PM

Finally, there is a @warn directive you can use for mixins to warn devs it might be depreciated in the console.

Screen Shot 2014-11-07 at 2.02.25 PM Screen Shot 2014-11-07 at 2.02.13 PM

This didn’t come up in the lesson, but for Sass comments, you do // for Sass only comments, and /**/ for CSS comments.


Working with Media Queries

We’ll start with a basic responsive site.

Screen Shot 2014-11-07 at 2.08.26 PM

In normal CSS, you’d have your media query at the bottom like this:

Screen Shot 2014-11-07 at 2.10.50 PM

With Sass, you can actually just nest them into the selector.

Screen Shot 2014-11-07 at 2.11.51 PM

And just like that, we’ve replaced the original media query with our nesting.

Screen Shot 2014-11-07 at 2.13.09 PM

In the CSS, it will create multiple, nested media queries.

Screen Shot 2014-11-07 at 2.14.19 PM

Sexy.


Interpolation and if/else Loops

Interpolation is helpful for repeating patterns. In the example below, just a mixin wouldn’t work because you need it to be dynamic based off the class name.

Screen Shot 2014-11-07 at 2.25.03 PM

To do interpolation, use a pound sign then curly braces, putting the variable name inside of them. Now we can use the mixin and it will dynamically update the color based on the class name. You can add on other classes and selectors to the original class, etc.

Screen Shot 2014-11-07 at 2.27.05 PM

Here’s using the same technique to set the background image.

Screen Shot 2014-11-07 at 2.28.51 PM

Alternatively you could concatenate them.

Screen Shot 2014-11-07 at 2.29.32 PM

We can do if/else statements as well. Let’s say if the color is red we want to do something different. You write it with @if, then the the condition, then put the code in curly braces. Here, if the color is red we add a border.

Screen Shot 2014-11-07 at 2.33.53 PM

You can compare numbers for the condition as well. Here, we adjust a padding based on width for a div. Note that if the condition isn’t met and there are no styles to apply for the div, Sass won’t print the div at all to the CSS, since there are no styles for it.

Screen Shot 2014-11-07 at 2.35.25 PM Screen Shot 2014-11-07 at 2.36.41 PM

To use an else, just do @else. To use an else if, just do @else if.

Screen Shot 2014-11-07 at 2.37.29 PM

Screen Shot 2014-11-07 at 2.38.27 PM


Creating Loops with @for and @each

We’ll start with a bunch of divs all styled the same.

Screen Shot 2014-11-07 at 2.48.30 PMOur goal is to set a color for each one slightly lighter than the last. To do a for loop, type @for, then $i, then your condition. Typing 1 through 100 will make the variable $i start at one and go up to 100. Here we used the nth-child pseudo selector with the looping $i variable to set the background-color for each div.

Screen Shot 2014-11-07 at 2.52.41 PM Screen Shot 2014-11-07 at 2.52.20 PM

To make this actually do what we want, we’ll use the darken() function, and set it’s percent variable to the $i, which will increase for each block. Fun fact: Sass will automatically use a keyword rather than the hex code if there is one.

Screen Shot 2014-11-07 at 2.54.38 PM

Screen Shot 2014-11-07 at 2.55.05 PM

We can also do each loops, which do loops over lists. Start by writing @each, then a variable, then in, then the list, then code you want in curly brackets.

Screen Shot 2014-11-07 at 2.59.11 PMScreen Shot 2014-11-07 at 2.59.32 PM


Advanced Mixin Arguments

Here, we’ll rewrite the @each loop from the last lesson as a mixin. We’ll start by making a mixin, naming it band, and pasting in the each loop. Then, we’ll include it to make sure it shows up in the css. Remember, a mixin doesn’t do anything until you include it.

Screen Shot 2014-11-07 at 3.26.22 PM

But this isn’t dynamic. We want to be able to pass in arguments. Here’s one way to do that.

Screen Shot 2014-11-07 at 3.28.23 PM

But, if we want to include a second band with only one member, it gives us an error, because it’s expecting four.

Screen Shot 2014-11-07 at 3.29.04 PM

To fix this, mixins accept variable arguments, meaning anywhere from 1 to infinity. To do this, you simply write an argument followed by three dots. Here we changed the argument to that, then changed the list in the each loop to the new argument, minus the dots.

Screen Shot 2014-11-07 at 3.31.23 PM

Let’s go a step further and have it accept the name of the band as well. We added a second argument, $name, and used that to change the class name and folder path for the background image as well.

Screen Shot 2014-11-07 at 3.34.06 PM

In Sass, there are lists. In the example below, the margin values are separated by spaces and count as one list value, made up of the four margins. If you added commas, then it would be wrong and they would each become a separate value.

Screen Shot 2014-11-07 at 3.36.35 PM

So, for our previous example, if we remove the three dots from $members, we can actually list the members without commas, as you can see in the first include here.

Screen Shot 2014-11-07 at 3.37.13 PM

Still, this really isn’t recommended, as most other programming languages don’t have a concept like this.

Here, we start with a pretty straightforward mixin.

Screen Shot 2014-11-07 at 3.40.58 PM

But, users may get confused on the order they need to pop in the arguments (which matters). As a way around this, you can actually write the $variable_name: value instead of just the value. This makes it so the order you write in the arguments doesn’t matter, which is helpful if you have a lot of options.

Screen Shot 2014-11-07 at 3.42.52 PM

If you do this when writing the mixin itself, you can actually set a default value. Here, display will default to block unless otherwise specified. We didn’t even have to provide a value for $display when entering the arguments without their name.

Screen Shot 2014-11-07 at 3.45.19 PM

If you set a default for every argument, you actually wouldn’t even need to pass in any arguments if you’re okay with just the default values.

Advertisements

New terms from treehouse – Sass Basics Part 1 – Getting Started with Sass and Variables, Mixins, and Extending Selectors

Getting Started with Sass

What is Sass?

Sass is a CSS language. CSS is a subset of Sass, which means that by writing CSS you’re already writing valid Sass. It just extends CSS. Sass is not an acronym, but there is one for it (syntactically awesome stylesheets).

Screen Shot 2014-11-05 at 4.08.24 PM

A compiler works by taking an input and turning it into an output. Browsers understand CSS, but not Sass. So, Sass gets compiled into CSS. Sass is for developers, and CSS is for the browsers.


Installing and Using Sass

Sass was built with ruby, so you need it to install it if you’re on Windows or Linux. Mac comes with ruby by default, so just open the command line and write gem install sass. The user I was signed in as didn’t have permission to do that, so I had to sudo before it.

Screen Shot 2014-11-05 at 4.20.31 PM

To check if it installed and to see what version you have, enter sass –version.

Screen Shot 2014-11-05 at 4.21.47 PM

We’ll then start by making our first empty test Sass file, which ends in .scss. Then, in the console we write sass, then the file name.

Screen Shot 2014-11-05 at 4.24.28 PM

It gave us nothing, because there was nothing in the file. So, let’s add some stuff to the file and rerun it.

Screen Shot 2014-11-05 at 4.25.50 PM Screen Shot 2014-11-05 at 4.25.53 PM

If you don’t feel comfortable with the command line, the scout app will take care of this for you.

Working with this long term, we want to enter sass –watch ., which will actually create a CSS file for you, and update it every time you update and save your .scss file. So, it compiles Sass while you work.

Screen Shot 2014-11-05 at 4.32.11 PM

Screen Shot 2014-11-05 at 4.33.45 PM

There are different ways to install depending on the language you’re using. There are two versions of Sass, one is LibSass, a more portable version, and the original.


Nesting Selectors

We have a sample site and have set up our scss and css files, using the sass –watch . command from before.

Screen Shot 2014-11-05 at 4.57.29 PM

Let’s say we set up some styles using a class and descendent combinator.

Screen Shot 2014-11-05 at 5.00.58 PM

If the class name were to change, we’d have to go and change each style that had that class name, which could take a while on a huge site.

Screen Shot 2014-11-05 at 5.02.53 PM

With Sass, you can write nested styles, and the compiler will still write valid CSS for you!  This makes it easy to add new styles for a specific point. This is based off the concept DRY (don’t repeat yourself).

Screen Shot 2014-11-05 at 5.04.03 PMTry not to overdo it with nesting. Only go 4 of 5 levels deep at most. Going deeper usually implies you need more classes and id’s in your markup.

Modernizr is a JS library that works well with Sass, which we’ll add to the page.

Screen Shot 2014-11-05 at 5.11.18 PM

Modernizr adds a bunch of classes to your html tag, which allows you to dynamically determine what the browser can and cannot do. This is useful because it lets you write CSS based off that feature.

Screen Shot 2014-11-05 at 5.12.23 PM

Here, if the browser supports css columns, this CSS will be applied and overwrite rules written above it.

Screen Shot 2014-11-05 at 5.14.43 PM


Advanced Nesting

The parent selector feature is represented by an ampersand (&). Below, in the Sass we’ve added a rule with html.csscolumns & as the selector. As you can see in the CSS, this means that what’s written before the &, in this case html.csscolumns, will be put ahead of the other selectors, .blog .entry p, which are represented by the &, in the css. So, we end up with html.csscolumns blog .entry p

Screen Shot 2014-11-05 at 5.40.10 PM

Now let’s say another h1 was added and we wanted to style just that.

Screen Shot 2014-11-05 at 5.42.59 PMScreen Shot 2014-11-05 at 5.43.28 PM

As you can see, it affects all h1’s on the page, and we don’t want that. Normally we’d fix this by using the direct child combinator >. This is supported by sass as well.

Screen Shot 2014-11-05 at 5.44.55 PM

Screen Shot 2014-11-05 at 5.47.15 PM

You could clean it up further by combing the nesting with the styles below.

Screen Shot 2014-11-05 at 5.48.02 PM

The & works with hover states and such as well. Think how much easier this is than having to write out a:hover, a:visited, a:link, etc.

Screen Shot 2014-11-05 at 5.49.20 PM

Finally, by default Sass simulates nesting by indenting parts of you CSS, to give you an idea of how the original Sass looked.

Screen Shot 2014-11-05 at 5.51.23 PM


Variables, Mixins, and Extending Selectors

Defining Variables

You’ll often use a color multiple times in a project. If you wanted to change it, you’d have to change it in all those locations you used it.

Screen Shot 2014-11-06 at 1.37.02 PM

With Sass you can define variables and use them throughout your CSS. They must start with a dollar sign.

Here we have a site already put together with Sass, with some repeating colors.

Screen Shot 2014-11-06 at 1.40.42 PM

To set up variables, write their name, then a colon, then the value, then a semicolon. Then, all you need to do is use that variable name when you need that value. Here, we’ve set up #333 as $primary_color.

Screen Shot 2014-11-06 at 1.43.42 PM

This makes it easy to change this color later.  You can change it in one place, the variable declaration, rather than having to change it each place you need it.

Screen Shot 2014-11-06 at 1.44.46 PM

You can do this for margins as well, pretty much whatever you want. Notice how easy it makes it to change the styles.

Screen Shot 2014-11-06 at 1.47.54 PM Screen Shot 2014-11-06 at 1.48.18 PM

You can actually take a variable and multiply its value, like they did for padding here. In this case the padding is now 7.5px.

Screen Shot 2014-11-06 at 1.49.32 PM

You can also do just normal inline calculations without a variable. It accepts division, subtraction and addition as well.

Screen Shot 2014-11-06 at 1.50.33 PM

We can make variables this way as well. Since we’re using pt units, it will convert them to px for you in the css.

Screen Shot 2014-11-06 at 1.52.15 PM

If you try using ems though, you’ll get an message telling you where the error is.

Screen Shot 2014-11-06 at 1.53.18 PM


Introducing Mixins

Here we have some code that’s getting repeated quite a bit for the border radii.

Screen Shot 2014-11-06 at 2.01.30 PM

To add a mixin, start with @mixin, then the name of the mixin, then curly brackets, in which you put the code you want.

Screen Shot 2014-11-06 at 2.03.40 PM

Then, to use a mixin, in the css rule write @include, then the name of the mixin you want to use, then end it with a semicolon like any other css declaration.

Screen Shot 2014-11-06 at 2.04.53 PM

The final product:

Screen Shot 2014-11-06 at 2.06.09 PM

You can even set up mixins with selectors. Note how Sass auto scoped it so that the a is nested within the .box class for us.

Screen Shot 2014-11-06 at 2.08.03 PM


The Power of Mixins

You can pass arguments into mixins like you would a JS function. You do this by putting parentheses after the name of the mixin when declaring it, then popping in your arguments. So, now whenever this is included, roundy is expecting these two numbers (for #radius-one and #radius-two).

Screen Shot 2014-11-06 at 2.16.43 PM

Since in this example radius-two seems to just be the double of radius-one, we can dry things up even further and only use one argument with a calculation.

Screen Shot 2014-11-06 at 2.18.38 PM

Note that it the arguments you pass in don’t have to be just numbers, you can use other things like colors too.

Screen Shot 2014-11-06 at 2.20.08 PM

Here’re the golden rules for mixins. Also, this color choice looks more pee than gold to me : O

Screen Shot 2014-11-06 at 2.21.36 PM


Extending Selectors

Screen Shot 2014-11-06 at 2.25.29 PM

Let’s say you need to copy some code, like for .bar here, to a new class called menu. In CSS you’d copy and paste like this.

Screen Shot 2014-11-06 at 2.27.20 PM

Or, you could use a mixin like last lesson. But extend is a great directive to solve the same problem. You simply type @extend, then the name of the selector you want to extend, in this case .bar. You can see that in the CSS it basically merged the selectors together.

Screen Shot 2014-11-06 at 2.29.55 PM

Issue that came up when they developed this: People wanted to use more semantic classes like .menu and .nav, based off of .bar, but they ended up with .bar appearing in their css without actually using it. So, they came up with placeholder selectors, which are represented by a % then a name.

Screen Shot 2014-11-06 at 2.33.04 PM

Now, bar is a placeholder selector and doesn’t get printed to our css. The rule of thumb for using mixins vs extends is that mixins are great for arguments and advanced logic, like building a library, while extends are for smaller scale, simpler things where you just want to copy some stuff with no arguments or logic.