HTML and CSS course · Module 7: SASS
Variables in Sass
In this lesson5
A temple's palette is a dozen or so values: gold, lapis lazuli, the color of sand, two fonts and a few spacings. If you type each of them by hand, you lose consistency at the first change, because an old shade always survives somewhere. Variables in Sass give every value a name, like a cartouche bearing the pharaoh's name: you write it once and then call it up wherever it is needed. They are a powerful tool that makes maintaining code and implementing changes easier.
Defining Variables
Variables in Sass start with the dollar sign ($). After the name you put a colon, the value and a semicolon. You can assign various values to them, such as colors, lengths, percentages, font names, boolean values and more. Here are three sample declarations:
1$main-color: #c06;
2$font-stack: Helvetica, sans-serif;
3$base-line-height: 1.5;We have a color, a list of fonts and a unitless number here. The declarations alone will not generate a single line of CSS, because a variable exists only in the source file. It is also worth knowing that in variable names Sass treats hyphens and underscores as the same character, so $font-stack and $font_stack are the same variable. I recommend hyphens because that is how we name properties in CSS.
Using Variables
Once a variable is defined, you place its name wherever you want to use its value, even next to other values in a single declaration:
1body {
2 color: $main-color;
3 font: 100% $font-stack;
4 line-height: $base-line-height;
5}The compiler replaces each variable with its value, so in the CSS you will see color: #c06, and the font shorthand will get the value 100% Helvetica, sans-serif. After compilation the body rule looks exactly as if you had typed those values by hand.
Variable Scope
Variables in Sass have scope, which means they are only available within the block where they were defined. If you define a variable at the top level, outside any selectors or rules, it is global and you can use it throughout the stylesheet. However, if you define a variable inside a rule or selector, it will only be available within that block, like treasure locked in a single chamber:
1$global-color: blue;
2
3.foo {
4 $local-color: green;
5 color: $local-color; // green
6}
7
8.bar {
9 color: $local-color; // error, $local-color is not available here
10}The .foo rule gets the green color, but at .bar the compilation fails, because the $local-color variable does not exist outside the .foo block. The $global-color variable remains available in both rules.
Sass also lets you reuse a name. If you declare a variable with the name of a global variable inside a selector, you create a local variable that shadows the global one only within that block, and outside it the global value does not change. The !global flag lets you deliberately overwrite a global variable from inside a block, but use it sparingly.
When the Compiler Reports an Error
The error at .bar is a great opportunity to learn how to read compiler messages. Dart Sass tells you exactly what happened, in which file and on which line:
1Error: Undefined variable.
2 ╷
39 │ color: $local-color; // error, $local-color is not available here
4 │ ^^^^^^^^^^^^
5 ╵
6 styles.scss 9:10 root stylesheetThe first line describes the problem, and the last one points to the file, the line number and the column. With a message like this you can fix any error in five steps:
- Read the compilation error message.
- Find the file and the line number it points to.
- Check the syntax: a missing semicolon, a curly brace or a typo in a variable name.
- Fix the code.
- Compile again and check the result in the browser.
Why It Matters
Variables in Sass are one of the most important tools for keeping CSS code consistent and easy to manage. Thanks to them you create more dynamic, configurable stylesheets. My advice: keep all global variables at the top of the file or in a separate file, and in the next lesson you will see how to move them into a partial and load it with the @use directive.
In the sandbox below, change the value of one variable in the main.scss file and watch how many places in the resulting CSS change at once.
Remember: a variable is a cartouche, one name and one value that the compiler writes wherever you call it up.
Code for this lesson: index.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>SCSS - E-commerce Project</title>
7 <link rel="stylesheet" href="main.css">
8 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
9</head>
10<body>
11 <!-- Header -->
12 <header class="header">
13 <div class="header__top">
14 <div class="container">
15 <div class="header__top-info">
16 <span>+1 555 123 4567</span>
17 <span>contact@shopmaster.com</span>
18 </div>
19 <div class="header__top-links">
20 <a href="#">About us</a>
21 <a href="#">Shipping</a>
22 <a href="#">Help</a>
23 </div>
24 </div>
25 </div>
26
27 <div class="header__main">
28 <div class="container">
29 <a href="#" class="header__logo">ShopMaster</a>
30
31 <div class="header__search">
32 <input type="text" placeholder="What are you looking for?">
33 <button type="submit">Search</button>
34 </div>
35
36 <div class="header__actions">
37 <a href="#" class="header__actions-item">
38 <span></span>
39 <span>Account</span>
40 </a>
41 <a href="#" class="header__actions-item">
42 <span></span>
43 <span>Favorites</span>
44 <span class="badge">3</span>
45 </a>
46 <a href="#" class="header__actions-item">
47 <span></span>
48 <span>Cart</span>
49 <span class="badge">5</span>
50 </a>
51 </div>
52 </div>
53 </div>
54
55 <nav class="navigation">
56 <div class="container">
57 <ul class="navigation__menu">
58 <li class="navigation__item">
59 <a href="#" class="navigation__link">Electronics</a>
60 </li>
61 <li class="navigation__item">
62 <a href="#" class="navigation__link">Fashion</a>
63 </li>
64 <li class="navigation__item">
65 <a href="#" class="navigation__link">Home & Garden</a>
66 </li>
67 <li class="navigation__item">
68 <a href="#" class="navigation__link">Sports</a>
69 </li>
70 <li class="navigation__item navigation__item--sale">
71 <a href="#" class="navigation__link">Sale</a>
72 </li>
73 </ul>
74 </div>
75 </nav>
76 </header>
77
78 <!-- Hero Section -->
79 <section class="hero">
80 <div class="hero__content">
81 <h1>Winter sale up to -70%</h1>
82 <p>Discover the best deals on electronics, fashion, and much more!</p>
83 <div class="btn-group">
84 <a href="#" class="btn btn--primary btn--large">View offers</a>
85 <a href="#" class="btn btn--outline btn--large">Learn more</a>
86 </div>
87 </div>
88 </section>
89
90 <!-- Categories Section -->
91 <section class="categories section">
92 <div class="container">
93 <h2 class="section__title">Popular categories</h2>
94 <div class="categories__grid">
95 <a href="#" class="category-card">
96 <div class="category-card__icon">◆</div>
97 <h3 class="category-card__title">Electronics</h3>
98 <p class="category-card__count">1234 products</p>
99 </a>
100 <a href="#" class="category-card">
101 <div class="category-card__icon">◆</div>
102 <h3 class="category-card__title">Fashion</h3>
103 <p class="category-card__count">5678 products</p>
104 </a>
105 <a href="#" class="category-card">
106 <div class="category-card__icon">◆</div>
107 <h3 class="category-card__title">Home & Garden</h3>
108 <p class="category-card__count">910 products</p>
109 </a>
110 <a href="#" class="category-card">
111 <div class="category-card__icon">◆</div>
112 <h3 class="category-card__title">Sports</h3>
113 <p class="category-card__count">2345 products</p>
114 </a>
115 </div>
116 </div>
117 </section>
118
119 <!-- Featured Products -->
120 <section class="products section">
121 <div class="container">
122 <div class="section__header">
123 <h2 class="section__title">Featured products</h2>
124 <a href="#" class="btn btn--ghost">View all →</a>
125 </div>
126
127 <div class="products__grid">
128 <!-- Product Card 1 -->
129 <div class="product-card">
130 <div class="product-card__badge product-card__badge--sale">-30%</div>
131 <div class="product-card__image">
132 <img src="https://picsum.photos/300/300?random=10" alt="Product 1">
133 <div class="product-card__overlay">
134 <button class="btn btn--primary btn--small">Quick view</button>
135 <button class="btn btn--outline btn--small">Like</button>
136 </div>
137 </div>
138 <div class="product-card__content">
139 <p class="product-card__category">Electronics</p>
140 <h3 class="product-card__title">Smartphone XYZ Pro 128GB</h3>
141 <div class="product-card__rating">
142 <span class="product-card__rating-stars">5/5</span>
143 <span class="product-card__rating-count">(125)</span>
144 </div>
145 <div class="product-card__price">
146 <span class="product-card__price-current">$349</span>
147 <span class="product-card__price-original">$499</span>
148 <span class="product-card__price-discount">-30%</span>
149 </div>
150 <div class="product-card__actions">
151 <button class="btn btn--primary">Add to cart</button>
152 </div>
153 </div>
154 </div>
155
156 <!-- Product Card 2 -->
157 <div class="product-card">
158 <div class="product-card__badge product-card__badge--new">New</div>
159 <div class="product-card__image">
160 <img src="https://picsum.photos/300/300?random=11" alt="Product 2">
161 <div class="product-card__overlay">
162 <button class="btn btn--primary btn--small">Quick view</button>
163 <button class="btn btn--outline btn--small">Like</button>
164 </div>
165 </div>
166 <div class="product-card__content">
167 <p class="product-card__category">Audio</p>
168 <h3 class="product-card__title">Premium Wireless Headphones</h3>
169 <div class="product-card__rating">
170 <span class="product-card__rating-stars">4/5</span>
171 <span class="product-card__rating-count">(89)</span>
172 </div>
173 <div class="product-card__price">
174 <span class="product-card__price-current">$199</span>
175 </div>
176 <div class="product-card__actions">
177 <button class="btn btn--primary">Add to cart</button>
178 </div>
179 </div>
180 </div>
181
182 <!-- Product Card 3 -->
183 <div class="product-card">
184 <div class="product-card__image">
185 <img src="https://picsum.photos/300/300?random=12" alt="Product 3">
186 <div class="product-card__overlay">
187 <button class="btn btn--primary btn--small">Quick view</button>
188 <button class="btn btn--outline btn--small">Like</button>
189 </div>
190 </div>
191 <div class="product-card__content">
192 <p class="product-card__category">Gaming</p>
193 <h3 class="product-card__title">NextGen Gaming Console</h3>
194 <div class="product-card__rating">
195 <span class="product-card__rating-stars">5/5</span>
196 <span class="product-card__rating-count">(234)</span>
197 </div>
198 <div class="product-card__price">
199 <span class="product-card__price-current">$549</span>
200 </div>
201 <div class="product-card__actions">
202 <button class="btn btn--primary">Add to cart</button>
203 </div>
204 </div>
205 </div>
206 </div>
207 </div>
208 </section>
209
210 <!-- Newsletter -->
211 <section class="newsletter">
212 <div class="container">
213 <div class="newsletter__content">
214 <h2 class="newsletter__title">Subscribe to the newsletter</h2>
215 <p class="newsletter__description">Get the best deals and stay up to date with the latest news!</p>
216 <form class="newsletter__form">
217 <input type="email" placeholder="Your email address" class="newsletter__input">
218 <button type="submit" class="btn btn--primary">Subscribe</button>
219 </form>
220 </div>
221 </div>
222 </section>
223
224 <!-- Footer -->
225 <footer class="footer">
226 <div class="container">
227 <div class="footer__grid">
228 <div class="footer__column">
229 <h3 class="footer__title">About us</h3>
230 <ul class="footer__list">
231 <li><a href="#">Who we are</a></li>
232 <li><a href="#">Careers</a></li>
233 <li><a href="#">Contact</a></li>
234 <li><a href="#">Blog</a></li>
235 </ul>
236 </div>
237 <div class="footer__column">
238 <h3 class="footer__title">Help</h3>
239 <ul class="footer__list">
240 <li><a href="#">Help center</a></li>
241 <li><a href="#">Shipping & payments</a></li>
242 <li><a href="#">Returns & complaints</a></li>
243 <li><a href="#">FAQ</a></li>
244 </ul>
245 </div>
246 </div>
247 <div class="footer__bottom">
248 <p>© 2024 ShopMaster. All rights reserved.</p>
249 </div>
250 </div>
251 </footer>
252</body>
253</html>Spotted a mistake in this lesson?
Hands-on tasks in the game
- Vertical ordering
Arrange the steps for debugging a SASS compilation error: