SASS P3 – Variable – Data Type – Operation – Interpolation

1. Variables

Like programming languages, we declare a variable to store a value that is used many times. To declare a variable we use the character $ in front of the variable name

Result

2. Global Variables

In the above example, if we declare the variable $text-success outside that is not in any selector, we can call that variable anywhere. But if you declare the variable inside a selector, the scope of the variable will be within that selector only.

In the above example you can understand that the variable $text-success declared inside h2’s selector so the span tag inside h2 is usable but h3 is not.

In order for h3 to use the above variable, we add !global as below is ok

3. Data Types

Sass supports 8 different data types:

• numbers: 1.2, 13, 10px
• strings of text, with or without quotes: “foo”, ‘foo’, foo
• colors: blue, green, #04a3f9, rgba(255, 0, 0, 0.5)
• booleans: true, false
• nulls: null
• lists of values, separated by spaces or commas: 1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps from one value to another: (key1: value1, key2: value2)
• function references

4. Operations

Sass supports comparison operators, calculation of addition, subtraction, multiplication, division, and remainder. Also can be used when concatenating strings.

4.1. Number Operations

The types that support comparison calculations that apply to Data Types are Number. See the example below to understand how Sass works (note special between the slash . notation) / and division /)

Result

4-2. Color Operations

Sass supports the calculation of color values based on 3 main colors red, green, blue, respectively

• Với ex1: 01 + 04 = 05, 02 + 05 = 07, 03 + 06 = 09
• Với ex2: 01 * 2 = 02, 02 * 2 = 04, 03 * 2 = 06
• Với ex3:add the corresponding value for each element

4-3. String Operations

Concatenate strings together using +, note that only applies to Data Types that are String

Result

4-4. Interpolation

Used to get the value of a variable assigned to the selector or the name of the property using the character #{ }

Result