Scribd
Upload
68 views2 pages

Sass Basics: Stage 2 Variables, Mixins, and Extending Selectors

Sass allows defining variables to store colors or values that can then be reused throughout CSS code. This avoids repeating values and makes it easier to change all instances at once. Mixins can define groups of CSS properties that can be included in selectors, reducing repetitive code. Extending selectors allows applying the styles from one selector to another, building on existing styles without rewriting code. Together these Sass features help follow the DRY principle in CSS and make code more modular and reusable.

Uploaded by

OmerAsadullah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
68 views2 pages

Sass Basics: Stage 2 Variables, Mixins, and Extending Selectors

Sass allows defining variables to store colors or values that can then be reused throughout CSS code. This avoids repeating values and makes it easier to change all instances at once. Mixins can define groups of CSS properties that can be included in selectors, reducing repetitive code. Extending selectors allows applying the styles from one selector to another, building on existing styles without rewriting code. Together these Sass features help follow the DRY principle in CSS and make code more modular and reusable.

Uploaded by

OmerAsadullah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Sass Basics

Stage 2 Variables, Mixins, and Extending Selectors


1 Defining Variables.mp4
color in multiple palces like shades of colour. In CSS you have to repeat
it which is against DRY principle
Sass solves it.
Problem = Repeating #333
Solution = Using Variables.
Now if you want to change the color of all the three instances at once
without going to each place for changing the code. Just change the value
of variable and where ever the variable is places, it will automically take
effect.
Can also multiply and do math with variables.
Sass will allow pt into px
2 Introducing Mixins.mp4
similar properties in border and button.
Defining mixins have no problem.
@include mixin name
Can also add selectors with properties in the mixins.
3 The Power of Mixins.mp4
If we want to use the mixin but we need different
values for the properties for each selector then
we use arguments in mixins and define their values
respectively in each selector.
Make toolkits for collaborating teams easily.
4 Extending Selectors.mp4

Extending the selector above to another selector


below.

You might also like