Select Page
Beginner’s Guide To Sass – Mixins

Beginner’s Guide To Sass – Mixins

Sass Mixins are best explained as, for example, JavaScript Functions. You have a code that you want to do something, oke, but you can give it parameters and make it fully adjust to what you wanna have it do.

MIXINS ARE LIKE FUNCTIONS, REALLY

Basically, Mixins allow you to take a group of CSS properties and bundle them together, adding them up to a class or an ID you want. Imagine this: You have two major types of buttons on your site: primary button, and some sort of secondary button. In one case, you want a button to have one set of properties, in the other – something else.

Here’s an example of what we could do. All Sass Mixins are declared by stating @mixin in front, then the mixin name and optional arguments, and then the usual CSS:

This would produce this output:

Sounds like it was a lot less code to just write out the CSS, right? Wrong. Even thou it really does lessen the amount of actual code for this one, single button, let’s create two more! Here’s the Sass code:

And here’s the result:

And that’s all repetitive copy/paste work that you didn’t have to do! Keep in mind that the actual button-creating magic is in the mixin. You can (and will, I hope) separate Mixins and variables from the rest of the Sass code, and then the only thing you’ll be looking in your new framework creation is actually… just… this:

So I hope you are starting to see the power that you can utilize here. Mixins are ESPECIALLY useful with the CSS3 and a ton of vendor prefixes like -webkit, -moz, -ms, -o that can be used. Why not creating just a simple @mixin border-radius($radius) function using all that, and then just use it by including it, so you don’t have to pollute your CSS that with tons of same copy/pasted stuff that you really need to include? Example:

Play around, and I hope you’ll start to feel the real power here. 🙂

Until next time… Ciao! <3

Beginner’s Guide To Sass – Nesting

Beginner’s Guide To Sass – Nesting

Nesting is one of my favorite features Sass has to offer. I hate clunky code. I hate it when I have to inline state nav ul li a.active:hover to access that navigation’s element’s hover property. First of all, I find it highly unreadable. Second, I find it hard to actually read and find things I need.

HERE COMES THE NESTING

Sass allows you to nest the elements, quite similar to how you’d organize your HTML. You’d “nest” certain elements under it’s “parent” and you will immediately gain much better visibility of the code at hand. Let’s have a look at the example:

Notice we’re “indenting” just as we would indent elements in the HTML:

Only difference is, we’re following the CSS code convention, of course.

Let’s run the compiler and see what we’ll get:

Hopefully you can see how Nesting can save your sanity in CSS coding. In the end, all code will be minified and reduced to smallest size it can, and you’re the one who needs to write/read it now. Why not make yourself a favor and make it super readable with Nesting? 🙂

Cheers! Until next time!

Beginner’s Guide To Sass – SASS Variables

Beginner’s Guide To Sass – SASS Variables

If you’re like me before I learned about SASS Variables, you probably had a separate sheet with color scheme information. Button hover colors written in notepad, stored under “project_styles.txt”. It’s ok, we’ve all been there. I’m happy to let you know that that’s now a long past history.

Enter SASS Variables

Imagine variables as  a way to save/store information about certain things. Border radius. Colors. Any CSS property, really. If you’re into PHP, for example, you’ll feel right at home, since SASS Variables are stored in quite a similar way. Here’s an example:

See how “English” that is? You create a variable by prepending $ in front of the word of your choice and after : you assign it’s property. You are really not limited to how you’re gonna name your variables, but common practice is to use clear English language with words separated by -. I think folks over at SASS don’t recommend using camelCase or PascalCase or snake_case, and I’ve never did, tho’ I think it would create little harm.

So once you do create some variables, you can put them to action like this:

After that’s pre-processed and munched away, resulting CSS would be this:

But see how much more readible that is? The Variables approach? Also, what’s cool is that you can RE-USE these variables EVERYWHERE. Create a $primary-color, $secondary-color, and similar variables for your task and you can store them in one _partial.scss, which would be your go-to place to check out the colors… instead of “project_styles.txt”. Ditch that. Bury it. Let the pipes sing the sad song.

AND THAT’S ALL THERE IS TO IT

Really, you got it! Variables are staple of any serious programming and understanding them first is important before moving on. Having a container to store information and reuse it in your project will save you tons of alt+tabing to check out the project specifications and you’ll grow to love it!

Beginner’s Guide To Sass – Preprocessing

Beginner’s Guide To Sass – Preprocessing

Sass is a preprocessing language. Means – it needs tools to make it work. Imagine there as a middleman who’ll take no share whatsoever. Even as a bonus it can do some more stuff to help you out!

by performing preprocessing, think of code compiling

You need a compiler to do it, and in the case of the following lecture, we’ll roll out with the original, the first of it all – Ruby. If you wanna set up a Sass preprocessing tooling chain with Gulp, I’ve got you covered right here, too.

I’ve opted up for Ruby in this series because it’s the one universal tool you can use to very easily setup everything and it takes just a few clicks. And it all started here, too.

Mac

If you’re on Mac – congrats. Ruby comes preinstalled. The only thing you gotta do is install the Sass gem.

Please note that if something fails, you should try with sudo command. Easiest Sass installment of it all. 🙂 Go ahead and check it out with sass -v.

Linux

Many distros already come with Ruby packed in. Give it a go by typing in the terminal: ruby -v. If you don’t have Ruby installed:

If you have it already up and running, check for Sass as well by typing
sass -v. If you get a version number, you’re good. Otherwise:

Windows

Getting Ruby on Win machine can be a bit tricky, as you’d have to setup environmental variables and edit path yourself and stuff. Easiest thing to do is to get the latest installer here and let Windows take care of all of that.

Once completed, you can check it out by opening up your CMD (easiest – click on windows key, type cmd and click enter) and type:

You should be all good to go at this point. However, one more thing, since my days on development under Windows’ harsh jurisdiction has been painful, I strongly recommend you to get Git Bash. Windows is not really so optimized for development and for coding like Linux or Mac, so you’ll need all the help you can get. 🙂

Start of the journey

All righty! You’re all set! One last thing to consider is – in case you don’t wanna use terminal and command-line inputs to start off preprocessing, you can use Koala GUI interface to run tasks. I’m hoping you’re hardcore like I am, and I hope you’ll be typing out stuff before defaulting to GUI clients… Takes up more RAM, in all honesty. 🙂

Step 1:

Choose your editor

There’s a whole arsenal of editors and IDEs (Integrated Development Environments) you can use. I use Atom. Atom is good. Atom is love. Others I’d recommend are Sublime and Brackets. If you’re really into the world of pain, you can use Vim. Extremely high learning curve, tho.

Step 2:

Organize your folders before you start

This is quite important point that most of the developers don’t give enough attention to. I usually work from Laravel (that’s my weapon of choice for server-side framework) and it comes out with serious boilerplate already shoved in, so I don’t have to think too much about folder structure. But if you’re starting from scratch and building things on your own (like we’ll be doing here), then let’s make a plan. Here’s the folder structure:

Aaaaaand let’s keep it like this for now. Create your experiment folder and dig in, open up the editor and create those folders. I’ll wait here.

Step 3:

Running the preprocessing watcher in sass

Now – you’re ready to embrace this journey. Let’s put some content first into the main.scss file:

The indentation that you see here is valid SCSS code. Don’t worry about it. We’ll cover it pretty soon.It’s here just so we know we did in fact hit the ground running. Let’s add up some basic boilerplate for our app/index.html file:

Now, if you’re in a root folder of your lil’ project, you can run following command from the terminal/bask/cmd:

What this’ll do is it’ll start the Sass job, --watch for changes in the sass/main.scss file and output it in the app/css/main.css file! If you open up the index.html file right now in your browser (just double click on it), you’ll see a compelling, moral boosting message to get you started with a nice dark green background and white text font.

woo hoo! all done!

Believe it or not, you just setup your first Sass job using Ruby compiler! You can set up a style of the output by appending --style compressed at the end of the sass command line, you can make it lose all the space it can and output it all on a single line:

All the styles you can:

  1. nested
  2. compact
  3. expanded
  4. compressed

You can turn off warnings with --quiet flag. You can watch multiple files but load only a single file with something like this:

There are tools like Compass, Gulp and a full arsenal of others that can help this look a lot more better… but since we’re starting… we start of from the ground up!

That’s all folks, I’ll see you soon with more, and next stop will be Sass variables!

Beginner’s Guide To Sass Basics

Beginner’s Guide To Sass Basics

So now that you’ve finally decided to learn some Sass basics, and finally took a bold step forward in digging out my site, let’s first introduce you to what Sass is and all it’s goodies.

SASS – Syntactically Awesome Style Sheets

Yeah. Mouthful. And first time I read it was “synthetically” style sheets. My bad, I guess. Basically, Sass is a preprocessor that introduced so much goodies to the plain ol’ CSS, that I’m pretty sure I’m never going back. Basically it’s to the CSS what Typescript Coffeescript (Kudos to Redditor Myrad for correcting me here) is to JavaScript. Sort of. All right, let’s get down to it.

I am gonna list and explain most of what it does here, and then we’ll move on to individual “lessons” that’ll go in depth and explain everything.
So, here’s what Sass brings to the table:

  1. Introduction
  2. Preprocessing
  3. Variables
  4. Nesting
  5. Partials
  6. Imports
  7. Mixins
  8. Inheritance
  9. Operators

Introduction

Sass logo

