├── LICENSE
├── README.md
└── assets
├── sass-process.png
└── star.png
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Pradeep Kumar
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Sass Basics
2 |
3 | > *Click ★ if you like the project. Your contributions are heartily ♡ welcome.*
4 |
5 |
6 |
7 | ## Table of Contents
8 |
9 | * [Sass Overview](#-1-sass-overview)
10 | * [Sass Variables](#-2-sass-variables)
11 | * [Sass Nesting](#-3-sass-nesting)
12 | * [Sass Partials](#-4-sass-partials)
13 | * [Sass @import](#-5-sass-import)
14 | * [Sass @mixin](#-6-sass-mixin)
15 | * [Sass @extend](#-7-sass-extend)
16 | * [Sass Directives](#-8-sass-directives)
17 | * [Sass Functions](#-9-sass-functions)
18 | * [Sass String](#-10-sass-string)
19 | * [Sass Numeric](#-11-sass-numeric)
20 | * [Sass List](#-12-sass-list)
21 | * [Sass Map](#-13-sass-map)
22 | * [Sass Selector](#-14-sass-selector)
23 | * [Sass Color](#-15-sass-color)
24 | * [Sass Miscellaneous](#-16-sass-miscellaneous)
25 |
26 |
27 |
28 | ## # 1. SASS OVERVIEW
29 |
30 |
31 |
32 | ## Q. What is Sass?
33 |
34 | The **Sass** ( which stands for 'Syntactically awesome style sheets ) is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more. It also helps to keep things organised and allows you to create style sheets faster.
35 |
36 | Sass works by writing your styles in .scss (or .sass) files, which will then get compiled into a regular CSS file. The newly compiled CSS file is what gets loaded to your browser to style your web application. This allows the browser to properly apply the styles to your web page.
37 |
38 |
39 | 
40 |
41 |
42 | **⚝ [Try this example on CodeSandbox](https://codepen.io/learning-zone/pen/RwVprvO)**
43 |
44 |
47 |
48 | ## Q. List out the differences between LESS and Sass?
49 |
50 | |LESS |Sass |
51 | |-------------------------------------|-----------------------------|
52 | |LESS compiler is coded in Javascript |Sass compiler is coded in Dart
53 | |Variable names are prefaced with the @symbol |Variable name are prefaced with $ symbol
54 | |LESS does not inherit multiple selectors with one set of properties | Sass inherits multiple selectors with one set of properties |
55 | |LESS does not work with "unknown" units neither it returns syntax error notification for incompatible units or maths related syntax error| Sass allows you to work with "unknown" units also returns a syntax error notification for incompatible units|
56 |
57 |
60 |
61 | ## Q. Why Sass is considered better than LESS?
62 |
63 | * Saas allows you to write reusable methods and use logic statements, e., loops, and conditionals
64 | * Saas user can access Compass library and use some awesome features like dynamic sprite map generation, legacy browser hacks * and cross-browser support for CSS3 features
65 | * Compass also allows you to add an external framework like Blueprint, Foundation or Bootstrap on top
66 | * In LESS, you can write a basic logic statement using a "guarded mixin", which is equivalent to Sass if statements
67 | * In LESS, you can loop through numeric values using recursive functions while Sass allows you to iterate any kind of data
68 | * In Sass, you can write your own handy functions
69 |
70 |
73 |
74 | ## Q. What are Sass, Less, and Stylus?
75 |
76 | They are CSS preprocessors. They are an abstraction layer on top of CSS. They are a special syntax/language that compile down into CSS. They make managing CSS easier, with things like variables and mixins to handle vendor prefixes (among other things). They make doing best practices easier, like concatenating and compressing CSS.
77 |
78 |
81 |
82 | ## Q. What is file splitting and why should you use it?
83 |
84 | File splitting helps organize your CSS into multiple files, decreasing page load time and making things easier to manage. How you decide to split them up is up to you, but it can be useful to separate files by component. For example, we can have all button styles in a file called `_buttons.scss` or all your header-specific styles in a file called `_header.scss`, main file, say _app.scss, and we can import those files by writing @import 'buttons';
85 |
86 |
89 |
90 | ## # 2. SASS VARIABLES
91 |
92 |
93 |
94 | ## Q. How variables work in sass?
95 |
96 | Variables are useful for things like colors, fonts, font sizes, and certain dimensions, as you can be sure always using the same ones. Variables in SCSS start with `$` sign
97 |
98 | **SCSS Style:**
99 |
100 | ```scss
101 | $font-stack: Helvetica, sans-serif;
102 | $primary-color: #333;
103 |
104 | body {
105 | font: 100% $font-stack;
106 | color: $primary-color;
107 | }
108 | ```
109 |
110 | **CSS Style:**
111 |
112 | ```css
113 | body {
114 | font: 100% Helvetica, sans-serif;
115 | color: #333;
116 | }
117 | ```
118 |
119 | When the Sass is processed, it takes the variables we define for the `$font-stack` and `$primary-color` and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.
120 |
121 | **⚝ [Try this example on CodeSandbox](https://codepen.io/learning-zone/pen/LYyWNGM)**
122 |
123 |
126 |
127 | ## Q. What is variable interpolation in Sass?
128 |
129 | Interpolation allows us to interpolate sass expressions into a simple Sass or CSS code. Means, you can define selector name, property name, CSS at-rules, quoted or unquoted strings etc, as a variable.
130 |
131 | **Syntax:**
132 |
133 | ```scss
134 | #{$variable_name}
135 | ```
136 |
137 | **SCSS Style:**
138 |
139 | ```scss
140 | @mixin corner-icon($name) {
141 | /* using interpolation */
142 | .icon-#{$name} {
143 | background-image: url("/icons/#{$name}.svg");
144 | }
145 | }
146 |
147 | /* calling the above mixin */
148 | @include corner-icon("mail");
149 | ```
150 |
151 | **CSS Style:**
152 |
153 | ```css
154 | .icon-mail {
155 | background-image: url("/icons/mail.svg");
156 | }
157 | ```
158 |
159 | Here, the value of the **$name** variable is added wherever we used **#{$name}** in our stylesheet.
160 |
161 |
164 |
165 | ## # 3. SASS NESTING
166 |
167 |
168 |
169 | ## Q. How does nesting work in Sass?
170 |
171 | Basic nesting refers to the ability to have a declaration inside of a declaration.
172 |
173 | **SCSS Style:**
174 |
175 | ```scss
176 | nav {
177 | ul {
178 | margin: 0;
179 | padding: 0;
180 | list-style: none;
181 | }
182 |
183 | li { display: inline-block; }
184 |
185 | a {
186 | display: block;
187 | padding: 6px 12px;
188 | text-decoration: none;
189 | }
190 | }
191 | ```
192 |
193 | **CSS Style:**
194 |
195 | ```css
196 | nav ul {
197 | margin: 0;
198 | padding: 0;
199 | list-style: none;
200 | }
201 | nav li {
202 | display: inline-block;
203 | }
204 | nav a {
205 | display: block;
206 | padding: 6px 12px;
207 | text-decoration: none;
208 | }
209 | ```
210 |
211 | **⚝ [Try this example on CodeSandbox](https://codepen.io/learning-zone/pen/qBmrZmv)**
212 |
213 |
216 |
217 | ## # 4. SASS PARTIALS
218 |
219 |
220 |
221 | ## Q. What is Sass Partials?
222 |
223 | By default, Sass transpiles all the **.scss** files directly. However, when you want to import a file, you do not need the file to be transpiled directly. If you start the filename with an underscore, Sass will not transpile it. Files named this way are called partials in Sass.
224 |
225 | **Example:**
226 |
227 | The following example shows a partial Sass file named "_colors.scss".
228 |
229 | ```css
230 | /**
231 | * "_colors.scss
232 | */
233 | $myPink: #EE82EE;
234 | $myBlue: #4169E1;
235 | $myGreen: #8FBC8F;
236 | ```
237 |
238 | Now, if you import the partial file, omit the underscore. Sass understands that it should import the file "_colors.scss":
239 |
240 | ```css
241 | /**
242 | * Sass Partials
243 | */
244 | @import "colors";
245 |
246 | body {
247 | font-family: Helvetica, sans-serif;
248 | font-size: 18px;
249 | color: $myBlue;
250 | }
251 | ```
252 |
253 |
256 |
257 | ## # 5. SASS @IMPORT
258 |
259 |
260 |
261 | ## Q. What is the use of the @import function in Sass?
262 |
263 | The Sass **@import** function helps us to import multiple Sass or CSS stylesheets together such that they can be used together. Importing a Sass file using the @import rule allows access to mixins, variables, and functions to the other file in which the other file is imported.
264 |
265 | **Example:**
266 |
267 | ```scss
268 | /**
269 | * common/_button.scss
270 | */
271 | button {
272 | padding: .25em;
273 | line-height: 0;
274 | }
275 | ```
276 |
277 | ```scss
278 | /**
279 | * common/_lists.scss
280 | */
281 | ul, ol {
282 | text-align: left;
283 |
284 | & & {
285 | padding: {
286 | bottom: 0;
287 | left: 0;
288 | }
289 | }
290 | }
291 | ```
292 |
293 | ```scss
294 | /**
295 | * style.scss
296 | */
297 | @import 'common/button', 'common/lists';
298 | ```
299 |
300 |
303 |
304 | ## # 6. SASS @MIXIN
305 |
306 |
307 |
308 | ## Q. Explain use of @mixin in Sass?
309 |
310 | A mixin lets you make groups of CSS declarations that you want to reuse throughout your site
311 |
312 | ```scss
313 | @mixin border-radius($radius) {
314 | -webkit-border-radius: $radius;
315 | -moz-border-radius: $radius;
316 | -ms-border-radius: $radius;
317 | border-radius: $radius;
318 | }
319 | ```
320 |
321 | ```scss
322 | .box { @include border-radius(10px); }
323 | ```
324 |
325 |
328 |
329 | ## Q. What is the meaning of DRY-ing out a mixin?
330 |
331 | **DRY-ing** out a mixin means splitting it into **static** and **dynamic** parts. The dynamic mixin is the one the user is going to call, and the static mixin is only going to contain the pieces that would otherwise get duplicated.
332 |
333 | **Example:**
334 |
335 | ```scss
336 | @mixin button($color) {
337 | @include button-static;
338 |
339 | background-color: $color;
340 | border-color: mix(black, $color, 25%);
341 |
342 | &:hover {
343 | background-color: mix(black, $color, 15%);
344 | border-color: mix(black, $color, 40%);
345 | }
346 | }
347 |
348 | @mixin button-static {
349 | border: 1px solid;
350 | border-radius: 5px;
351 | padding: .25em .5em;
352 |
353 | &:hover {
354 | cursor: pointer;
355 | }
356 | }
357 | ```
358 |
359 |
362 |
363 | ## # 7. SASS @EXTEND
364 |
365 |
366 |
367 | ## Q. Explain the use @extend in Sass?
368 |
369 | **@extend** directive provides a simple way to allow a selector to inherit/extend the styles of another one.
370 |
371 | ```scss
372 | .message {
373 | border: 1px solid #ccc;
374 | padding: 10px;
375 | color: #333;
376 | }
377 |
378 | .success {
379 | @extend .message;
380 | border-color: green;
381 | }
382 |
383 | .error {
384 | @extend .message;
385 | border-color: red;
386 | }
387 | ```
388 |
389 |
392 |
393 | ## # Q. How Sass support Inheritance?
394 |
395 | Using `@extend` lets you share a set of CSS properties from one selector to another.
396 |
397 | **SCSS Style:**
398 |
399 | ```scss
400 | /* This CSS will print because %message-shared is extended. */
401 | %message-shared {
402 | border: 1px solid #ccc;
403 | padding: 10px;
404 | color: #333;
405 | }
406 |
407 | // This CSS won't print because %equal-heights is never extended.
408 | %equal-heights {
409 | display: flex;
410 | flex-wrap: wrap;
411 | }
412 |
413 | .message {
414 | @extend %message-shared;
415 | }
416 |
417 | .success {
418 | @extend %message-shared;
419 | border-color: green;
420 | }
421 |
422 | .error {
423 | @extend %message-shared;
424 | border-color: red;
425 | }
426 |
427 | .warning {
428 | @extend %message-shared;
429 | border-color: yellow;
430 | }
431 | ```
432 |
433 | **CSS Style:**
434 |
435 | ```css
436 | /* This CSS will print because %message-shared is extended. */
437 | .message, .success, .error, .warning {
438 | border: 1px solid #ccc;
439 | padding: 10px;
440 | color: #333;
441 | }
442 |
443 | .success {
444 | border-color: green;
445 | }
446 |
447 | .error {
448 | border-color: red;
449 | }
450 |
451 | .warning {
452 | border-color: yellow;
453 | }
454 | ```
455 |
456 | **⚝ [Try this example on CodeSandbox](https://codepen.io/learning-zone/pen/ExmWKLG)**
457 |
458 |
461 |
462 | ## # 8. SASS DIRECTIVES
463 |
464 |
465 |
466 | ## Q. Explain @if, @else directives?
467 |
468 | The Sass **@if** directive and its companions @else if and @else, allow you to include Sass code in the CSS output only if certain conditions are met.
469 |
470 | **Example 01:** if Condition
471 |
472 | ```scss
473 | $test: 10;
474 |
475 | p {
476 | @if $test < 5 {
477 | color: blue;
478 | }
479 | }
480 | ```
481 |
482 | **Example 02:** Nested if Conditions
483 |
484 | ```scss
485 | $test: 10;
486 |
487 | p {
488 | @if $test < 10 {
489 | color: blue;
490 | @if $test == 5 {
491 | text-color: white;
492 | }
493 | }
494 | }
495 | ```
496 |
497 |
500 |
501 | ## Q. Explain @for, @while directives?
502 |
503 | The **@while** directive will continue to output CSS produced by the statements while the condition returns true.
504 |
505 | **SCSS Style:**
506 |
507 | ```scss
508 | $p: 3;
509 |
510 | @while $p < 5 {
511 | .item-#{$p} {
512 | color: red;
513 | $p : $p + 1;
514 | }
515 | }
516 | ```
517 |
518 | **CSS Style:**
519 |
520 | ```css
521 | .item-3 {
522 | color: red;
523 | }
524 |
525 | .item-4 {
526 | color: red;
527 | }
528 | ```
529 |
530 | The @for directive to execute a group of statement a specific number of times. It has two variations. The first, which uses the through keyword, executes the statements from `` to ``, inclusive:
531 |
532 | **SCSS Style:**
533 |
534 | ```scss
535 | @for $i from 1 through 3 {
536 | .list-#{$i} {
537 | width: 2px * $i;
538 | }
539 | }
540 | ```
541 |
542 | **CSS Style:**
543 |
544 | ```css
545 | .list-1 {
546 | margin-left: 2px;
547 | }
548 |
549 | .list-2 {
550 | margin-left: 4px;
551 | }
552 |
553 | .list-3 {
554 | margin-left: 6px;
555 | }
556 | ```
557 |
558 |
561 |
562 | ## Q. Explain @at-root, @extend directives?
563 |
564 | The @at-root directive is a collection of nested rules which is able to make the style block at root of the document.
565 | @at-root selector excludes the selector by default. By using @at-root, we can move the style outside of nested directive.
566 |
567 | **Syntax:**
568 |
569 | ```scss
570 | @at-root (without: ...) and @at-root (with: ...)
571 | ```
572 |
573 | **SCSS Style:**
574 |
575 | ```scss
576 | @media print {
577 | .style {
578 | height: 8px;
579 | @at-root (without: media) {
580 | color: #808000;;
581 | }
582 | }
583 | }
584 | ```
585 |
586 | **CSS Style:**
587 |
588 | The above code will be compiled to the CSS file as shown below −
589 |
590 | ```css
591 | @media print {
592 | .style {
593 | height: 8px;
594 | }
595 | }
596 |
597 | .style {
598 | color: #808000;
599 | }
600 | ```
601 |
602 |
605 |
606 | ## Q. Explain @error, @debug directives?
607 |
608 | **1. The @error Directive:**
609 |
610 | It prints the value of the expression along with a stack trace indicating how the current mixin or function was called. Once the error is printed, Sass stops compiling the stylesheet and tells whatever system is running it that an error occurred.
611 |
612 | ```scss
613 | @function color-variation($color) {
614 | @if map-has-key($colors, $color) {
615 | @return map-get($colors, $color);
616 | }
617 |
618 | @error "Invalid color name: `#{$color}`.";
619 | }
620 | ```
621 |
622 | **Output:**
623 |
624 | ```css
625 | >> Invalid color name: `brand-orange`.
626 | >> Line 9 Column 7 sass/common.scss
627 | ```
628 |
629 | **2. The @debug Directive:**
630 |
631 | It prints the value of that expression, along with the filename and line number.
632 |
633 | ```scss
634 | $color-green: #00FF00;
635 | $font-sizes: 10px + 20px;
636 |
637 | .container {
638 | @debug $color-green;
639 | @debug $font-sizes;
640 | }
641 | ```
642 |
643 | **Output:**
644 |
645 | ```css
646 | >> common.scss:10: DEBUG: #00FF00
647 | >> common.scss:11: DEBUG: 30px
648 | ```
649 |
650 |
653 |
654 | ## Q. What is the @content directive used for?
655 |
656 | The **@content** directive allows us to pass a content block into a mixin.
657 |
658 | **SCSS Style:**
659 |
660 | ```scss
661 | /**
662 | * @content directive
663 | */
664 | @mixin media($width) {
665 | @media only screen and (max-width: $width) {
666 | @content;
667 | }
668 | }
669 |
670 | @include media(320px) {
671 | background: red;
672 | }
673 | ```
674 |
675 | **CSS Style:**
676 |
677 | ```css
678 | @media only screen and (max-width: 320px) {
679 | background: red;
680 | }
681 | ```
682 |
683 |
686 |
687 | ## # 9. SASS FUNCTIONS
688 |
689 |
690 |
691 | ## Q. Explain the @include, @function functions and how they are used. What is %placeholder?
692 |
693 | **%placeholder:** are classes that aren\'t output when your SCSS is compiled
694 |
695 | ```scss
696 | %awesome {
697 | width: 100%;
698 | height: 100%;
699 | }
700 | body {
701 | @extend %awesome;
702 | }
703 | p {
704 | @extend %awesome;
705 | }
706 | ```
707 |
708 | ```scss
709 | /* Output */
710 | body, p {
711 | width: 100%;
712 | height: 100%;
713 | }
714 | ```
715 |
716 |
719 |
720 | ## # 10. SASS STRING
721 |
722 |
723 |
724 | ## Q. Explain String data in Sass?
725 |
726 | ```scss
727 | $default-font: 'Lucida';
728 |
729 | p {
730 | font-family: $default-font, "Ariel", sans-serif;
731 | }
732 | ```
733 |
734 |
737 |
738 | ## # 11. SASS NUMERIC
739 |
740 |
741 |
742 | ## Q. Explain Number data in Sass?
743 |
744 | ```scss
745 | p {
746 | font-size: 3em * 1.5;
747 | }
748 | ```
749 |
750 |
753 |
754 | ## Q. What are number operations in SASS?
755 |
756 | Sass allows for mathematical operations such as addition, subtraction, multiplication and division. They automatically convert between compatible units.
757 |
758 | **SCSS Style:**
759 |
760 | ```scss
761 | /**
762 | * style.scss
763 | */
764 | $size: 25px;
765 |
766 | h2 {
767 | font-size: $size + 5;
768 | }
769 |
770 | h3 {
771 | font-size: $size / 5;
772 | }
773 |
774 | .para1 {
775 | font-size: $size * 1.5;
776 | }
777 |
778 | .para2 {
779 | font-size: $size - 10;
780 | }
781 | ```
782 |
783 | **CSS Style:**
784 |
785 | ```css
786 | h2 {
787 | font-size: 30px;
788 | }
789 |
790 | h3 {
791 | font-size: 5px;
792 | }
793 |
794 | .para1 {
795 | font-size: 37.5px;
796 | }
797 |
798 | .para2 {
799 | font-size: 15px;
800 | }
801 | ```
802 |
803 |
806 |
807 | ## # 12. SASS LIST
808 |
809 |
810 |
811 | ## Q. How to use list in Sass?
812 |
813 | ```scss
814 | // Separated by commas.
815 | $number-list: 10, 23, 10;
816 |
817 | // Separated by spaces.
818 | $number-list2: 10px 20px 30px;
819 |
820 | // Nested list.
821 | $number-list3: 10, 20 30, 10;
822 |
823 | // Nested list same as $number-list3.
824 | $number-list4: 10, (20 30), 10;
825 | ```
826 |
827 |
830 |
831 | ## # 13. SASS MAP
832 |
833 |
834 |
835 | ## Q. How to use map() in Sass?
836 |
837 | Map functions
838 |
839 | * map-get(map, key)
840 | * map-merge(map1, map2)
841 | * map-keys(map)
842 | * map-has-key(map, key)
843 | * map-remove(map, keys...)
844 | * map-values(map)
845 |
846 | **Example 01:** map-get(map, key)
847 |
848 | ```scss
849 | $font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
850 | map-get($font-sizes, "small") // 12px
851 | ```
852 |
853 | **Example 02:** map-has-key(map, key)
854 |
855 | ```scss
856 | $font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
857 | map-has-key($font-sizes, "big") // false
858 | ```
859 |
860 | **Example 03:** map-keys(map)
861 |
862 | ```scss
863 | $font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
864 | map-keys($font-sizes) // "small", "normal, "large"
865 | ```
866 |
867 | **Example 04:** map-merge(map1, map2)
868 |
869 | ```scss
870 | $font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
871 | $font-sizes2: ("x-large": 30px, "xx-large": 36px)
872 |
873 | map-merge($font-sizes, $font-sizes2)
874 |
875 | // "small": 12px, "normal": 18px, "large": 24px, "x-large": 30px, "xx-large": 36px
876 | ```
877 |
878 | **Example 05:** map-remove(map, keys...)
879 |
880 | ```scss
881 | $font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
882 | map-remove($font-sizes, "small") // ("normal": 18px, "large": 24px)
883 | ```
884 |
885 | **Example 06:** map-values(map)
886 |
887 | ```scss
888 | $font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
889 | map-values($font-sizes) // 12px, 18px, 24px
890 | ```
891 |
892 |
895 |
896 | ## Q. What is the use of Sass Maps functions?
897 |
898 | Sass provides the data type called map which represents one or more pairs of key values. The map, which returns a map, provides a new map and does not modify the initial map.
899 |
900 | **Example:**
901 |
902 | ```scss
903 | /**
904 | * map.get()
905 | */
906 | $font-weights: ("regular": 400, "medium": 500, "bold": 700);
907 |
908 | @debug map.get($font-weights, "medium"); // 500
909 | @debug map.get($font-weights, "extra-bold"); // null
910 | ```
911 |
912 |
915 |
916 | ## # 14. SASS SELECTOR
917 |
918 |
919 |
920 | ## Q. When can you use the %placeholders in Sass?
921 |
922 | Placeholder is special kind of selector which is used for writing own Sass library. Its work is very similar to mixin without arguments. Placeholder selector starts with a **%** sign. Placeholder selectors are excluded in the compilation of the Sass file
923 |
924 | **Syntax:**
925 |
926 | ```scss
927 | @extend %( name_of_selector );
928 | ```
929 |
930 | **SCSS Style:**
931 |
932 | ```scss
933 | %button-format {
934 | padding: 10px 20px;
935 | border-radius: 15px;
936 | color: black;
937 | }
938 |
939 | .toolbar-button {
940 | @extend %button-format;
941 | background-color: lightpink;
942 |
943 | &:hover {
944 | background-color: rgb(155, 106, 114);
945 | }
946 | }
947 |
948 | .status-bar-button {
949 | @extend %button-format;
950 | background-color: lightblue;
951 |
952 | &:hover {
953 | background-color: blue;
954 | }
955 | }
956 | ```
957 |
958 | **CSS Style:**
959 |
960 | ```css
961 | .status-bar-button, .toolbar-button {
962 | padding: 10px 20px;
963 | border-radius: 15px;
964 | color: black;
965 | }
966 |
967 | .toolbar-button {
968 | background-color: lightpink;
969 | }
970 | .toolbar-button:hover {
971 | background-color: #9b6a72;
972 | }
973 |
974 | .status-bar-button {
975 | background-color: lightblue;
976 | }
977 | .status-bar-button:hover {
978 | background-color: blue;
979 | }
980 | ```
981 |
982 |
985 |
986 | ## Q. What is the use of &combinator?
987 |
988 | A combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
989 |
990 | There are four different combinators in CSS:
991 |
992 | * Descendant selector (space)
993 | * Child selector (>)
994 | * Adjacent sibling selector (+)
995 | * General sibling selector (~)
996 |
997 | **Example 01:** Without the combined child selector
998 |
999 | ```scss
1000 | card {
1001 | outer {
1002 | inner {
1003 | color: red;
1004 | }
1005 | }
1006 | }
1007 | ```
1008 |
1009 | **Example 02:** Using **>** selector
1010 |
1011 | ```scss
1012 | card {
1013 | > outer {
1014 | > inner {
1015 | color: red;
1016 | }
1017 | }
1018 | }
1019 | ```
1020 |
1021 |
1024 |
1025 | ## Q. Which symbol is used to refer parent selector in Sass?
1026 |
1027 | The sass avoids the rewrite code using the nesting method. To refer the parent selector and inside of parent selector **&** symbol is required. This symbol used for hover, focus and active status in style tag.
1028 |
1029 | ```scss
1030 | .alert {
1031 | // The parent selector can be used to add pseudo-classes to the outer
1032 | // selector.
1033 | &:hover {
1034 | font-weight: bold;
1035 | }
1036 | ```
1037 |
1038 |
1041 |
1042 | ## # 15. SASS COLOR
1043 |
1044 |
1045 |
1046 | ## Q. What are the types of colors support Sass?
1047 |
1048 | ```scss
1049 | // RGB (Red, Green, Blue):
1050 | $primary: rgb(214,121,45);
1051 |
1052 | // RGBA (Red, Green, Blue, Alpha):
1053 | $color: rgba(210, 122, 54, 0.5)
1054 |
1055 | // HSL ( Hue, Saturation, Lightness):
1056 | $color: hsl(0, 0%, 100%);
1057 |
1058 | // HSLA (Hue, Saturation, Lightness, Alpha):
1059 | $color: hsla(100, 60%, 60%, 0.7)
1060 | ```
1061 |
1062 |
1065 |
1066 | ## # 16. SASS MISCELLANEOUS
1067 |
1068 |
1069 |
1070 | ## Q. How many output styles are there in Sass?
1071 |
1072 | By default, Sass outputs the CSS in a nested style, which is a style that reflects the document structure. Sass allows to choose between four styles: nested, expanded, compact, and compressed.
1073 |
1074 | **:nested**
1075 |
1076 | Nested style is the default Sass style because it reflects the structure of the CSS styles in which each property has its own line, but the indentation is based on how deeply it\'s nested.
1077 |
1078 | ```cmd
1079 | sass --watch style.scss:style.css --style nested
1080 | ```
1081 |
1082 | ```scss
1083 | main {
1084 | padding: 12px 24px;
1085 | margin-bottom: 24px; }
1086 |
1087 | article {
1088 | background-color: #00ff00;
1089 | color: red;
1090 | border: 1px solid blue; }
1091 | article p {
1092 | font-size: 18px;
1093 | font-style: italic;
1094 | margin-bottom: 12px; }
1095 | ```
1096 |
1097 | **:expanded**
1098 |
1099 | In expanded style properties are indented within the rules, but the rules aren\'t indendented in any special way like in :nested output style.
1100 |
1101 | ```cmd
1102 | sass --watch style.scss:style.css --style expanded
1103 | ```
1104 |
1105 | ```scss
1106 | main {
1107 | padding: 12px 24px;
1108 | margin-bottom: 24px;
1109 | }
1110 |
1111 | article {
1112 | background-color: #00ff00;
1113 | color: red;
1114 | border: 1px solid blue;
1115 | }
1116 | article p {
1117 | font-size: 18px;
1118 | font-style: italic;
1119 | margin-bottom: 12px;
1120 | }
1121 | ```
1122 |
1123 | **:compact**
1124 |
1125 | In compact style each rule takes up only one line with every property defined on that line. It takes up less space than :nested and :expanded.
1126 |
1127 | ```cmd
1128 | sass --watch style.scss:style.css --style compact
1129 | ```
1130 |
1131 | ```scss
1132 | main { padding: 12px 24px; margin-bottom: 24px; }
1133 |
1134 | article { background-color: #00ff00; color: red; border: 1px solid blue; }
1135 | article p { font-size: 18px; font-style: italic; margin-bottom: 12px; }
1136 | ```
1137 |
1138 | **:compressed**
1139 |
1140 | Compressed styles takes up the minimum amount of space possible. There is no whitespace except space that is necessary to separate selectors and the newline on the end of the document.
1141 |
1142 | ```cmd
1143 | sass --watch style.scss:style.css --style compressed
1144 | ```
1145 |
1146 | ```scss
1147 | main{padding:12px 24px;margin-bottom:24px}article{background-color:#00ff00;color:red;border:1px solid blue}article p{font-size:18px;font-style:italic;margin-bottom:12px}
1148 | ```
1149 |
1150 |
1153 |
--------------------------------------------------------------------------------
/assets/sass-process.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/sass-basics/7d8520cdc1e652d3822c3b5062137a94bb71dbc9/assets/sass-process.png
--------------------------------------------------------------------------------
/assets/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/sass-basics/7d8520cdc1e652d3822c3b5062137a94bb71dbc9/assets/star.png
--------------------------------------------------------------------------------