Packt+ | Advance your knowledge in tech

You're reading from Mastering Sass

Product typeBook

Published inAug 2016

Reading LevelIntermediate

PublisherPackt

ISBN-139781785883361

Edition1st Edition

Languages

Ruby

Tools

Compass Node.js

Concepts

Web Utilities

Author (1)

Luke Watts

Chapter 2. Sass – The Road to Better CSS

In this chapter, we will cover:

Setting up a simple project based strongly on typography.
We'll look at using Sass from the command line and the various options we can pass to take control of our output.
We'll then set up our project's configuration variables using !default to allow easy overriding in future. These variables will control all of our functions and mixins and will allow the end user to have full control of our Sass library, without needing to touch mixins or functions.
We'll look at writing a small but flexible library of functions and mixins that will deal with setting up a base typography style for our default body, text, and headings. This will be based around the optimal reading line length of 60-80 characters while keeping our font sizes and line heights uniform even when we change font families.
We'll write functions and a mixin to handle the output of our headings and keep the best font sizes and line heights for each heading for sans...

A bit of sassy reminiscing

As I mentioned I started Sass some time ago. I even remember that illustration of the girl with the telephone. Remember her? I always imagined she was having a sassy debate with her friend about the latest web design trends and telling her friend to stop using IDs in her CSS.

Anyways, I can also remember it was actually pretty difficult to learn Sass. The only thing that got me to persevere was I could use as little as I wanted in the beginning, so I had that safety net of plain old CSS. So when I started out I really only used Sass for the variables, imports and the nesting. Even with that, it made my life so much better!

The version was Classy Cassidy(3.0.18), and even though Sass hadn't been offering the .scss syntax for long at that point, it was really starting to make waves, due to the fact you could just write css and use as little or as much of Sass as you wanted. When it's put like that to someone you'd wonder why it wasn't a feature in the first place.

Back...

Setting up our project

You're probably eager to start writing some Sass, so let's jump right in. I'm going to create my project in my root (C:/) directory, but you can place your project wherever is easiest for you. I'll call it mastering-sass and inside I'll create the following files and folders in that folder: sass and index.html and within the sass folder create a file: style.scss.

Open your index.html file in your editor of choice and add the following markup:

<!-- mastering-sass/index.html --> 
<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8"> 
    <title>Mastering Sass: Chapter 2</title> 
    <link href="css/style.css" rel="stylesheet"> 
  </head> 
  <body> 
    <div> 
      <h1>Heading 1</h1> 
      <h2>Heading 2</h2> 
      <h3>Heading 3</h3> 
      <h4>Heading 4</h4> 
      <...

Command line options in Sass

So before we get to our heading styles, let's look at some of the command line options that can be passed along with our Sass command. We saw the --watch option. This tells Sass to watch the sass file or an entire folder changes, and then automatically compiles CSS whenever we save any changes to our Sass files.

Watching files and directories

We also told Sass to watch an entire directory and compile to a separate directory. Therefore, any file we created or updated in our sass directory, whether it was a .scss or .sass file, would be compiled to a CSS file of the same name in the css folder.

Tip

You can even use files with the indented Sass syntax and files written in the SCSS syntax in one project. So if you haven't started using the indented Sasssyntax simply because you don't fancy writing all of your mixins again, or you don't want to have to convert all your files, well you don't have to. Simply include any .scss files partials in a .sass (or vice versa) and...

On the right heading!

So now you should have full control of Sass from the command line. Let's move onto another typography challenge, headings, and sizing them correctly for best results to match the work we did with our body text.

By default, the font-size of headings in most modern browsers is as follows:

h1 is 2em
h2 is 1.5em
h3 is 1.17em
h4 is 1em
h5 is 0.83em
h6 is 0.67em

