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)

Writing mixins – developing a style (Must know)

Okay – you're probably thinking I'm going mad at this point; why do we need to develop a style for writing mixins? Don't worry, all will be revealed as part of this recipe!

Getting ready

For this recipe, you won't actually need anything, we're just going to look at some theory. Although you may want to play with code from this book, using the principles we'll go through as a basis for developing your own style.


This recipe should be treated as part of a number of steps that you can take to help develop your own style. We will use examples to illustrate each stage, although they may not necessarily do much when compiled!

How to do it...

  1. Let's make a start with our first guideline – a module should contain a unit of code in a partial. For example, a file could contain code for buttons, another for forms, and a third for typography.


    Partials are blocks of source code that are inserted into generated CSS files. The underscore character tells SASS not to produce a corresponding CSS file for the block of code.

  2. Our second guideline is around the output of that code. A module should never contain code that would compile into CSS code. This will limit the contents of the module to mixins, variables, and functions.

  3. Taking this further, our third guideline is that while a module may contain a number of mixins or functions, there should always be a primary mixin which is responsible for outputting the resulting CSS code.

  4. Our next guideline recommends that we should use the primary mixin name as the name for our module. For example, if our module contains a primary mixin for buttons, then we should name the partial as buttons.scss.

  5. If we use variables in our modules, we should also give consideration to making sure that they have a default set. This will allow us to override these variables in a theme stylesheet, or when we reuse the module in future projects.

  6. Finally – and in conjunction with our first guideline – almost all CSS for a project should be written in a modular style. This will help you with reusing styles across stylesheets in a project, or to reuse code between different projects.

How it works...

The beauty of working with SASS and CSS is that there are no hard and fast rules about presentation, it is all about developing your own style. The previous guidelines are not meant to be set in stone, they are designed to help structure your code and steer you towards a more modular approach, so that you can begin to reuse your code in future projects.