Math + Color
Operations supported by Sass
Different ways of using division operator in Sass
You can sum up different units in Sass(Only Sass compatible combination units). px +pt can be combined to px in Sass.
em + px are incompatible units
There are some pitfalls while extending with classes..like shown in below…
To avoid this problems we use Placeholders instead of classes
create a %btn placeholder and extend it in .btn-a and .btn-b. with this you can overcome the above issue and scope no longer shared.
When should we use mixins??
Lets consider an example, btn-a and btn-b has repeating properties. We can avoid such repeating in each class and write our own mixins for re-usable purpose.
Do not confuse when to use @include and @import..small tip here..
Lets use mixins in more efficient way.. Will try passing arguments in it.. In below example, i am can pass border-box/content-box as argument and generate accordingly.
What if we forgot to passing arguments?? you can pass optional arguments if you failed to include it by the following way..
border-box will applied like shown in below if no arguments passed..
You can only pass optional arguments at last…
What if your argument value contains multiple keywords with ‘,’ separated?
say, color 0.3s ease-in, background 0.5s ease-out is your argument in place of $val..it will throw error… Hence you can achieve this functionality using vararg($val…)
We gonna cover the below topics..
We will be using $ for a variable name to declare it as a variable and can be used with that name in classes.
After using default flag, my variable will not get override in any case..
Variable types can be booleans, numbers, colors, strings, lists and null
So, never and ever re-assign a value to existing variable.
Thanks to Code School – Assemble Sass tutorial for explaining in simple steps..
Importing other scss files..
when you import button.scss file in application.scss file and compile, a new button.css file will be created even if we are importing it to application.css file which is not our intention.
To avoid this situation, use Partials.
When to use & ?
Symbol references the parent selector
Another usage of parent selector
How to apply css properties from child to parent??
Can achieve simply by the following using scss..
Another Example usage of it..