So you can probably tell that doesn't look quite right. So continuing from our last example where we simply multiplied our font size by a ratio of 1:15 to get what worked best, we need to do something similar. Now that will work fine on our h4, which is 1em (or rem, which is what we are using); however, all the other headings work on a different ratio to each other. Now, I've worked them out already. The good thing is we know how to get our starting value for our h2 regardless of our base font-size. It's always exactly double that. Then we can use the following to calculate the rest of the headings:

h1 / 1.3333 = h2
h2 / 1...

Three things you should know about lists

Here are three important things you should know about lists:

Sass list indexes DO NOT start at zero
You can separate the items in a list with spaces instead of commas
You can even leave out parentheses

Let's dive deep in the preceding mentioned points.

Sass list indexes do not start at zero. Some of you who've dealt with arrays in most languages will be expecting to get a value of $h3-font-size with the preceding code. However, Sass lists are not 0 based. Their first index is, in fact 1, meaning we can use the number that makes sense (to people who don't do a lot of programming) and not be required to subtract 1 from our heading variable first.

You can separate the items in a list with spaces instead of commas. This is means we could have written our list like this instead:

$headings: ($h1-font-size $h2-font-size $h3-font-size $h4-font-size, $h5-font-size $h6-font-size);

One thing to be very careful of when using space separated lists, is using strings...

Heading line heights

Next, we need to take control of the line height of our headings. They too look disproportionate when we switch between the font families. The good thing with this, however, is we've already done the groundwork. Our base-heading-sizes-calc() function will allow us to easily solve this problem. However, again we need to figure out the appropriate formula.

One way of setting the line height would be to simply use the font size of the next heading. For example, when we're using our sans font family:

h1 {font-size: 2rems;} 
h2 {font-size: 1.5rem;} 
h3 {font-size: 1.17rem;} 
// ...and so on

Well, it just so works out that line heights based on the next headings font-size look about right.

h1 { 
    font-size: 2rems; 
    line-height: 1.5rem; 
} 
 
h2 { 
    font-size: 1.5rem; 
    line-height: 1.17rem 
} 
 
h3 { 
    font-size: 1.17rem; 
    line-height: 1rem; 
} 
// ...and so on ...

Data types in Sass

If we look at the base-font-sizes-calc() function, we know it takes in a font family and then calculates the correct value to return. However, what if someone passed in a number? It's reasonable to assume something called base-font-sizes-calc() deals with numbers, right? So we need to make sure we are only getting a string, and if not we need to tell the user this function needs a string which is the font-family and not a number.

Sass has 7 main data types (8 if you count arg list):

