Getting Started with Sass

Video description

Get an introduction to Sass—syntactically awesome style sheets—in this hands-on video course from programmer and author Jen Kramer. Sass allows CSS designers to create style sheets that are easier to follow and less repetitive, leveraging data structures like variables, if/else statements, functions, and loops. With this video, you’ll learn how to install and configure a Sass compiler, understand the differences between Sass and CSS, and learn the …

Getting Started with Sass

Video description

You can use whatever text editor you like; Jen explains where to download SublimeText3 and packages that make working with HTML, CSS, and Sass a great experience. You should also install Koala for compiling Sass files, which is Mac/PC compatible and free.

The video will teach you how to:

Set up a typical file structure for Sass
Work with a Sass compiler to create CSS that the browser can understand
Create and work with variables, mixins, nesting, extends, and more to keep code DRY
Work with Sass’s built-in functions to manipulate color, make calculations, and more
Create a real-world website with Sass
Learn industry best practices for Sass file management, so all the code generated is easily managed

Since 2000, Jen Kramer has built websites that are supportive of business and marketing goals, in a freelance capacity and as part of an agency. She is a frequent conference speaker and runs many workshops. Jen has created 24 video training courses for Lynda.com on topics including Bootstrap, web semantics, Joomla, and website strategy, and planning.

Publisher resources

Download Example Code

Introduction

Welcome

What is Sass?

Configuring the Work Environment

Installing SublimeText 3 and Packages

Exploring the Starting Files

Installing Koala, a Sass Compiler

Creating a Sass Stylesheet

Comments in Sass

Including Simple Variables, Compiling, and Viewing Results

You Try It: Creating Sass Styles with Variables

Working with Variables, Math, and Functions

Global Variables, Local Variables, and Default Values

Manipulating Variables through Math

Manipulating Variables with Core Math Functions

Manipulating Variables with Core Color Functions

You Try It: Manipulating Variables

Writing Your Own Functions

Nesting Expressions

Understanding Nesting with Sass

Using to Reference Parent Selectors

Nesting Within Selectors and Using Nesting with Caution

You Try It: Nesting

Mixins and Extend

Creating and Using Simple mixins

Understanding and Creating mixins with Variable Arguments

Creating and Using extend

Eliminating Extra Classes with extends

Creating Multiple extends

Chaining extends

Extend-only Selectors

Understanding the Difference Between mixin and extend

You Try It: mixins and extend

Understanding if and else

Understanding @if

Working with @if/@else and Default mixin Values

Media Queries, mixins, and @if/@else

File Management and Organization

Understanding, Organizing, and Compiling Sass Partials and Files

Incorporating External CSS Files

Preparing for Site Launch

Conclusion

Goodbye and Next Steps

Start your Free Trial

Self paced

Go to the Course
We have partnered with providers to bring you collection of courses, When you buy through links on our site, we may earn an affiliate commission from provider.