SASS P3 – Variable – Data Type – Operation – Interpolation
- Tram Ho
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
1 2 3 4 | <span class="token property"><span class="token variable">$text-success</span></span><span class="token punctuation">:</span> #3c763d<span class="token punctuation">;</span> <span class="token selector">h1.big-title </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$text-success</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Result
1 2 | <span class="token selector">h1.big-title</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #3c763d<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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.
1 2 3 4 5 6 7 8 9 10 | <span class="token selector">h2 </span><span class="token punctuation">{</span> <span class="token property"><span class="token variable">$text-success</span></span><span class="token punctuation">:</span> #3c763d<span class="token punctuation">;</span> <span class="token selector">span </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$text-success</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">h3 </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$text-success</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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
1 2 3 4 5 6 7 8 9 10 | <span class="token selector">h2 </span><span class="token punctuation">{</span> <span class="token property"><span class="token variable">$text-success</span></span><span class="token punctuation">:</span> #3c763d !global<span class="token punctuation">;</span> <span class="token selector">span </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$text-success</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">h3 </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$text-success</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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 /
)
1 2 3 4 5 6 7 8 9 10 | <span class="token selector">p </span><span class="token punctuation">{</span> <span class="token property">font</span><span class="token punctuation">:</span> 10px/8px<span class="token punctuation">;</span> <span class="token comment">// Plain CSS, no division</span> <span class="token property"><span class="token variable">$width</span></span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">$width</span>/2<span class="token punctuation">;</span> <span class="token comment">// Uses a variable, does division</span> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>500px/2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Uses parentheses, does division</span> <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token function">round</span><span class="token punctuation">(</span>1.5<span class="token punctuation">)</span>/2<span class="token punctuation">;</span> <span class="token comment">// Uses a function, does division</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 5px <span class="token operator">+</span> 8px/2px<span class="token punctuation">;</span> <span class="token comment">// Uses +, does division</span> <span class="token property">font</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>italic bold 10px/8px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// In a list, parentheses don't count</span> <span class="token punctuation">}</span> |
Result
1 2 3 4 5 6 7 8 9 | <span class="token selector">p</span> <span class="token punctuation">{</span> <span class="token property">font</span><span class="token punctuation">:</span> 10px/8px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 9px<span class="token punctuation">;</span> <span class="token property">font</span><span class="token punctuation">:</span> italic bold 10px/8px<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
4-2. Color Operations
Sass supports the calculation of color values based on 3 main colors red, green, blue, respectively
1 2 3 4 5 6 7 8 9 10 | <span class="token selector">.ex1 </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #010203 <span class="token operator">+</span> #040506<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.ex2 </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #010203 <span class="token operator">*</span> 2<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.ex3 </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.75<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.75<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
- 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
1 2 3 4 5 6 7 8 9 10 | <span class="token selector">.ex1</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #050709<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.ex2</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #020406<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.ex3</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.75<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
4-3. String Operations
Concatenate strings together using +
, note that only applies to Data Types that are String
1 2 3 4 5 6 | <span class="token selector">p:before </span><span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"Foo "</span> <span class="token operator">+</span> Bar<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> sans- <span class="token operator">+</span> <span class="token string">"serif"</span><span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 3px <span class="token operator">+</span> 4px auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Result
1 2 3 4 5 6 | <span class="token selector">p:before</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"Foo Bar"</span><span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"san-serif"</span><span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 7px auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
4-4. Interpolation
Used to get the value of a variable assigned to the selector or the name of the property using the character #{ }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token property"><span class="token variable">$name</span></span><span class="token punctuation">:</span> foo<span class="token punctuation">;</span> <span class="token property"><span class="token variable">$attr</span></span><span class="token punctuation">:</span> border<span class="token punctuation">;</span> <span class="token property"><span class="token variable">$font-size</span></span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span> <span class="token property"><span class="token variable">$line-height</span></span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> <span class="token comment">//wrong</span> <span class="token selector">p.<span class="token variable">$name</span> </span><span class="token punctuation">{</span> <span class="token property"><span class="token variable">$attr-color</span></span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token property">font</span><span class="token punctuation">:</span> <span class="token variable">$font-size</span>/<span class="token variable">$line-height</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">//correct</span> <span class="token selector">p.<span class="token variable">#{$name}</span> </span><span class="token punctuation">{</span> <span class="token property"><span class="token variable">#{$attr}</span>-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token property">font</span><span class="token punctuation">:</span> <span class="token variable">#{$font-size}</span>/<span class="token variable">#{$line-height}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Result
1 2 3 4 5 | <span class="token selector">p.foo</span> <span class="token punctuation">{</span> <span class="token property">border-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token property">font</span><span class="token punctuation">:</span> 12px/30px<span class="token punctuation">;</span> <span class="token punctuation">}</span> |