Book Image

Instant SASS CSS How-to

By : Alex Libby
1 (1)
Book Image

Instant SASS CSS How-to

1 (1)
By: Alex Libby

Overview of this book

CSS styling has been a key part of developing for the Internet since the early 1990s, but unlike JavaScript, has suffered from the inability to produce dynamic styles, using functions, operators, and variables. SASS uses the power of Ruby to bring support for all three and more to your CSS, allowing you to engage in a more efficient, modular style of working, and making it easier to maintain your CSS styling in your projects.Instant SASS CSS How-to is a practical, hands-on guide that provides you with a number of clear step-by-step exercises, which will help you take advantage of the power of SASS, and give you a good grounding in writing and compiling CSS style sheets using the SASS pre-processor language.This book looks at how you can incorporate SASS into your web pages, and either produce style sheets dynamically, or pre-compile them before including the final article into your site's pages.You will also learn how you can use the power of mixins, functions, and variables to help produce style sheets, and reduce the amount of code you need to write in your style sheets. We will also take a look at how you can incorporate a more modular style to your development workflow, which will help with making style sheets more manageable and easier to update in the future. We will also take a look at how you can build up libraries of reusable code that you can incorporate into your future projects.You will learn everything you need to know to start using SASS to help produce more efficient style sheets in your site's pages, and adopt a more modular development workflow, which will make it easier to maintain your sites in the future.
Table of Contents (7 chapters)

Getting interactive with Script (Become an expert)


If you are using SASS, then there is a likelihood that you are familiar with using the command line, either in a Windows, Apple, or UNIX based environment. Although you can use something like Scout or Compass.app to help take some of the pain out of compiling SCSS files, it is worth trying out the command line – there is a hidden gem available in the form of interactive SASS. Let's take a look at how this works, as part of this next exercise.

Getting ready

All you will need for this exercise is a terminal or command prompt, depending on which environment you use.

How to do it...

  1. Let's make a start by calling up a command prompt or terminal window, entering sass –i at the command prompt, and then pressing Enter:

  2. You will see from the previous screenshot that I've already entered in a command. Go ahead and try it out; a quick look at ColorHexa (http://www.colorhexa.com) shows #5e0000 to be a brownish-red color. Adding it to #444 (a dark gray) gives a nice shade of brown, in the form of #a24444.

  3. Now try entering in margin-left: 5px + 8px/2px…oops! It's come back with an error. I am guessing that you may have been expecting 9px as the answer. (If you were expecting 6.5px, then sorry, that's not correct either!)

  4. Okay, now try entering lighten(#99ccff, 20%), you should get back #3399ff; a check on ColorHexa shows a nice shade of light-blue, which is expected.

  5. To finish, let's now enter in adjust-color(blue, $lightness: -20%, $hue: 20deg) – this renders #330099 as the result, which is a solid shade of purple.

  6. At this point, press Ctrl + D to exit out of the session and then close the window.

How it works...

Right – you're probably thinking "How I can use this in my work…?"

It's a good question – let me explain. Interactive SASS is not meant to be an all-singing, all-dancing part of the library. Think of it as a way of validating your calculations, particularly when working with colors and/or numbers (such as sizes). Interactive SASS allows you to enter in any number of simple calculations, and it will render the results on screen. You won't be able to enter in large mixins, but if you need to confirm what a simple calculation would render, then this is perfect.

In particular, notice the error shown in step 3? While the calculation itself is perfectly valid, Interactive SASSScript doesn't like the margin-left: text at the start, hence the error. If you're wondering why 6.5px is wrong, it is because certain operators are prioritized before others. In this example, the division is done before addition, so 8 px divided by 2 px gives 4 px, plus 5 px gives 9 px as the answer.

Its real power comes in step 5 – the calculation is a bit of a mouthful, so having the ability of Interactive SASS available is a great help to confirm the expected result. It also means that if you wanted to reduce the complexity down to a single color value, then you can. It is entirely up to you.

Let's move on and turn our attention to a different part of the library. We'll be taking a look at using CSS-3 directives within SASS; we will come back to using functions later in the book.