O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Getting Started with Sass

Getting Started with Sass

6 reviews
by Jen Kramer
Publisher: O'Reilly Media, Inc.
Release Date: July 2015
ISBN: 9781491933831
Topics:
View table of contents
Start watching

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 Sass and SCSS syntax.

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.

Table of Contents

  1. Introduction
    1. Welcome 00:00:56
    2. What is Sass? 00:01:47
  2. Configuring the Work Environment
    1. Installing SublimeText 3 and Packages 00:05:27
    2. Exploring the Starting Files 00:05:34
    3. Installing Koala, a Sass Compiler 00:02:33
    4. Creating a Sass Stylesheet 00:04:38
    5. Comments in Sass 00:03:33
    6. Including Simple Variables, Compiling, and Viewing Results 00:07:35
    7. You Try It: Creating Sass Styles with Variables 00:03:41
  3. Working with Variables, Math, and Functions
    1. Global Variables, Local Variables, and Default Values 00:08:47
    2. Manipulating Variables through Math 00:06:08
    3. Manipulating Variables with Core Math Functions 00:07:10
    4. Manipulating Variables with Core Color Functions 00:10:40
    5. You Try It: Manipulating Variables 00:03:58
    6. Writing Your Own Functions 00:06:10
  4. Nesting Expressions
    1. Understanding Nesting with Sass 00:03:07
    2. Using & to Reference Parent Selectors 00:03:02
    3. Nesting Within Selectors and Using Nesting with Caution 00:05:52
    4. You Try It: Nesting 00:03:05
  5. Mixins and Extend
    1. Creating and Using Simple mixins 00:07:22
    2. Understanding and Creating mixins with Variable Arguments 00:08:38
    3. Creating and Using extend 00:04:53
    4. Eliminating Extra Classes with extends 00:03:35
    5. Creating Multiple extends 00:02:39
    6. Chaining extends 00:03:29
    7. Extend-only Selectors 00:04:55
    8. Understanding the Difference Between mixin and extend 00:03:05
    9. You Try It: mixins and extend 00:06:29
  6. Understanding if and else
    1. Understanding @if 00:05:36
    2. Working with @if/@else and Default mixin Values 00:06:55
    3. Media Queries, mixins, and @if/@else 00:10:28
  7. File Management and Organization
    1. Understanding, Organizing, and Compiling Sass Partials and Files 00:11:01
    2. Incorporating External CSS Files 00:03:34
    3. Preparing for Site Launch 00:04:11
  8. Conclusion
    1. Goodbye and Next Steps 00:02:10