string [unquoted, "quoted string", 'single quoted string']
number [1, 0.5, 1rem, 5px, 2em]
bool [true, false]
null [null]
list [(1, 2, 3, 4), ("one" "two" "three")]
map [(h1: 2rem, h2: 1.5rem, h3: 1.17rem)]
color [#bada55, red, hsl(10, 30%, 50%), rgb(255, 160, 80)]

The way you check for a specific type is with the Sass function type-of(). So now we can update our function to perform this check with a simple ifelse statement:

// mastering-sass/ch02/scss/helpers/_functions.scss 
@function...

Summary

We've covered a broad range of Sass features in this chapter. From using variables to allow for easy configuration of our Sass functions and mixins, to error handling and debugging information for times when things go wrong. We've also seen how lists and loops can be extremely useful in reducing repetition when dealing with incrementing values and lists.

In the next chapter we'll take a look at Compass. Compass is known for its great library of mixins and functions which not only help in writing CSS3 for cross-browser compatibility but also for dealing with color, images, sprites and typography. It's also very good at getting a project set up quickly and easily from the command line.

The rest of the chapter is locked

You have been reading a chapter from

Mastering Sass

Published in: Aug 2016Publisher: PacktISBN-13: 9781785883361

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

undefined

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at $15.99/month. Cancel anytime

Author (1)

Luke Watts

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.
Read more about Luke Watts

Personalised recommendations for you

Based on your interests and search pattern

Modernizing Drupal 10 Theme Development

Modernizing Drupal 10 Theme Development covers everything a frontend developer or a Drupal developer needs to know about the Drupal 10 theme layer. Using real-world examples, this book will help you to build up from an empty theme to a fast, responsive, maintainable, and accessible Drupal website in both monolithic and decoupled ways.

BookAug 2023360 pages4

Full Stack Development with Spring Boot 3 and React

Full Stack Development with Spring Boot 3 and React contains a wealth of practical guidance for picking up full stack development. The step-by-step exploration of everything from dependency injection, ORM with Hibernate, and JWTs to RESTful APIs, UI styling, and TypeScript will help you to develop the Spring Boot and React skills you need.

BookOct 2023454 pages5

Modern API Development with Spring 6 and Spring Boot 3

This practical guide teaches inexperienced Java programmers and web developers how to design, develop, test, and deploy highly scalable and maintainable APIs using REST, gRPC, GraphQL, and reactive programming paradigms with Java and Spring Boot. Complete with real-world examples, it will guide you to build enterprise-level APIs and services.

BookSep 2023494 pages1

Hands-On Web Scraping with Python

This book guides you to discover and extract quality data from the web using Python libraries such as requests, lxml, pyquery, scrapy, and to use effective scraping techniques. It’ll help you master the fundamentals and advanced concepts of web scraping and apply your skills to real-world data extraction tasks, with analysis and visualization.

BookOct 2023324 pages

Mastering Blazor WebAssembly

Mastering Blazor WebAssembly is a comprehensive, practical guide that’ll help you to develop advanced web applications. By combining real-world experience with the thorough knowledge needed to build Blazor apps in a masterful fashion, this book enables you to efficiently manage cross-platform mobile development with .NET MAUI and Blazor.

BookAug 2023370 pages4

Mastering Blazor WebAssembly

Mastering Blazor WebAssembly is a comprehensive, practical guide that’ll help you to develop advanced web applications. By combining real-world experience with the thorough knowledge needed to build Blazor apps in a masterful fashion, this book enables you to efficiently manage cross-platform mobile development with .NET MAUI and Blazor.

BookAug 2023370 pages3

Full Stack Web Development with Remix

Unlock the power of the web platform and cutting-edge technologies for your React applications using Remix to take advantage of the full stack to create a great user experience. This book is a complete resource covering the conventions, levers, and primitives of Remix and illustrates concepts through a real-world project.

BookNov 2023318 pages

Real-World Svelte

This book is a must-have guide to unlocking Svelte's true potential. You’ll learn about advanced component development, efficient coding, and powerful UI patterns using actions. With a focus on state management, custom stores, and renderless components, this book equips you to build exceptional web apps with lightning-fast performance.

BookDec 2023282 pages3

Building Micro Frontends with React 18

This book is a step-by-step guide to building production-grade, highly scalable, and performant web apps using multi-SPA and micro apps patterns, where you’ll learn to deal with complexities related to micro frontends. The book is a full life cycle guide to building, deploying, and managing micro frontends in a cloud-native environment.

BookOct 2023218 pages

Drupal 10 Masterclass

This all-in-one guide helps you get up and running with building Drupal applications using the latest Drupal 10 features. You’ll develop a complete practical understanding of Drupal frontend, backend, architecture, content management, themes, and modules to deliver a rich user experience by creating custom Drupal apps.

BookDec 2023310 pages

Full-Stack Flask and React

This book teaches you how to build simple yet efficient production-ready web applications. Starting with an introduction to React, this book will equip you with deeper knowledge of Flask and React technology stacks to undertake web application development with confidence.

BookOct 2023408 pages5

Full-Stack Flask and React

This book teaches you how to build simple yet efficient production-ready web applications. Starting with an introduction to React, this book will equip you with deeper knowledge of Flask and React technology stacks to undertake web application development with confidence.

BookOct 2023408 pages2