Sass Essentials

1 (1 reviews total)
By Alex Libby
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies

About this book

Sass is a professional grade CSS extension language known for its stability and versatility in the field of web design. It introduces new concepts to CSS, such as variables and nesting, that allow users to speed up their workflows and make their code more dynamic.

Sass Essentials is a fast-paced, hands-on guide that breaks down the mysteries of preprocessing CSS styles using the Sass preprocessor and shows you how you can apply simple techniques to quickly and efficiently create CSS style sheets.

With this book, you will dive in and familiarize yourself with some popular directives and see how, with some care and planning, they can prove to be really powerful tools to use in Sass.

Publication date:
July 2015
Publisher
Packt
Pages
186
ISBN
9781782174301

 

Chapter 1. Introducing Sass

A key part of any website development is creating the styling. Over the years, we've moved from simple styles, such as <i>, <b>, and <h1>, to creating complex special effects using CSS3. Building the style code takes time and effort. In this chapter, we'll introduce Sass and see how it will make your development workflow smarter and more efficient, ultimately saving you valuable time. We will also take a look at the following:

  • Installing and compiling Sass using the command line

  • Adding support to compile Sass within text editors or using Node

  • Working with GUI-based compilers

  • Using source maps

  • Creating a simple layout using Sass

Ready to make a start?

Note

All the examples will be geared towards the Windows platform because this is my normal platform of use; where possible, alternatives for Mac and Linux platforms will be given.

 

Getting acquainted with Sass


Let's set the scene. I can imagine that you're an accomplished developer who is adept at crafting web pages and styling them with carefully coded CSS.

You're probably thinking that you don't have anything to learn, right? After all, you're happy with handling vendor prefixes; you know exactly what needs to be done to ensure that the latest CSS3-based styles work in all browsers. You're not keen on changing an established workflow that favors writing even less code, creating reusable blocks of code that will help you save even more time later, or even reusing code that others have already written for you, or are you?

Well, if you are, you've definitely come to the right place. Welcome to the world of Sass! What is it all about? Simply put, Sass is a CSS preprocessor or an extension of CSS. In some respects, it's akin to taking shorthand notes from a presentation and then pushing them through a process that spits out valid CSS at the other end.

Now, before you panic and run for the hills, dreading the thought of having to learn a whole new way of working, there's no need to worry. Sass can be as easy or as hard as you make it. Sure, there's a lot of useful functionalities that you will likely come across in time, but for now, with a few changes to your workflow, you'll see how easy it is to incorporate enough of the basics of Sass to get you started.

When working with Sass, I've found it wise to keep three principles in mind:

  • Follow the KISS principle: Don't try to overcomplicate matters at this stage. Sass allows you to produce very complex functions. Chances are that if you're getting too complex, then it is likely that you need to rethink your styling.

  • Sass is just an extension of CSS: There is no benefit (or need) to change everything in one go. As long as you have the basic compilation process set up with the source and destination files in the right place, then one of the larger parts of the work is done.

  • Automate or reuse whenever you work with Sass: With tools such as Grunt, Compass, Sass, and so on, a large part of your work is done for you. We'll take a look at various tricks you can use to help get Sass to do the heavy Grunt work for you throughout the book.

Keep these principles in mind; you will see that with only a few modifications to your workflow, Sass will help you be more effective at writing CSS. The beauty of Sass is that if you already use well-known tools, such as Grunt or Node, then we can easily use both tools to compile Sass. We can even use autoprefixers to deal with those vendor prefixes. I don't know about you, but I am sure you have better things to do than work out what vendor prefixes are needed for your code.

Okay, let's make a start. The first task we need to look at is setting up Sass; before we do so, we just need to set up our project area, so let's get that out of the way first.

 

Preparing our project area


For each project we work on, we'll save all the files in a project area. So, go ahead and create a new folder called projects; we will refer to this throughout the book as our project workspace. Within this projects folder, we need to add some subfolders. So, let's add css, img, and sass, as shown in the following screenshot:

Note

The node_modules folder will be added automatically later in the chapter.

Now that preparing our project area is out of the way, let's get on and set up Sass, which is ready for use.

 

Installing and compiling Sass


The first step in our journey is to get Ruby installed; this is a dependency to work with Sass. The easiest route to do this is to use the prebuilt RubyInstaller application, which is available at http://rubyinstaller.org. This includes both Ruby: the execution environment and associated documentation as part of the same package.

Let's make a start. Perform the following steps:

  1. We'll start by installing Ruby. Navigate to http://rubyinstaller.org/downloads and click on the Download button to download the application.

  2. From the list under RubyInstallers, click on the top most entry. Make sure that you pick the right version for your platform (32-bit and 64-bit versions are available). Double-click on rubyinstaller-2.2.1.exe to begin the setup process, select your language of choice, tick I accept the license, and click on Next.

  3. On the Installation Destination and Optional Tasks dialog, set the options and then click on Install:

  4. Once completed, click on Finish.

Tip

If you're using Linux, you can install Ruby through the apt package manager, rbenv, or rvm with the sudo su -c "gem install sass" command. For Mac users, you can skip this stage because Ruby comes preinstalled.

At this point, we will have a working Ruby installation, so you can go ahead with the installation of Sass with the Gems package management framework:

  1. Bring up Command Prompt. Then, enter the following command:

    gem install sass
    
  2. Gems will run through the installation, as shown in this screenshot:

  3. Once completed, enter the following command at Command Prompt to confirm a successful installation:

    sass -v
    
  4. If it is successful, then Sass will respond with the version number and the working name of the installation (in this case, Selective Steve).

Right, okay. We have Sass installed, so what's next? Ah yes! Of course, we can use any decent text editor to modify Sass files (as they are plain text). However, to make editing easier, we should install some form of syntax highlighting.

Let's do this now. For the purpose of this exercise (and throughout the book), I will assume that you are using the cross-platform Sublime Text editor, which can be downloaded from http://www.sublimetext.com. It's not free, but there is no time limit to evaluate the package. For a per-user license of USD 70, you can use this package on any number of PCs without requiring extra licenses. Now, what if other editors offer that flexibility, I wonder?

Adding Sass support to Sublime Text

While we ponder how powerful and flexible Sublime Text is, let's make a start with getting it installed and adding Sass support:

  1. The first step is to install Sublime Text; if you don't already have it, head over to http://www.sublimetext.com. Then, click on the link for the version appropriate to your platform. If you already have it installed, then move onto the next step.

  2. Once completed, we need to install Package Control. This is Sublime Text's package manager, which we will use to install any new package in the application. Head over to https://packagecontrol.io/installation and follow the instructions at this link.

Once installed, we can now add the highlighting support; we will use the package available at https://github.com/P233/Syntax-highlighting-for-Sass, which can be installed from within Sublime Text itself.

  1. Open Sublime Text. Then, click on Preferences | Package Control to bring up Package Control and enter install. Click on Package Control: Install Package when it appears:

    Tip

    You can open Package Control from the keyboard by hitting Command + Shift + P (Mac) or Shift + Ctrl + P (Windows).

  2. When the Install option shows a list of packages, enter sass in the textbox to show the Sass package; once displayed, click on it to begin the installation:

  3. The installation of Sass highlighting support will be completed once the following screenshot is displayed in the status bar of Sublime Text:

  4. At this stage, if you were to try editing a Sass file, you may find that it is still devoid of color; if this is the case, to fix this, we may need to tell Sublime Text which syntax to use when editing Sass files. To do this, click on Preferences | Package Control. Then, remove any text in the drop-down field. Enter Sass in the text field and select Set Syntax: Sass from the drop-down field:

    Tip

    You can open Package Control using Ctrl + Shift + P (for Linux/Windows) or Command + Shift + P (for OS X).

If all is well, the text will now appear in color. Once we start creating Sass files later in this chapter, we should see something akin to this:

Okay, let's move on. Now that we can view Sass files with the correct syntax highlighting, we need to compile our Sass content in valid CSS files. There are several ways to achieve this; we can compile Sass content with a task runner—such as Grunt, in a preprocessor, or directly from Sass. We will cover examples of all three, starting with taking a look at compiling directly from Sublime Text.

Compiling Sass files within Sublime Text

So far, we've added the syntax support for Sass within Sublime Text. To make Sublime Text really useful, we need to go one step further and add support to compile Sass code in a valid CSS file. Let's take a look at what is involved in getting it working, using the package available at https://github.com/nathos/Sass-textmate-bundle/tree/sublime:

  1. Open the command panel by pressing Ctrl + Shift + P (Linux/Windows) or Command + Shift + P (OS X) and select Package Control: Install Package.

  2. When the packages list appears, enter SASS Build and click on SASS Build to begin installing it:

  3. The installation is complete when the following screenshot is displayed on the status bar in Sublime Text:

At this point, we can now compile Sass files directly from within Sublime Text. To do this, we need to press Control + B (Linux/Windows) or Command + B (OS X); to view the results, it's worth having Windows Explorer open with the Sass file listed. We can then check to see whether it has been updated once the compilation process is complete.

Removing installed packages

So far, we've installed support to compile within Sass that works, but this has raised an irritating issue. It displays a dialog box to verify that the compilation is complete. Once we've made a few changes, this becomes very irritating.

Thankfully, we can fix this—although we can edit the Python file behind the Sass Build plugin, my preference is to use Node and Grunt to provide the compilation process instead; we can tie in additional tasks, such as validating our CSS, for any potential errors.

Note

Node is an event-driven framework that, with Grunt (a task runner), allows you to automate repetitive tasks, such as compiling Sass, so that we can focus on developing our code. We can tie in additional tasks such as cleaning CSS code or applying vendor prefixes.

To remove the package that we've just installed, press Ctrl + Shift + P to bring up Package Control. Then, enter Package Control: Remove Package and select the Sass Build package from the list. You will likely see two packages there—we also need to remove this package too:

Once these packages have been removed, go ahead and restart Sublime Text. It's not always necessary, but it is good practice to do so when removing packages. Now that they are, it leaves us ready to install Node and Grunt, which we will do later in this chapter.

 

Using GUI-based compilers


Throughout this chapter, we've concentrated on using Sublime Text to both edit and compile our Sass code. Although this works perfectly well, it would be remiss to not at least cover some of the other options available to compile Sass.

Why would we need to use a separate application if we can do what we need to do directly from within Sublime Text? I hear you ask. Simple. You may already have a text editor that you don't want to change, but unfortunately, it doesn't come with the support to compile Sass. So, you need something to compile your code. Here are a few options to consider:

  • CodeKit: This is a shareware applet from http://incident57.com/codekit/; this one is for Mac users only and the license for it is 32 USD.

  • Hammer: This is available at http://www.hammerformac.com; this web development tool is for the Mac platform. It can be purchased from the Mac App Store for USD 23.99 and contains support to compile Sass files automatically.

  • Koala: This is my personal favorite; this free application is available for Windows, Mac, and Linux platforms at http://www.koala-app.com.

  • Prepros: This is another cross-platform app available at https://prepros.io for Windows and Mac platforms; this requires a license and is available for USD 29.

  • Scout: This open source applet to compile Sass files is available at http://mhs.github.io/scout-app/. It comes in versions available for both the Windows and Mac platforms.

You may come across a couple of other tools once you have gained more experience with Sass:

  • LiveReload: This is available at http://livereload.com/. It automatically refreshes the page when an action is completed and is now largely redundant.

  • Compass.app: This is available at http://compass.handlino.com/. It is a style sheet authoring framework that has built-in support to work with Sass.

Let's change tack at this point. Although we will concentrate on using Sass from within Sublime Text throughout most of this book, it's still worth taking a moment to install and try out at least one of the preprocessors for Sass. With this in mind, let's take a look at installing and using the cross-platform open source application: Koala.

Installing Koala

Although we can easily write and compile our code within Sublime Text, there may be instances where we have to use a third-party application. For example, if we have to share the CSS files with other developers who are yet to experience the joys of using Sass. As we've already seen, there are a few options available. Let's take a look at installing one of these in the form of Koala:

  1. We'll start by downloading the application. So head over to http://www.koala-app.com and click on the Download button from the main page of the site.

  2. Click on the filename and then on Download at the bottom of the page to commence downloading.

    Note

    For anyone using Mac or Linux, look for the Other system versions link below the download button on the main page of the site.

  3. Double-click on the application once the download is complete to begin the installation; accepting all the default settings is fine for the purposes of this demo.