The Sass in it’s basic form is in my honest opinion confusing.

Sass has two different syntax, so to speak. Original (Sass) was brought into existence back in 2006, Hampton Catlin, and just like his other project (HAML) was built for Ruby on Rails, so was Sass. Basically, they both shared the same syntax that didn’t include any brackets. Kinda confusing when you look at CSS, really. Here’s an example:

I had experience with HAML, YAML, Stylus and other similar syntax, so this was not really too confusing, but still, when we came down to operators, mixins, all that didn’t really float my boat anymore. And it was a little hard for me to get used to, as I didn’t have to use ; to end the code anymore! Then came Sass version 3, and SCSS syntax was introduced, which is pretty much just extension to CSS, bringing in all the power of Sass to it! Literally, everything you write in CSS is a valid SCSS as well! Obligatory example:

See? Just like CSS. All righty, moving on.

Preprocessing

This is the gist of it. CSS on it’s own is interesting, but as your stylesheets are getting piled up and fat with monstrous code… You need a way to whip monstrous code into shape, right? Sass allows you to use a lot of features (see the list a bit above? Everything under point 2). Of course, in order for it to actually work, you need to install Ruby on your machine, or if you’re into GUI Sass compilers, Koala (Windows, Linux and Mac supported) is excellent and totally free. You can also go through my Gulp tutorials and setup a nice tooling chain to get you up and running in no time!

In our examples here, we won’t get much into the gulp (as I have it explained already), we’ll go Ruby-way here. Here’s a nice guide on how to install Ruby on your machine.

Cool! Off to those Sass basics! In the individual tuts that are coming I’m gonna explain how to setup Ruby to process Sass. 🙂

Variables

Variables in Sass are quite the same thing as in any other languages… They store info to use later on in different functions. In these reusable variables you can store anything, really, like other CSS values, colors, font stacks and so on. We use $ here to declare a variable (if you are familiar with PHP, you’re right at your home!). Example:

Once Sass is processed, the variables will resolve in exactly this:

One important note to take here is that variables won’t be processed into the actual code. The $primary-font and $body-background are just for your Sassy usage.

nesting

This is my crush. This is that gal I wanted to take home after every night out. First, let’s have a look real quick at HTML. If you open up developer tools in any page, you’ll see a well structured code, nicely indented, you can pretty much see an ordered hierarchy of elements and easily distinguish which “child” elements belong to which “parent” elements. CSS is flat. Really, it is. Not like my type of girls.

Let’s have a look at the example of nesting:

Now those are the curves I like! (laugh, please, this is the best joke I have for tonight) Keep note tho: Folks recommend not to go wild on this feature. If it’s 4 steps in, that’s plenty. Time to rethink what your doing.

All this nice and fancy nesting will result in the end code like this:

Isn’t that what we write for every single project? That very code? :p

Partials

CSS already has a way of importing other stylesheets. Only problem is, every time you do this, you will have your server make another HTTP request. Not great for page speed reviews, right? Well, sass has a same feature, @import, which will pull in the _partial.scss files (note the _) and combine all that nice code into the code where you made the import call and then process it into a single stylesheet. Better!

Say you have a partial with variables, or reset, or any other piece of code. Let’s go with reset example!

Now let’s pull it in!

The resulting, processed and refined single CSS file will look like this:

Mixins

Imagine JavaScript functions. It looks like this, right?

Now, Sass mixins allow you to do the exact same thing: take a piece of “functionality” or “style” and use it elsewhere. This saves countless hours on repetition and copy/paste work. Imagine you have 10 different buttons, but they all have border-radius property set? In case you didn’t know, if you wanna go full-browser compatibility, you gotta add up -webkit, -moz, -ms and ocassionally -o (blaaaaaah) in front of some properties. Like border radius! Let’s save time by introducing mixins!

So by saying @mixins and then later on “calling that function” with @include we can save a lot of space in our editor, right?

Inheritance

This is exactly what it means. Other classes (or IDs, mind you) can extend FULLY another class. This is extremely useful on – again – buttons! For example, let’s say you have an array of buttons in your arsenal, for different occasions, of course. Example (continued from previous):

Last but not the least:

Operators

Math in CSS… witchcraft? In Sass, quite all right and finally welcomed!  Sass has a handful of standard math operators like +, -, *, /, and % ! Very useful for setting widths, for example. Let’s say you have a 1200px wide container. You’d wanna split it into percentage parts for it’s child elements, right?

This is your very first grid, believe it or not. 🙂

sass basics – explained

This is pretty much an overlay of what Sass basics are. I will be adding up individual/partial tutorials on all the stuff explained here soon, my tempo is just 2 (maybe 3) tuts a week, so stay tuned and we’ll learn quite some more of SASS – SYNTACTICALLY AWESOME STYLE SHEETS!