Create a Sass Stylesheet
Style your own lemonade stand's website by compiling Sass and learning to use variables and nested selectors.
Start
Your First Sass Stylesheet
Lesson 1 of 1
- 2Sass 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…
- 3Let’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…
- 4The 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…
- 5Congrats, 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…
- 6Variables 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…
- 7There 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…
- 8In 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…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory