Mastering Sass

Table of Contents

Mastering Sass

Credits

About the Author

About the Reviewer

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Requirements

Ruby, Sass, and Compass

Ruby

Ruby installer for Windows

Updating Ruby for Windows

Updating Ruby for Mac

Sass and Compass

Node and NPM

HTML5

HTML

CSS

Programming

The command line

Windows and Unix users

Windows

Unix (Mac and Linux)

You know your command line

Summary

2. Sass – The Road to Better CSS

A bit of sassy reminiscing

Setting up our project

Sass

C'mon, where's the Sass already?!

Command line options in Sass

Watching files and directories

Compile files and folders

Force Sass to compile

CSS output style

Sourcemaps

On the right heading!

A better If

Our heading sizes mixin

Three things you should know about lists

Heading line heights

But wait, there's more...

Allowing for different font families for each heading

Remove repetition

Error handling and type validation

Data types in Sass

@error

@debug

@warn

Bonus round

Summary

3. Compass – Navigating with Compass

Setting up a Compass project

Typography with Compass

What is vertical rhythm?

Vertical rhythm for images

A few things you need to know

Breakpoints and media queries

Aspect ratio

Sizing our headings

CodePen or SassMeister

Getting setup

CSS3, Compass, and Vendor prefixes

CSS regions

Columns

Transforms

Animations

Lists

Floating is a hack

Tag clouds

Sticky footer, stretching, and sprites

Compass and the future

Summary

4. CSS and HTML – SMACSS, OOCSS and Semantics

The good and the bad of CSS grids

Semantics

Naming conventions

OOCSS - Object-Oriented CSS

Separation of structure from skin

Separating container from content

Atomic Design

SMACSS

Base

Layout

Modules

State

Theme

Why aren't you using HSL?

A look at hue, saturation, and lightness

Don't use Photoshop to get HSL values

reset.css versus normalize.css

reset.css

normalize.css

sanitize.css

Make your own

Summary

5. Advanced Sass

Variables

!default

Variable scope

Local scope

!global flag

Variable scope in functions

Deeply nested variable scope

Making arrows in Sass

Come back, !important, all is forgiven

@content directive

Using @content for media queries

Maps

Summary

6. Gulp – Automating Tasks for a Faster Workflow

Setting up our project

Creating our folder and files

Why Gulp and not Grunt?

Node and npm

Node.js, node-sass, and fileWatch

Watching for changes and writing to a file

Setting up Gulp

Gulp watch

BrowserSync

Summary

7. Sourcemaps – Editing and Saving in the Browser

What are source maps and why should you care?

Setting up Source Maps in Firefox

Minor Gulp, Source Maps and BrowserSync issue

Setting up Source Maps in Chrome

Summary

8. Building a Content-Rich Website Components

Setting up our project

Gulp

Adding jQuery

Helpers

Function – get

Mixin – hover links

Mixin – bp (breakpoint)

Mixin – media (based on the OOCSS media component)

normalize.scss

Global base styles

Screen reader text

Layout – grid

Ionicons

Top nav

Grid – container

Search component

Main nav

Cart slide-out component

Mixin – media centered

Footer

Summary

9. Building a Content-Rich Website – Layout

Installing Susy

Setting up a basic grid

The container mixin

The span mixin

The last keyword

The $susy configuration map

Setting up a grid system

The concept of our grid system

The breakpoints

The columns naming convention

Building the grid

Testing the grid

The header

Main header inner

Main nav

Mobile menus

Top nav

Main nav

Image banner

Featured products

Testimonial

Subfooter and footer

The markup

The SCSS

Finishing touches

Summary

10. Building a Content-Rich Website – Theme

Typography

Dropcaps

Tagcloud

Color scheme

Search

Image banner

Featured products

Testimonials

Services

Footer

Section titles

Summary

Mastering Sass

Mastering Sass

Copyright © 2016 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: August 2016

Production reference: 1230816

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78588-336-1

www.packtpub.com

Credits

About the Author

Luke Watts is a web developer and digital artist from Galway, Ireland. He started learning web design in 2012 after many years working with AutoCAD in the manufacturing industry. In 2014 he set up his own web development agency called Affinity4 (http://affinity4.ie) in Galway, Ireland. He is an Oracle Certified MySQL Developer, and an Adobe Certified Associate (Photoshop and Dreamweaver).

Luke has a keen interest in learning and teaching others. He has written articles for many websites, including his own blog, on a wide range of subjects such as SEO, WordPress Development, SVG, Sass, Jade, OOP, Git, Silex, MySQL, and PHP.

Luke is also an accomplished artist, both in traditional mediums (mostly pencil and ink) and in digital painting. When not building websites or writing code he will most likely be working on a digital painting on his Wacom tablet using Photoshop or creating a 3D model or scene in any number of 3D modeling applications.

I'd like to thank Gareth Milligan, who, from the very beginning showed me what web design had to offer, not only as a career, but also as a hobby. His advice, encouragement, and support in those early days of learning web design and when setting up my own company, helped me greatly. I'd also like to thank Marc Patterson, who helped me get through the difficult MySQL exams and who started me on my journey into PHP and programming.

To my friends, and colleagues who helped me stay positive and focused while writing this book. I would not have made it this far without each of your support. Also, thank you to my family who have always encouraged me and given me the courage to take on such a challenge. To my mother and father, this book is mostly dedicated to you. I miss you both terribly.

I'd also like to acknowledge the web design community. It has always been welcoming and open to newcomers. Designers and developers are always eager to share their knowledge and hard work with the community others. It’s that open spirit which keeps this industry going and makes it the most exciting and rewarding industry to work in.

Finally, I would like to thank Packt, who gave me this amazing opportunity. Thank you so much! I've enjoyed working with you all immensely and hope it won't be the last time.

About the Reviewer

Bartosz Skupień is highly motivated interactive developer with a good technical knowledge and open mind for all frontend technical news. Pixel perfection and a good eye for any kind of design are his strong abilities. He is eager to learn new skills and competencies, and is not afraid to make mistakes but able to draw conclusions. He is a team person, always willing to contribute own experience and best practices to make improvements. Creative Engineer who likes working in big global projects putting in force the latest styling trends and solutions. Currently working for a global company helping enterprises deploy digital solutions that transform their business.

www.PacktPub.com

For support files and downloads related to your book, please visit www.PacktPub.com.

eBooks, discount offers, and more

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www2.packtpub.com/books/subscription/packtlib

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.

Why subscribe?

Fully searchable across every book published by Packt

Copy and paste, print, and bookmark content

On demand and accessible via a web browser

Free access for Packt account holders

Get notified! Find out when new books are published by following @PacktEnterprise on Twitter or the Packt Enterprise Facebook page.

Preface

The Web is moving fast! Since its boom in popularity in the late 90's to the early 2000's, web technology has begun to move at breakneck speed. However, while programming languages such as JavaScript, PHP, Ruby, Python, Java and others were developed to be quite well suited for their purposes on the Web, one of the core languages was holding everyone back…CSS. For almost a decade, developers and web designers had to devise numerous clever hacks and workarounds to make up for the shortcomings of this simple language. That's right! CSS is meant to be simple! A very conscious decision was made to omit variables, functions, loops, and conditional statements from CSS. This was to make it simple for beginners. When the W3C even started to consider introducing variables into the CSS specification it was met with opposition by many who felt it would make it too difficult for non-programmers and beginners.

The revolutionary movement that sparked the debate (and subsequent introduction) of CSS variables was started by one of Hampton Catlin's projects called Sass. In 2006, Hampton created Haml. The goal of Haml was to simplify writing HTML by removing the need for closing tags, instead using nesting and a Ruby-like syntax. Around the same time, he released Sass, which was a very similar idea, but for CSS. While Haml has not been as successful perhaps, Sass has quickly become a favorite, if not an industry standard among designers and developers. Yet the original indented Sass syntax was still a turn-off for many designers. It was perhaps too far removed from the familiar curly braces and semi-colons of CSS for many to embrace.

However, when the SCSS syntax arrived, Sass exploded into life. You couldn't read a web design blog, watch a tutorial, or go to a conference without Sass being at least mentioned. This surge in popularity was largely because with the newer SCSS syntax you could write plain old CSS if you wanted and work in the other features at your own pace. It was relatively easy for beginners to get on board with it, once they got passed working with the command line.

So why all the excitement about Sass in the first place. Well, Sass as you probably know by now, gives you access to variables, functions, loops, conditionals and many other features which allow for code reuse. Things which CSS lacks. These are things which, once you've started using them to write CSS you'll begin to wonder how anyone writes CSS without it.

Regardless of what stage you're at with Sass, this book aims to show you what it is truly capable of, using working examples and real-world situations. We'll work through setting up projects, we'll look at Compass, sourcemaps, using Sass with NodeJS, Gulp, and Susy. We'll also talk about writing good CSS and some useful best practices and methodologies to know, such as SMACSS, OOCSS, and BEM, which will help you organize and manage large projects. Then after all that, we'll put it all together to create a mobile-first homepage for an e-commerce website.

What this book covers

Chapter 1, Requirements, covers the software and libraries which will be used throughout this book. Here, we'll discuss more than what you'll need installed, we'll also look at some required knowledge too, such as the commonly used command line/terminal commands and some HTML and CSS examples.

Chapter 2, Sass – The Road to Better CSS, will cover setting up a Sass project and taking control of the CSS output. We'll also be writing mixins and functions to create some baseline typography styles. We'll then look at using the !default flag, lists, nesting, loops, and error handling and debugging to create more robust, usable code.

Chapter 3, Compass – Navigating with Compass, will look at creating a project using Compass. We'll look at how to take control of the default options through the command line, including what directories Compass creates by default, and where. We'll look at the many functions and mixins Compass has.

Chapter 4, CSS and HTML – SMACSS, OOCSS and Semantics, will talk about some CSS and HTML concepts which are vital to a good Sass workflow, such as OOCSS, SMACSS, BEM, and Atomic Design, and also why you should convert to using HSL instead of RGB or HEX color codes.

Chapter 5, Advanced Sass, will look at some of the more advanced features of Sass. We'll dive into the nuances of variable scope, using extends and mixins for better code resuse, the @content directive and maps.

Chapter 6, Gulp – Automating Tasks for a Faster Workflow, will start working on our final project. We'll look at installing and configuring Gulp, and installing various plugins and setting up tasks to automatically watch our project for changes and compile Sass and sourcemaps, and then reload the browser. All in one keystroke!

Chapter 7, Sourcemaps – Editing and Saving in the Browser, what source maps are and why you should care. We'll look at setting up sourcemaps to work in Firefox and Chrome with a few short examples of how this can be really useful when designing in the browser.

Chapter 8, Building a Content-Rich Website Components, will continue with our final project. We'll use many of the functions and mixins we wrote before to create reusable, configurable components as the core of our design.

Chapter 9, Building a Content-Rich Website – Layout, will install and set up Susy through bower. Once that is done we'll create a complete mobile-first grid system using breakpoints and the built in Susy mixins.

Chapter 10, Building a Content-Rich Website – Theme, we'll conclude our design, by giving it some color and style. We'll work out what fonts to use to best match the brand indentity of the project, and we'll add some eye catching elements such as dropcaps, tag clouds and stylish title underlines.

What you need for this book

To follow along with the examples in this book you will need Ruby version 2.1.7 or greater. You will then need the latest Compass and Sass gems. The Compass gem will install Sass also. You will also need NodeJS and npm. Npm will come built in with NodeJS. Any version after 4.2.1 will do. Finally, you will need Bower which can be installed through npm.

Not to worry…in Chapter 1, Requirements,  we will cover installing Ruby, Compass, Sass, and NodeJS.

Who this book is for

This book is aimed at those who know CSS3 and HTML5 quite well and who've built a few small-to-medium-sized websites from scratch using Sass and Compass.

Conventions

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 can include other Sass files through the use of the @import directive.

A block of code is set as follows:

@import '../../bower_components/susy/sass/susy';

$susy: (

    columns: 12,

)

$breakpoints: (

    sm: 480px,

    md: 768px,

    lg: 980px

);

@each $size, $value in $breakpoints {

    @media (min-width: map-get($breakpoints, $size) {

        @for $i from 1 through map-get($susy, columns) {

            .col-#{$i}-#{$size} {

                @include span($i);

                &-last {

                    @include span($i last);

                }

            }

        }

    }

}

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

[@import '../../bower_components/susy/sass/susy';

$susy: (

    columns: 12,

)

$breakpoints: (

    sm: 480px,

    md: 768px,

    lg: 980px

);

@each $size, $value in $breakpoints {

    @media (min-width: map-get($breakpoints, $size) {

        @for $i from 1 through map-get($susy, columns) {

.col-#{$i}-#{$size} {

                @include span($i);

                &-last {

                    @include span($i last);

                }

            }

        }

    }

}

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

$ sass -–update assets/sass/main.sass:assets/css/main.css -–style=expanded

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: Clicking the Next button moves you to the next screen.

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

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.

Customer support

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.

Downloading the example code

You can download the example code files for this book 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.

You can download the code files by following these steps:

Log in or register to our website using your e-mail address and password.

Hover the mouse pointer on the SUPPORT tab at the top.

Click on Code Downloads & Errata.

Enter the name of the book in the Search box.

Select the book for which you're looking to download the code files.

Choose from the drop-down menu where you purchased this book from.

Click on Code Download.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

WinRAR / 7-Zip for Windows

Zipeg / iZip / UnRarX for Mac

7-Zip / PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Mastering-Sass. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.

Piracy

Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at [email protected] with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.

Questions

If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.

Chapter 1.  Requirements

One of the hardest things to overcome when learning any specific web development topic is what I like to call the void. The void is that place where most of us get when we've covered all the essentials and beginner stuff. We've watched all the beginner videos and read the essential books and we're confident we're past being a beginner, but we're not quite an advanced user. We're in the void that sits in between those two states.

You know you're in the void because all the beginners stuff is too easy, but all the advanced material seems to start a step too far ahead, almost like they start on step 3 and you're missing steps 1 and 2. I think we fall into the void because somewhere after being a beginner we all continue on very different paths, no matter what we're learning. We pick up different tools and tricks to make our daily task quicker and easier.

This chapter's goal is to try and avoid the void by quickly going over what I personally use and will be using throughout this book. I'm not just talking about the stuff you'll need installed, I'm also talking about some required knowledge too.

We will cover the following topics:

Installing Ruby, Sass, and Compass

Updating Ruby, Sass, and Compass

Installing or updating Node and NPM

Required HTML, CSS, and programming knowledge

Basic command line/terminal knowledge

Ruby, Sass, and Compass

If you've used Sass and Compass before, then you already have installed them. However, I'd like to ensure your versions of Ruby, Sass, and Compass are all what they need to be to follow along with the examples I'll use later in the book. Many of the topics will use the very latest features of Sass and Compass.

Ruby

Sass and Compass run on a language called Ruby. Ruby became very popular in web development by offering clean syntax while still being very powerful. It achieves this power and simplicity by being strictly object oriented. In simple terms, everything from a single letter to a full class is treated as its own object in Ruby, meaning you can treat everything in Ruby much the same way. There are no second class citizens in Ruby.

In this book, we won't be working directly with Ruby; however, you do need it installed for Sass and Compass. So let's look at getting set up.

Ruby installer for Windows

I'm currently working on Windows. Yes, you read that correctly, I'm one of those weirdos who is actually more productive using Windows than Mac. So, for those of you on Windows, you'll know we don't have Ruby