└── README.md
/README.md:
--------------------------------------------------------------------------------
1 | # SASS Documentation
2 |
3 | ## Learning outcomes
4 | 1. Introduction to SASS
5 | 2. SASS Variables & CSS Rules nesting
6 | 3. Partials & SASS folder structure
7 | 4. @mixin and @include
8 | 5. inheriting css styles using @extend
9 | 6. @if, @else if, @else
10 | 7. @for, @while loop
11 | 8. @map over items using @each
12 |
13 | ### 1. [Introduction to SASS](https://youtu.be/fL-XB_IpWV4)
14 |
15 | #### 1.1 What is SASS?
16 |
17 | - Syntactically Awesome Style Sheet
18 | - extension of CSS / CSS Preprocessor
19 | - it allows us to use logic in CSS
20 | - It was developed in 2006
21 |
22 | #### 1.2 Prerequisites for learning SASS?
23 |
24 | - HTML, CSS, Basic Javascript will help as well
25 |
26 | #### 1.3 Why SASS?
27 |
28 | - It helps to make our code short, simpler and more maintainable
29 | - It has some extra features such as nested rules, mixins, inheritance for avoiding repeated codes -> No DRY (Dont Repeat YourSelf)
30 |
31 | #### 1.4 How does SASS works?
32 |
33 | - step 1: create a sass file, for example main.scss
34 |
35 | - step 2: browser only understand css code so we need to convert sass file to css file (main.css). sass compiler will convert the file into css file. We can install live sass compiler in vscode for compiling sass code.
36 |
37 | - step 3: use main.css file with HTML file.
38 |
39 | #### 1.5 SASS Comments
40 |
41 | - single line comment syntax :
42 |
43 | ```scss
44 | // this is a single line comment
45 | ```
46 |
47 | - Multiple line comment syntax :
48 |
49 | ```scss
50 | /*
51 | this is a
52 | multiple line
53 | comment
54 | */
55 | ```
56 |
57 | #### 1.6 SASS Settings
58 |
59 | - use the following code in your vscode settings.json
60 |
61 | ```json
62 | // liveSass setup
63 | "liveSassCompile.settings.formats": [
64 | {
65 | "format": "compressed",
66 | "extensionName": ".css",
67 | "savePath": "/dist"
68 | }
69 | ],
70 | "liveSassCompile.settings.generateMap": true,
71 | ```
72 |
73 | ### 2. [SASS Variables & CSS Rules nesting](https://youtu.be/_W3fvJ87Xuw)
74 |
75 | #### 2.1 SASS Variables
76 |
77 | - SASS variable is more simpler than CSS variable.
78 | - SASS Variable syntax :
79 |
80 | ```scss
81 | // sass variable declaration syntax
82 | $variableName: value; // here value can be string, numbers, colors, booleans, lists, nulls
83 |
84 | // sass variable declaration example
85 | $primary-color: #4c4c4c;
86 |
87 | // sass variable use
88 | header {
89 | background-color: $primary-color;
90 | }
91 |
92 | // css variable example
93 | :root {
94 | --primary-color: #4c4c4c;
95 | }
96 | header {
97 | background-color: var(--primary-color);
98 | }
99 | ```
100 |
101 | - it allows us to use logic in CSS
102 | - It was developed in 2006
103 |
104 | #### 2.2 Nesting CSS Rules
105 |
106 | - Example of nesting css rules
107 |
108 | ```scss
109 | // html part
110 |
117 |
118 |
119 |
120 | // without SASS designing the nav
121 | nav {
122 | background-color: #01579b;
123 | height: 5rem;
124 | }
125 | nav ul {
126 | height: 100%;
127 | display: flex;
128 | justify-content: center;
129 | align-items: center;
130 | gap: 1rem;
131 | }
132 | nav ul li {
133 | padding: 0.8rem;
134 | border-radius: 0.6rem;
135 | transition: all 0.3s ease-in;
136 | }
137 | nav ul li:hover {
138 | background-color: #000;
139 | }
140 | nav ul li a {
141 | color: #fff;
142 | }
143 |
144 | // with SASS designing the nav - nestig rules
145 | // nav starts here
146 | nav {
147 | background-color: #01579b;
148 | height: 5rem;
149 | ul {
150 | height: 100%;
151 | display: flex;
152 | justify-content: center;
153 | align-items: center;
154 | gap: 1rem;
155 | li {
156 | padding: 0.8rem;
157 | border-radius: 0.6rem;
158 | transition: all 0.3s ease-in;
159 | a {
160 | color: #fff;
161 | }
162 | // list:hover can be written as &:hover here as we are targeting parent element
163 | &:hover {
164 | background-color: #000;
165 | }
166 | }
167 | }
168 | }
169 | // nav ends here
170 | ```
171 |
172 | - Following simple navbar project showing the use of SASS variables and nesting rules
173 |
174 | - firts create an html file -> index.html
175 |
176 | ```html
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 | Document
185 |
186 |
187 |
188 |
205 |
206 |
207 | ```
208 |
209 | - create main.scss file as the following example
210 |
211 | ```scss
212 | // variable declaraion
213 | $color-primary-dark: #1565c0;
214 | $color-text1: #fff;
215 | $color-text2: #000;
216 |
217 | $border-radius: 0.6rem;
218 | $tranisition: all 0.4s ease-in-out;
219 |
220 | // reset code
221 | * {
222 | border: none;
223 | box-sizing: border-box;
224 | margin: 0;
225 | padding: 0;
226 | list-style-type: none;
227 | text-decoration: none;
228 | outline: none;
229 | }
230 | html {
231 | scroll-behavior: smooth;
232 | }
233 |
234 | .container {
235 | max-width: 70rem;
236 | margin: 0 auto;
237 | }
238 |
239 | // example of nesting css rules
240 | // nav starts here
241 | nav {
242 | background-color: $color-primary-dark;
243 | display: flex;
244 | justify-content: space-between;
245 | align-items: center;
246 | padding: 1rem;
247 | .nav__logo {
248 | color: $color-text1;
249 | }
250 | .nav__menu {
251 | display: flex;
252 | gap: 1rem;
253 | .nav__item {
254 | padding: 0.5rem;
255 | border-radius: $border-radius;
256 | transition: $tranisition;
257 | .nav__link {
258 | color: $color-text1;
259 | }
260 | &:hover {
261 | background: #000;
262 | }
263 | }
264 | }
265 | }
266 | // nav ends here
267 | ```
268 |
269 | ### 3. [Partials & SASS folder structure](https://youtu.be/minJdR-8vjw)
270 |
271 | - What is partials & why partials?
272 | - Partials is a modular (independent reusable) sass file.
273 | - Partials are reusable
274 | - different team member can work in different file at a time and avoid conflicts
275 | - Partials example is given below
276 |
277 | - step 1: create a partial file start with underscore. example: \_reset.scss
278 |
279 | ```scss
280 | // reset code starts
281 | * {
282 | border: none;
283 | box-sizing: border-box;
284 | margin: 0;
285 | padding: 0;
286 | list-style-type: none;
287 | text-decoration: none;
288 | outline: none;
289 | }
290 | html {
291 | scroll-behavior: smooth;
292 | }
293 | ```
294 |
295 | - step 2: from anywhere you can use this partial by forwarding it.
296 |
297 | ```scss
298 | @forward "reset"; // no underscore is required while importing partials
299 | ```
300 |
301 | - [sass folder structure for projects](https://itnext.io/structuring-your-sass-projects-c8d41fa55ed4)
302 | - for a small project
303 | - \_base.scss -> (boiler plate codes) can includes reset, variables, mixins and utility classes.
304 | - \_layout.scss -> layout such as container, grid systems etc.
305 | - \_component.scss -> reusable things like buttons, cards, navbar etc.
306 | - main.scss -> it should ONLY contain the imports from other files.
307 | - for a medium to large project follow 7-1 pattern (7 folders 1 file)
308 | - SASS folder
309 | - abstracts / utilities folder
310 | - \_index.scss -> forwarding all others file in this folder
311 | - \_variables.scss
312 | - \_functions.scss
313 | - \_mixins.scss
314 | - base folder
315 | - \_index.scss -> forwarding all others file in this folder
316 | - \_reset.scss
317 | - \_typography.scss
318 | - components/modules folder
319 | - \_index.scss -> forwarding all others file in this folder
320 | - \_buttons.scss
321 | - \_slider.scss
322 | - \_cards.scss
323 | - \_navbar.scss
324 | - layout folder
325 | - \_index.scss -> forwarding all others file in this folder
326 | - \_navigation.scss
327 | - \_grid.scss
328 | - \_header.scss
329 | - \_footer.scss
330 | - \_sidebar.scss
331 | - \_forms.scss
332 | - pages folder
333 | - \_index.scss -> forwarding all others file in this folder
334 | - \_home.scss
335 | - \_contact.scss
336 | - \_about.scss
337 | - \_courses.scss
338 | - themes folder
339 | - \_index.scss -> forwarding all others file in this folder
340 | - \_theme.scss
341 | - \_admin.scss
342 | - vendors folder
343 | - \_index.scss -> forwarding all others file in this folder
344 | - \_bootstrap.scss
345 | - \_jquery-ui.scss
346 | - main.scss file
347 |
348 | ### 4. [@mixin and @include](https://youtu.be/uJttGVgnlLQ)
349 |
350 | - What is mixin?
351 |
352 | - a group of css declarations that can be reused. kind of function.
353 | - mixin examples are given below
354 |
355 | ```scss
356 | //example 1
357 | // creating a simple @mixin
358 | @mixin para-style {
359 | font-size: 10px;
360 | text-align: justify;
361 | }
362 |
363 | // including or using the @mixin
364 | #about-me p {
365 | @include para-style;
366 | margin: 1rem;
367 | }
368 |
369 | //example 2
370 | // creating a dynamic @mixin
371 | @mixin para-style($size, $style) {
372 | font-size: $size;
373 | text-align: $style;
374 | }
375 |
376 | // including or using the @mixin
377 | #about-me p {
378 | @include para-style(24px, justify);
379 | margin: 1rem;
380 | }
381 | ```
382 |
383 | ### 5. [inheriting css styles using @extend](https://youtu.be/YJQBhTLc1d4)
384 |
385 | - inheritance allows us to bring css declarations from one selector to another.
386 | - inheritance examples are given below
387 |
388 | ```scss
389 | .btn {
390 | border: none;
391 | border-radius: 0.6rem;
392 | padding: 1rem 2rem;
393 | cursor: pointer;
394 | font-size: 1.2rem;
395 | text-transform: uppercase;
396 | }
397 |
398 | // inherting the .btn styles using the @extend
399 | .btn-download {
400 | @extend .btn;
401 | background-color: orange;
402 | }
403 | ```
404 |
405 | ### 6. [@if, @else if, @else](https://youtu.be/XafbLsjEZkg)
406 |
407 | - conditional control statement -> if, else if, else example is given below
408 |
409 | ```scss
410 | @mixin fontSize($value) {
411 | @if $value == big {
412 | font-size: 2rem;
413 | } @else if $value == medium {
414 | font-size: 1.5rem;
415 | } @else {
416 | font-size: 1rem;
417 | }
418 | }
419 |
420 | .download-btn {
421 | background-color: green;
422 | @include fontSize(medium);
423 | @include fontSize(big);
424 | @include fontSize(normal);
425 | }
426 | ```
427 |
428 | ### 7. [@for, @while loop](https://youtu.be/Qhas26n7jiY)
429 |
430 | - loop control statement -> for, while example is given below
431 |
432 | ```scss
433 | // css 12 columns design
434 | // column width: 100% / 12 * numberOfColumns
435 | .col-1 {
436 | width: 8.33%;
437 | }
438 | .col-2 {
439 | width: 16.66%;
440 | }
441 | .col-3 {
442 | width: 25%;
443 | }
444 | .col-4 {
445 | width: 33.33%;
446 | }
447 | .col-5 {
448 | width: 41.66%;
449 | }
450 | .col-6 {
451 | width: 50%;
452 | }
453 | .col-7 {
454 | width: 58.33%;
455 | }
456 | .col-8 {
457 | width: 66.66%;
458 | }
459 | .col-9 {
460 | width: 75%;
461 | }
462 | .col-10 {
463 | width: 83.33%;
464 | }
465 | .col-11 {
466 | width: 91.66%;
467 | }
468 | .col-12 {
469 | width: 100%;
470 | }
471 |
472 | // we can write above css column rules so easily by using for loop or while loop
473 | @for $i from 1 through 12 {
474 | .col-#{$i} {
475 | width: 100% / 12 * $i;
476 | }
477 | }
478 |
479 | // while loop example
480 | $i: 1;
481 | @while $i < 13 {
482 | .col-#{$i} {
483 | width: 100% / 12 * $i;
484 | }
485 | }
486 | ```
487 |
488 | ### 8. [@map over items using @each](https://youtu.be/Qhas26n7jiY)
489 |
490 | - example is given below
491 |
492 | ```scss
493 | // example without map
494 | .red-text {
495 | color: red;
496 | }
497 | .green-text {
498 | color: red;
499 | }
500 | .blue-text {
501 | color: blue;
502 | }
503 |
504 | // example1 with mapping items
505 | @each $colorName in red, green, blue {
506 | .#{$colorName}-text {
507 | color: $colorName;
508 | }
509 | }
510 |
511 | // example 2
512 | $colorsName: (red, green, blue);
513 | @each $colorName in $colorsName {
514 | .#{$colorName}-text {
515 | color: $colorName;
516 | }
517 | }
518 | ```
519 |
--------------------------------------------------------------------------------