Once completed, we should have something akin to the following screenshot when double-clicking on the application icon. In this instance, it has already been configured to monitor a project folder that we will use later in this chapter:

Okay, let's put our newfound knowledge to the test and compile some Sass code. For now, keep Koala open; we're about to use it in the next exercise.

 

Compiling Sass manually


As someone once said, "It's time..."

In the next couple of pages, we will take an initial look at how to compile Sass in practice; don't worry if it doesn't mean much now because all will become clearer later in the book. For now, let's concentrate on familiarizing ourselves with compiling Sass in anger. For this demo, we will simply render a number of statements of varying sizes from <h1> right down to <h5> on screen; we'll work out the size automatically before rendering it on screen.

Let's make a start with the following steps:

  1. From the code download that accompanies this book, extract a copy of sassfunctions.html and sassfunctions.scss. Then, place the HTML markup file at the root of our project folder and the Sass file in the sass subfolder.

  2. Switch to Koala (if you've not already closed it). Then, position it onscreen so that you have it and Windows Explorer both showing onscreen; the latter must show the list of subfolders in the project folder area.

  3. Drag and drop the sass folder to Koala so that it displays the contents of the sass folder.

  4. Open up a copy of sassfunctions.scss from our project area. Go ahead and change the greeting to Hi Chrome users in place of Firefox:

    $firefoxGreeting: "Hi Chrome users! This is a...";
    $mainColour: #845;
    $h1Size: 4em;
    $removeMargin: -20px;
  5. In Windows Explorer, check the details of our Sass file. If all is well, the greeting will have been updated with the same dates and times showing on the .scss, .map, and .css files (the latter two in the css folder).

  6. Open up a copy of sassfunctions.css in Sublime Text; we should see something similar to this screenshot:

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

We've now successfully compiled our first Sass file; any subsequent changes we make to the file will automatically be picked up and recompiled by Koala. Onwards we go; we've got Sass installed and it compiles fine, but there's still something wrong.

Ah! Yes. I know. In this age of automation, why are we spending time completing tasks manually using a separate piece of software if we're already using packages, such as Node and Grunt, elsewhere in our normal daily work? It doesn't make sense to introduce yet another application if we're already using Node or Grunt. Instead, we can easily automate them. I'll show you how as part of the next exercise.

Tip

It's worth noting that if the file hadn't compiled correctly, then it will still produce a CSS file, but instead, contain details of the error.

 

Using Node and Grunt


A frequent drawback of using Sass, until recently, was the need to always have to use an additional piece of software to compile our code. Not any more; as many developers already use the Node.js platform, it makes sense for those who do use it to take advantage of its power to use it to perform the compilation work for us.

Thankfully, it's really easy to make it happen, although it involves a slight change in how we process our Sass files. We can then couple this with the grunt-contrib-sass plugin available at https://github.com/gruntjs/grunt-contrib-sass and use it to compile our code.

Let's take a look and see what is involved:

  1. The first step in our process is to install Node. For this, head over to http://www.nodejs.org and click on the version appropriate for your platform. Double-click on the installer to begin the process, accepting all defaults.

  2. Now that Node is installed, extract copies of the package.json and gruntfile.js files from the code download that accompanies this book and then save them to the project area.

  3. We need to set Grunt so that it is available from the command line. To do this, go ahead and run the following command from the Node.js command prompt:

    npm install -g grunt-cli
    
  4. Next, fire up the Node.js command prompt. Then, change the location to our project area and enter this command:

    npm install grunt-contrib-sass –-save-dev
    

    Node will go away and install all three packages. Once completed, we will see a confirmation similar to the following screenshot:

  5. At this stage, we're ready to run Grunt. So, go ahead and enter this command at the prompt:

    grunt
    

If all is well, Grunt will display the following message:

Node is now configured to automatically watch for any changes and get Sass to recompile the .scss files in valid CSS when we make a change to the original source code.

Testing our installation

Now that we have our automatic compilation process set up, lets put it to the test:

  1. We'll start by extracting a copy of styles.scss from the code download and saving it to the project area.

  2. Next, make a note of the date and time in the Date modified column of Windows Explorer. We'll use this to prove that Sass has updated our file.

  3. Open up styles.scss and look for this code block at or around lines 7-10:

  4. Change the text of $firefoxGreeting, as shown in the following command (for now, don't worry too much about what this means; all this will become clear in the next chapter):

    $firefoxGreeting: "Hi Google users! This is a….";
  5. Save the change. As soon as it detects a change, it will automatically recompile the code and produce valid CSS:

We can now set this running in the background. So, any future changes we make to this file will be compiled automatically.

If you prefer to simply use Node and not Grunt, then the same plugin is available for Node only at https://github.com/sass/node-sass; it performs the same function as grunt-contrib-sass.

Okay, so we've set up a process that will take care of compiling our code automatically. Now, it's worth spending a little time to go through what we've set up because there are a few key points we need to cover, which will help with future projects. We'll take a look at the plugins that we've used to create our automated system, starting with grunt-sass.

Exploring the compilation process

If you're new to working with Node and Grunt, then it is worth spending a little time going through what we created in the last exercise; it contains some useful tricks to help remove some of the tedium behind making changes to Sass code.

The two key elements are package.json and gruntfile.js; package.json is used by Node's package manager to help manage dependencies for any project; gruntfile.js details the tasks that should be run with Grunt. Let's take a look at package.json first.

This is how the package.json file for our project looks:

{
  "name": "Project1",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "0.4.5",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-sass": "^0.16.0"
  }
}

It's a simple affair. We first name the project and give it an appropriate version number. Then, we state the dependencies for the project. In this instance, we will use Grunt (http://www.gruntjs.com), a watcher (https://github.com/gruntjs/grunt-contrib-watch), and the Sass plugin for Grunt (https://github.com/gruntjs/grunt-contrib-sass).

The key to this file is that once it has been created, we can install Grunt, grunt-contrib-watch, and grunt-contrib-sass, using this command from the project folder:

npm install

A key point related to this is the use of grunt-contrib-watch; this has a facility to automatically reload your code in the event of a change. This makes using any external application, such as LiveReload, surplus to requirements.

Tip

Details of how to set up grunt-contrib-watch are available at https://github.com/gruntjs/grunt-contrib-watch#optionslivereload.

The second key part of this demo is the gruntfile.js file, which contains the steps required for Grunt so that it knows what to do once it has been invoked. This is a little more involved, so let's break it down into sections, beginning with the initialization and fetching of details from the package.json file:

module.exports = function(grunt) {
  grunt.initConfig({

Next up, comes our watcher; it watches for any changes to our Sass files and invokes the Sass task at the appropriate moment, as shown in the following code:

    watch: {
      sass: {
        files: ['sass/**/*.{scss,sass}','sass/_partials/**/*.{scss,sass}'],
        asks: ['sass:dist']
      },

In livereload, we will watch for any changes to HTML, JavaScript, CSS, or image files and force the browser to refresh if it detects that a change has been made:

      livereload: {
        files: ['*.html', 'js/**/*.{js,json}', 'css/*.css','img/**/*.{png,jpg,jpeg,gif,webp,svg}'],
        options: {
          livereload: true
        }
      }
    },

This is the most important part of gruntfile.js. This task covers the compilation of Sass files in valid CSS. It is set to produce source files (more anon) with CSS being compressed. At present, it is set to only compile if changes are made to sassfunctions.scss, but this can easily be changed to a wildcard entry:

    sass: {
      options: {
        sourceMap: true,
        outputStyle: 'compressed'
      },
      dist: {
        files: {
          'css/sassfunctions.css': 'sass/sassfunctions.scss'
        }
      }
    }
  });

Last but by no means least, we register the default task and set Grunt to load the tasks when this is called:

  grunt.registerTask('default', ['sass:dist', 'watch']);
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
};

Note

We can use grunt or grunt default at Command Prompt; either will call the Grunt tasks for this project.

Right, okay. Our Sass is now compiling. Now is a good opportunity to take a quick look at a useful feature, which will help with debugging CSS produced from Sass files. Source maps can be a little fiddly to get working, but thankfully, there is a really easy option we can use, which we included in the gruntfile.js file that we just used to compile Sass. Let's delve in and learn more about using it to produce our source map.

 

Using source maps


Source maps are a useful tool to help us troubleshoot issues with CSS styles by providing a reference back to the source line in our code.

They have had something of a chequered past; the most high-profile instance of it not working is likely to be within jQuery itself. Automatic support was added a few years ago, but this was subsequently changed to become manual due to issues with generating the source map file.

Thankfully, they are a cinch to generate within Sass; most modern browsers of at least 1-2 years old will have support available (either by default or once it has been switched on).

The beauty of the Grunt file that we just created is that we've already set Grunt to create a source map for us. This is shown in the highlighted line:

      options: {
        sourceMap: true,
        outputStyle: 'compressed'
      },

There are more options available at https://github.com/sass/node-sass#sourcemap that we can configure, but this should be sufficient to get us started.

Once the Sass file is compiled, we'll see an addition at the end of the compiled CSS file, which points to the source map:

If we open up sassfunctions.css.map, we should find this:

{
  "version": 3,
  "mappings": "AAWA,EAAG;EAEF,KAAK,EAAE,sBAAgC;EACvC,SAAS,EAND,GAAG;EAPV,SAAoB;IAClB,OAAO,EAIQ,iCAAiC;;AAWpD,EAAG;EAEF,KAAK,EAAE,OAAwB;EAC/B,UAAU,EAXI,KAAK;EAYnB,SAAS,EAAE,KAAY;EApBtB,SAAoB;IAClB,OAAO,EAIQ,iCAAiC;;AAkBpD,EAAG;EAEF,KAAK,EAAE,OAAyB;EAChC,UAAU,EAlBI,KAAK;EAmBnB,SAAS,EAAE,KAAY;EA3BtB,SAAoB;IAClB,OAAO,EAIQ,iCAAiC;;AAyBpD,EAAG;EAEF,KAAK,EAAE,OAAyB;EAChC,UAAU,EAzBI,KAAK;EA0BnB,SAAS,EAAE,KAAY;EAlCtB,SAAoB;IAClB,OAAO,EAIQ,iCAAiC;;AAgCpD,EAAG;EAEF,KAAK,EAAE,OAAyB;EAChC,UAAU,EAhCI,KAAK;EAiCnB,SAAS,EAAE,KAAY;EAzCtB,SAAoB;IAClB,OAAO,EAIQ,iCAAiC",
  "sources": ["sassfunctions.scss"],
  "names": [],
  "file": "sassfunctions.css"
}

It won't mean much, but it contains references to where we can find the original sources in sassfunctions.scss and how they translate to the compiled versions in sassfunctions.css. If we take a look at the output of sassfunctions.html in a DOM inspector, we would normally expect to see the line reference in a SCSS file, as shown in this screenshot:

However, if we right-click on the rule, and select Show original sources:

The inspector will replace the CSS reference with the equivalent one from our Sass source:

The beauty of this is that if we click on the sassfunctions.scss:12 line to the right, it takes us to the start of the rule in the Sass file so that we can see the source rule being used to create our styles.

Tip

You may find that you need to set the output style to Expanded for this to work correctly. Once the code has been finalized, it should be set to Compressed for production use.

Let's put some of what we've covered throughout this chapter to good use and create a simple mock-up of a web page that uses some basic Sass-driven styles. It won't win any awards, but it will be the perfect introduction to what is coming later in the book.

 

Creating a simple layout


In the next few pages, we'll mock-up a simple web page with a side menu. This is to illustrate how easy it is to compile the code and produce valid CSS.

The demo isn't fully functional, but it can be easily used as a basis for something more complex. At this stage, we'll concentrate more on how we compile the code. Before we begin adding markup, we need to make a change to our compilation process, so let's sort this now.

Setting up our compilation process

Remember earlier in the chapter where we set up Node and Grunt to compile our CSS? Let's revisit that functionality now; we will use it to compile the code for our demo, but set it to compile a specific file in the previous demo. We need to alter it to watch for changes in our file for this demo, so let's fix this now. Perform the following steps:

  1. Open up a copy of gruntfile.js from our project area and look for the values highlighted in the following code:

    dist: {
      files: {'css/sassfunctions.css': 'sass/sassfunctions.scss'}
    }
  2. We need to change it to allow automatic compilation of our Sass code for the demo page, so alter it as follows:

    dist: {
      files: { 'css/demopage.css': 'sass/demopage.scss' }
    }
  3. Save the changes and close the file. Then, bring up the Node.js command prompt and change the location to our project area.

  4. At the prompt, enter this:

    grunt
    
  5. Minimize the window; we need it running in the background, but it doesn't have to be fully visible on screen.

We're now ready to add our CSS styles and compile them automatically with Grunt. Let's go ahead and set up the markup and Sass rules for our demo. Once completed, we will end up with a demo page similar to this screenshot:

Preparing the markup and styles

We're now ready to set up our demo page, so let's get started with adding the markup. Perform the following steps:

  1. We'll start by extracting the demopage.html file from the code download that accompanies this book and saving it to the root of our project area. We also need the header.jpg image. Go ahead and drop this in the img folder in our project area.

  2. Next up, we need to add our style sheet. So, go ahead and create a new file called demopage.scss. Save this to the sass subfolder in our project area.

  3. In pagedemo.scss, go ahead and add the following styles. Don't worry too much about what they all do in detail; for now, let's concentrate on how to compile the styles to produce valid CSS. Let's start with setting some values:

    $baseWidth: 800px;
    $mainWidth: round($baseWidth / 1.618);
    $sidebarWidth: round($baseWidth * 0.382);
  4. We now need to set some color variables. Sass will automatically switch the appropriate color values at compilation; it makes our code easier to read:

    $black: rgb(0, 0, 0);
    $white: rgb(255, 255, 255);
    $light-gray: rgb(204, 204, 204);
    $dark-moderate-blue: rgb(62,122,144);
    $very-soft-orange: rgb(232, 210, 150);
  5. This block of code calculates the font size to use for various elements on our page with rem units:

    @function calculateRem($size) {
      $remSize: $size / 16px;
      @return $remSize * 1rem;
    }
  6. Next up, we will sort out the relevant font sizes to use for elements on our page:

    @mixin font-size($size) {
      font-size: $size;
      font-size: calculateRem($size);
    }
  7. The next six styles take care of the relevant sections of our page, beginning with the main container:

    body {
      max-width: $baseWidth;
      padding: 0.3125rem;
      border: 0.0625rem solid black;
      margin: 5% auto;
      border-radius: 0.25rem;
      box-shadow: 0.25rem 0.25rem 0.25rem 0 rgba($black, .5);
      font-family: 'Kite One', sans-serif;
    }
  8. Then, comes the title text for the header:

    h1 {
      @include font-size(32px);
      color: #FFFFFF;
      font-weight: 400;
      padding: 1.563rem 0 0 6.25rem;
      position: absolute;
    }
  9. We can't have title text without some form of background, so let's add this now:

    header {
      @include font-size(18px);
      height: 8.125rem;
      background: url("../img/header.jpg") $dark-moderate-blue;
    }
  10. We have a title, but a page is nothing without content, so let's fix this by adding this rule:

    section {
      width: $mainWidth;
      float: left;
      box-sizing: border-box;
      height: 35.94rem;
      padding: 0.625rem;
    }
  11. We need to finish off the page with a footer. This includes the styling for the social images shown on the right-hand side of the footer:

    footer {
      @include font-size(12px);
      border-top: 0.0625rem solid $light-gray;
      clear: both;
      height: 4.063rem;
      padding: 0.3125rem 0 0;
      img {
        background: url('../img/sprites.png') $white;
        background-repeat: no-repeat;
        width: 10.94rem;
        height: 3.75rem;
        float: right;
      }
    }
  12. Last but by no means least, we need something in our navigation. So, let's take care of this now. First with the container, followed by the styles used within navigation entries, as shown in the following code:

    nav {
      width: $sidebarWidth;
      border-right: 0.0625rem solid $light-gray;
      float: left;
      box-sizing: border-box;
      height: 35.94rem;
      margin: 0.3125rem 0;
      li { list-style: none; margin: 0.3125rem; }
      a {
        text-decoration: none;
        &:hover { background-color: $very-soft-orange; padding: 0.3125rem; transition: .5s ease; }
      }
    }
  13. At this point, our Sass code is ready to be compiled, so let's go ahead and save demopage.scss; if all is well, we should see newly compiled CSS and source map files, as shown in this screenshot:

  14. To prove that we have valid CSS, a look at demopage.css will show something similar to this screenshot:

  15. Go ahead and preview the results in a browser. If all is well, we should have something akin to the screenshot at the start of this exercise.

Dissecting the Sass styles

Throughout the demo, you may have noticed that we introduced a few Sass techniques; it's worth exploring these now. To give you a flavor of what to expect later in the book, let's first take a look at these lines:

$baseWidth: 800px;
$mainWidth: round($baseWidth / 1.618);
$sidebarWidth: round($baseWidth * 0.382);

Here, we've implemented three variables. We will start with setting a value for $baseWidth to 800 pixels; the second and third variables are implemented as fraction values of $baseWidth before being rounded down to the nearest integer.

Note

The values used in the calculations make up the Golden Ratio – this ratio was designed to produce an aesthetically pleasing effect; in this instance, we use it to produce a layout that balances content space in proportion to the navigation. For more details, head over to Wikipedia, at https://en.wikipedia.org/wiki/Golden_ratio.

Next comes this little function, which we will use to calculate font sizes in rems:

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

We will use it in this reusable block of code, known as a mixin, to translate pixel-based font sizes; it will render font sizes in rem values, falling back to pixels if rem values are not supported:

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

Moving on, we introduced our discussion with a look at the variables created at the beginning of our code; now, it's time to see them in use. We've used them in several places, of which this is a perfect example:

#content {
  width: $mainWidth;
  ...
}

