Chapter 1, Introducing Sass, takes you through the journey of Sass and discusses its essentials. This chapter will introduce Sass, tell you how to install it, and explore how it will make your development workflow smarter and more efficient, ultimately saving you valuable time. It will also help you create a simple layout and show you how to use Sass to compile the code to produce valid CSS.

Chapter 2, Creating Variables and Mixins, explores a key facet of Sass in the form of using variables. It discusses how editing one value can automatically update a whole series of rules at a single stroke. Just imagine altering the font sizes for your website in one go by simply editing one number!

Chapter 3, Building Functions, Operations, and Nested Styles, talks about how to use functions and operators to construct an entire site from just a handful of variables. We will also touch on nesting styles to help make code easier to read and maintain.

Chapter 4, Directing Sass, takes a look at another key element of Sass in the form of directives. It provides information on how to use some of the more popular options, such as @extend or @media. These will be used to a great effect in a series of demos, which quickly illustrates how careful use of these directives can have a significant positive effect on our code.

Chapter 5, Incorporating Sass into Projects, examines how to apply some of the tips and tricks we have covered throughout the book into more practical uses. It talks about several popular frameworks, such as Bootstrap, WordPress, and CSS grids. This chapter also shows you how Sass can be used to great effect to help construct sites, while reducing the amount of code we need to write.

All you need to work through most of the examples in this book is a simple text or code editor, Internet access, and a web browser. I recommend installing Sublime Text, preferably version 3. It has an excellent add-in package system that works well; we will make use of this at various stages throughout the book.

Some of the examples make use of additional software, such as Node or Grunt—details are included in the appropriate chapter along with links to download the application from source.

The book is for frontend developers who want to quickly get up to speed with using Sass. It will make writing CSS styles more efficient. To get the most out of this book, you should have a good working knowledge of HTML, CSS, and jQuery; we will use a little of the latter later in the book.

In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "We'll start by extracting the relevant files from the code download for this book—for this demo, we'll need clicktoggle.scss and clicktoggle.html."

A block of code is set as follows:

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

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

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

min-height: 100px;

#container
  //media query - screen and 320px
  @include breakpoint($phone) {
    #container { max-width: 800px; background: #ccc; box-
      shadow: none; margin: 0 auto; }
  }

Any command-line input or output is written as follows:

npm install

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Once completed, click on Finish."

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.

To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.