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.

Advertisements

New terms from treehouse – CSS Layout Techniques Part 3 – Grid Layout

Grid Layout

Understanding Grids A grid allows us to lay out our design elements and content in a simple yet versatile way, because all of the alignment, positioning, floating, even the clearfix, is already built into the grid system. And it’s usually responsive, so it’s able to adapt to any device or viewport size. The layout should be thought of as a set of rows and columns. Rows are what contain the columns and keep the grid in place. Columns keep things nicely aligned to the grid. Screen Shot 2014-06-30 at 2.34.53 PM The grid itself is determined by some css like margins, widths, etc that you write ahead of time. First, we’ll determine the max number of columns we want in the grid, in this case 12. We need fixed pixel widths to determine how wide each of those should be, in this case 65px. Keep in mind that columns can span the width of multiple columns as long as they don’t exceed the max number of columns in the row. Screen Shot 2014-06-30 at 2.38.21 PM Columns also have margins aka gutters that separate them from adjacent columns. We’ll give all but the first column in our grid a 20px left margin.


Creating Fluid Grid Columns We want to use percentages for setting up the columns rather than fixed lengths, so that it can respond based on the viewport size. If you add up 12 columns at 65px each, and 11 20px left margin gutters (because the first one doesn’t have one), that gives you a total of 1000px, and we can do some math to figure out the percentage. Our first target column width is the first column that doesn’t have the left margin gutter, and is 65px, divided by our context of 1000px, gives us .065. To make that a percentage, move the decimal over by two, giving us 6.5%. Then, we’ll do how much width two columns would be, which includes the gutter between them as well, which is 65 + 65 + 20 = 150 /1000 =  .150 x 100 =  15%. Lastly, we’ll do one for the width of three columns. 65 + 65 + 65 + 20 + 20 = 235px /1000 = .235 x 100 = 23.5%. You would then go through and do this for all of them, up to twelve which is the highest number we want. Screen Shot 2014-06-30 at 2.52.26 PM Notice .grid-12 is our max-width, which spans across the whole grid. Now anytime we want a column to span a certain number of columns, we can give it the appropriate class.


Creating the Grid Container Next we’ll create a new class .grid-container and give it some padding and margin to center it. Screen Shot 2014-06-30 at 2.59.02 PM Then we need to set up the styles that will layout the columns in the grid container. We use a child selector for child elements of .gird-container with a class that starts with “grid-“, so any of the ones we created early. We’ll give them a float:left;, and since we’re using floats, a min-height to prevent them from horizontally collapsing. We’ll add some padding, then some margin. Earlier, it was decided that the left margin would be 20px, and to make that a percentage we divide by the total width 1000px, which gives us .020, then x 100 to give us 2%. Screen Shot 2014-06-30 at 2.59.02 PM Now, we don’t want the first column to have a margin-left, so we’ll set the margin of the first column to 0. We’ll select it using a :first-child pseudo-class. Screen Shot 2014-06-30 at 3.05.57 PM Lastly, we’ll make it so the last column always floats right, so it’s always flush with the right side of the page. Screen Shot 2014-06-30 at 3.06.34 PM Now, we’ll need to do a clearfix to clear our floats, so the grid container won’t collapse. So, we’ll add it with an :after pseudo-element to build it into our grid. Screen Shot 2014-06-30 at 3.10.04 PM


Testing Our Grid Now that all that’s set up, we can plug in some of these grid classes. We’re starting with this: Screen Shot 2014-06-30 at 3.13.11 PM First, we’ll use them in our header. We’ll start by creating a div with the class “grid-container” to wrap it. Screen Shot 2014-06-30 at 3.15.14 PM Next, we’ll make it so the logo spans 2 columns and the main-nav spans 8. Screen Shot 2014-06-30 at 3.16.31 PM Screen Shot 2014-06-30 at 3.16.18 PM We’ll then give the .main-nav a text-align of right. Something is wrong in my test file I can’t figure out so I’m using theirs.

Screen Shot 2014-06-30 at 3.23.16 PM Screen Shot 2014-06-30 at 3.22.48 PMNext we’ll do the columns. We’ll give the containing div the class .grid-container, then give the child divs the appropriate grid classes. We’ll have them total to 12 columns, making them nicely take up the whole width.

Screen Shot 2014-06-30 at 3.25.45 PM Screen Shot 2014-06-30 at 3.25.19 PM

 

To add a new row of content, simply repeat the process and give the parent div the class .grid-container and the child divs the grid class based on how many columns you want it to take up.

Screen Shot 2014-06-30 at 3.28.49 PMScreen Shot 2014-06-30 at 3.28.34 PMNow, we’ll want to prevent our layout from getting too wide on larger viewports widths. We’ll add a new media query for that, and make it so that if the screen is at least 1200px wide, the .grid-container’s max width will be 1100px. Just like a normal wrapper we’ve done a bunch of times before.

Screen Shot 2014-06-30 at 3.31.20 PMScreen Shot 2014-06-30 at 3.31.44 PM

Next, we’ll create a visibility class that hides elements in mobile devices with a preexisting media query. We’ll add a new class called .hide-mobile and apply it to the elements we want to hide on smaller viewports.

Screen Shot 2014-06-30 at 3.34.59 PM  Screen Shot 2014-06-30 at 3.34.51 PM Screen Shot 2014-06-30 at 3.34.46 PMScreen Shot 2014-06-30 at 3.35.13 PM

And just like that, I’ve finished the CSS sections. I can’t believe I finally got this far. I started the treehouse courses on April 11, 2014, and now, just 80 days later, I’ve crushed the lessons and am onto Javascript. When I started the CSS foundations it seemed almost impossible, so much to learn and go through. I’m really proud to have gotten this far, but there’s still a ways to go.