Your First Sass Stylesheet
Lesson 1 of 1
  1. 1
    Sass, or Syntactically Awesome StyleSheets, is an extension language for CSS. With Sass, you can write clean, sustainable CSS code and solve the common repetition and maintenance challenges pre…
  2. 2
    Sass can’t be directly interpreted by your browser, so it must first be converted, or compiled, to CSS before the browser can directly understand it. Compiling refers to converting code to low…
  3. 3
    Let’s get started! Sass has many perks that enable us to write succinct, readable code. In this lesson we will explore three concepts: + Variables + Mixins + Nests In the process, you’ll use Sass…
  4. 4
    The first Sass construct we will learn about is nesting. Nesting is the process of placing selectors inside the scope of another selector: - In programming, a variable’s scope is the cont…
  5. 5
    Congrats, you’ve written your first nested selectors! In SCSS, nesting is not limited only to selectors. You can also nest common CSS properties if you append a : colon suffix after the name of t…
  6. 6
    Variables in SCSS allow you to assign an identifier of your choice to a specific value. Why is that useful? Unlike in CSS, if you need to tweak a value, you’ll only have to update it in one pl…
  7. 7
    There are different data types you can assign to a variable in CSS. In addition to the color data type we have seen, there are also: 1. Numbers, such as 8.11, 12, and 10px. Notice that whi…
  8. 8
    In addition to color, numbers, strings, booleans, and null, Sass also has two other data types, lists and maps. * Lists can be separated by either spaces or commas. For example, the followin…
  9. 9
    Congratulations! You completed your first Sass StyleSheet and learned some powerful new concepts: 1. Nesting is the process of placing child selectors and properties in the scope of a parent …

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo