Select Page
Setting up Gulp and Sass

Setting up Gulp and Sass

SASS (Syntactically Awesome Stylesheet)

It is a blessing. Whoever works frontend development for more than a couple of years will tell you the exact same thing. Gulp is a tool that we’ll use to convert and pre-process SASS (or SCSS) into the plain CSS that browsers understand and we’ll make it look like a piece of cake.

“If you think math is hard, try web design.” – Thrish Parr

Inspiring quote to begin with. Now off to work.

Gulp is a build tool which can help you out in a number of tasks when it comes to web development. More often than not, it is on duty with some of these tasks:

  • Compiling CSS with preprocessors like SASS or LESS
  • Optimizing assets
  • Live-reloads when a file is edited/saved
  • Create a quick web server

This doesn’t even scratch the surface of what you can do with Gulp, but it’s quite possible where it finds the largest use. Even thou it’s not too complicated, you’ll still have to learn to really use the Gulp to create tasks, and I’ll give you a hand here.

First of all, why gulp?

Gulp is not the only build tool you can use. There’s a whole army of tools with similar options, Grunt and Brunch to name a couple. The main reason why I love Gulp is because of it’s simplicity.  Configurations with Gulp tend to be quite a breeze, and lemme show you, but first, let’s install Gulp. Make sure you have NPM installed, if you don’t, check out my guide for installing it here.

Next, open up your cmd (as an admin) or terminal, and type:

If you’re on Mac or Linux, you should add sudo as the first word of the code. Like this:

That will enable the global gulp command you can run in the terminal.  (that’s why we used the -g flag)

Let’s create our project, shall we?

Before anything else, let’s create a folder where we’ll host our little experiment, and these ‘test’ folders I like to call “experiments”.
Note, I’ll be using git bash on Windows machine. You have been warned.
All righty. Let’s start by creating a folder experiment in our root and initiating npm project: (you still have terminal running, right?)

This is what you’ll get:

After npm init

Feel free to hack and slash your keyboard with enter key, all the info submitted here.  Awesome. Start your favourite editor into the experiment folder, or use Vim like I do here (a bit higher learning curve on this one, tho). Vim is integrated into the Git bash, so I’ll just use that to make certain edits.

Right now, you have created your npm entry point -> package.json . This folder is where npm looks into and does it’s actual package managing, and a lot more I won’t cover in this lil’ tut.

Next thing, back in the experiments folder, time to install Gulp into the project. This is separate from the global installment of gulp, which we use to run commands. This what we install right now is our ‘staging ground’ for gulp tasks, so to speak. So let’s do it:

Please not the difference that the –save-dev flag has been used here. This means we’ll only use Gulp in development, not in production. Let’s see what that command did. Here’s a screenshot:

With node_modules folder

A-ha! New folder. NPM will use node_modules folder to store all project dependencies, so never-ever manually delete that folder. Important stuff.

Next, let’s just quickly assume we’re gonna have certain folder tree for our experiment. Here’s a list of files/folders you can create:

So, in a lot of projects, actual web site is not served from the root of the project, and we won’t assume that either. Let’s assume our app will run from ‘application’ folder. And don’t forget the gulpfile.js. This is what we’re focusing on this lesson.

My first task

Time to SASS it up? Almost. Let’s open up the gulpfile.js first. And before starting to write gulp tasks, you need to “require” it. JavaScript folks are familiar with this, I’m sure. This is how you use the actual npm packages.

So, once open, enter this line of code in the first line:

The very basic syntax for using gulp is this:

So the task name, the ‘name-of-the-task’ parameter there is what you’ll type out once you start gulp from the termina/bash. Let’s start with fundamental “hello” message:

Let’s go back to terminal and see the fruit of our labor! Enter:

This should be the result of what you’ll get in the terminal:

gulp heya

Awesome! Let’s make it more exiting!

SASS with Gulp

First of all, in order to compile SASS into the CSS, we’ll need a middleware package called gulp-sass. The way we install this is quite simple, really, back to terminal, into the root “experiment” folder and let’s npm install it!

Next stop, if you didn’t guess it, we gotta ‘require’ it into our gulpfile, like this:

Just add it on top, line 2 of the file. Next, last step, we need sass/scss file, right? Create ‘styles.scss‘ file under ‘application/scss/‘ directory.

Now SASS is at our reach! Let’s setup a basic sass/scss compiler:

Let’s create something scss specific into our styles.scss file:

Go back to the root, where your gulpfile is, and run gulp sass command!

run gulp sass

BOOM! Fireworks! National anthem! Cheerleaders cheering! Birds birding… y’know what I mean!

Let’s navigate to our /application/css/ file and see what we have here:

finished task sass

Congrats are in order! You have successfully setup your preprocessor and you can use sass (or scss, whichever syntax you prefer) in your projects!

Stay tuned for additional tutorials on how we can make even more usability out of Gulp! Someone said “Automatic browser refresh upon file save“…?

Click to continue with this series of tutorials…

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!