A quick look at the DOM Inspector will show you how the variable has been translated into valid CSS:

The final technique that we will take a quick look at is that of nesting—how often have you written code that refers to the same (or similar) selectors, which may be two or three levels deep? Instead, we can reduce the code we need to write by grouping similar (or identical) styles together, as shown in the following code:

footer {
  @include font-size(12px);
  border-top: 0.0625rem solid $light-gray;
  clear: both;
  height: 4.063rem;
  padding: 0.3125rem 0 0;
  img {
    background: url('../img/sprites.png') $white;
    background-repeat: no-repeat;
    width: 10.94rem;
    height: 3.75rem;
    float: right;
  }
}

We can see how this translates into valid CSS from this screenshot:

We'll explore these and more throughout the book; the key though to getting started with Sass is to keep it simple. Once your compilation process is set up and working, it is just a matter of writing code and letting Node/Grunt do the rest!!

 

Summary


Phew! We've covered a lot in our introduction to working with Sass, so let's take a moment to cover what you've learned.

We kicked off with a look at how to install Sass before adding support for Sass to text editors using Sublime Text as an example; this includes both syntax support and an option to compile Sass files directly from the editor. We also looked at how to remove the build package before switching to using Node and Grunt in order to compile our code automatically.

Next, we discussed how to compile Sass code using Koala, a third-party application. We understood how to install it for use and covered a number of other alternatives that we can explore at a later date if desired. We finished with how to add support for source maps in order to help with troubleshooting Sass code. We then rounded out the chapter with a demo, creating a simple web page that used some of the techniques that will be explored throughout the book.

Ready to learn more? The next step in this awesome journey is to take a look at how to work with variables and mixins, where we can explore how easy it is to create reusable blocks of code for current and future projects.

About the Author

  • Alex Libby

    Alex Libby has a background in IT support. He has been involved in supporting end users for almost 20 years in a variety of different environments; a recent change in role now sees Alex working as an MVT test developer for a global distributor based in the UK. Although Alex gets to play with different technologies in his day job, his first true love has always been with the open source movement, and in particular experimenting with CSS/CSS3, jQuery, and HTML5. To date, Alex has written 11 books on subjects such as jQuery, HTML5 Video, SASS, and CSS for Packt, and has reviewed several more. Responsive Web Design with HTML5 and CSS3 Essentials is Alex's twelfth book for Packt, and second completed as a collaboration project.

    Browse publications by this author

Latest Reviews

(1 reviews total)
The book is not about SASS, it is about how to work with SASS using the author environment. More than essentials is an "Instant ... " series book because it assumes public like and use Ruby, Node, Sublime and Windows, at least. The examples need Grunt, GitHub and so on. If you remove the external systems and utilities then the book is void.
Book Title
Access this book, plus 7,500 other titles for FREE
Access now