Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Sass Variables | Preprocessors
Advanced CSS Techniques
course content

Contenido del Curso

Advanced CSS Techniques

Advanced CSS Techniques

1. Introduction
2. Item Positioning
3. Transitions
4. Animations
5. Transformations
6. Adaptive/responsive websites and apps
7. Preprocessors

bookSass Variables

The first helpful feature is the existence of variables. We can store and reuse values through the code. It's so similar to the programming language that allows to create a variable once and use it multiple times. To declare a variable, we need to put a dollar sign ($) and a variable name, and then we set a colon (:) and give a value.

Note

We can use any naming notation, whether it is kebab case (text-primary-color) or snake case (text_primary_color), or camel case (textPrimaryColor). What is essential is to use the same naming notation throughout the project.

Let's imagine that we need to create a markup in which we have all text color to be #474943 and its font size to be 24px. The sass file would look as follows:

We always keep variables as descriptive as possible, so we can ensure what each variable is responsible for.

The benefit is that it makes it easy to make design changes to the project later. If the text font size or color changes, we can update the value of the $textColor and $textFontSize variables, and the project will be edited as well.

With the help of what sign do we declare a sass variable?

With the help of what sign do we declare a sass variable?

Selecciona la respuesta correcta

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 7. Capítulo 3
some-alt