Sass Basics – 6

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

Math Functions

Colors

Color Functions

Advertisements

Sass Basics – 3

Mixins

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.

Mixins Usage

Do not confuse when to use @include and @import..small tip here..

Adding Arguments

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..

Multiple Arguments

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…)

Reverse Vararg

Mixins Interpolation

 

Sass Basics – 2

Variables

We gonna cover the below topics..

Variable Declaration

We will be using $ for a variable name to declare it as a variable and can be used with that name in classes.

Default flag

After using default flag, my variable will not get override in any case..

Types

Variable types can be booleans, numbers, colors, strings, lists and null

Scoping Variables

example:

So, never and ever re-assign a value to existing variable.

Variable Interpolation

 

Sass Basics – 1

Thanks to Code School – Assemble Sass tutorial for explaining in simple steps..

Sass Basics:

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.

Nesting

Nesting Properties

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..