Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Sass and Compass Designer's Cookbook
  • Table Of Contents Toc
  • Feedback & Rating feedback
Sass and Compass Designer's Cookbook

Sass and Compass Designer's Cookbook

By : Jobsen, Stuart Robson
5 (2)
close
close
Sass and Compass Designer's Cookbook

Sass and Compass Designer's Cookbook

5 (2)
By: Jobsen, Stuart Robson

Overview of this book

Sass and Compass Designer's Cookbook helps you to get most out of CSS3 and harness its benefits to create engaging and receptive applications. This book will help you develop faster and reduce the maintenance time for your web development projects by using Sass and Compass. You will learn how to use with CSS frameworks such as Bootstrap and Foundation and understand how to use other libraries of pre-built mixins. You will also learn setting up a development environment with Gulp. This book guides you through all the concepts and gives you practical examples for full understanding.
Table of Contents (18 chapters)
close
close
17
Index

Using Sass on the command line

You can run Sass on the command line to compile your Sass files directly into the CSS code.

Getting ready

In the Installing Sass for command line usage recipe of this chapter, you have already read how to install Sass. Linux users have to open a terminal, while Mac users have to run the Terminal.app, and Window users have to use the cmd command for command-line usage.

How to do it...

Use the following steps to find out how to compile your Sass code in the command line:

  1. Create a Sass template called first.scss that contains the following SCSS code:
    $color: orange;
    
    p {
      color: $color;
    }
  2. Then, run the following command in your console:
    sass first.scss
  3. You will find that the preceding command outputs the CSS code as it is shown here:
    p {
      color: orange; }

How it works...

Firstly, notice that the example code in this recipe uses the newer SCSS syntax for Sass. In the Writing Sass or SCSS recipe of this chapter, you can read why this book uses the SCSS syntax in favor of the original indented Sass syntax.

The sass command directly outputs the compiled CSS code to your console. To save the output in a file, you will have to set a second output argument, as follows:

sass first.scss first.css

The preceding command creates a new first.css CSS file that contains the compiled CSS code.

There's more...

When compiling your Sass templates into CSS files, Sass does not only create CSS files, but also a folder called .sass-cache. By default, Sass caches compile templates and partials. In the Working with partials recipe of this chapter, you can read what partials are. Caching of the compiled templates and partials makes recompiling after your changes faster.

You can use the --no-cache option to disable caching.

The --compass option makes Compass imports available and loads the project's configuration. You can read more about this option in the Extending Sass with Compass helper functions and more recipe of Chapter 6, Using Compass.

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Sass and Compass Designer's Cookbook
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon