SCSS, also known as Sass (Syntactically Awesome Style Sheets), is a popular preprocessor for CSS that extends the capabilities of traditional CSS by introducing features like variables and functions. In SCSS, functions and variables are important features that enhance the capabilities of CSS and make it more powerful and flexible.
What is Functions in SCSS ?
In SCSS, functions provide the capability to perform dynamic calculations, value manipulation, and apply transformations to CSS properties. Pre-defined functions in SCSS such as rgb(), rgba(), darken(), lighten(), mix(), and others, which enable you to do color manipulation, brightness adjustment, color mixing, and more. Additionally, you have are flexible to create your own custom functions using the @function rules in SCSS, allowing you to encapsulate intricate calculations or reusable logic within your stylesheets.
What is Variables in SCSS ?
Variables in SCSS are placeholders allowing you to store and reuse values on your all stylesheets. You don't need to use the same value multiple times, you can simply assign it to a variable and then use these variables where necessary. This will help you in maintaining consistency and making updates easier across your stylesheets.
To declare a variable in SCSS, you should use the $ symbol followed by the variable name and assign a value to it. For example:$bg-primary: #000000;
In this case, $bg-primary is the variable name, and #000000 is the assigned value, which represents a black color. Once the variable is defined, you can use it by referencing the variable name wherever the value is required. For instance:
.selector { background-color: $bg-primary;}
The value of $primary-color (which is #ff0000) will be applied to the color of .selector element. If you later decide to change the primary color, you can simply update the variable declaration, and it will automatically reflect the changes throughout your stylesheets.
Variable inside Function
How could a variable be used within a function? For example calc() function, a CSS function that allows you to perform mathematical calculations within CSS property values. As your information, in SCSS, you can use the calc() function to perform dynamic calculations by combining it with variables and other CSS values.
To use a variable within the calc() function, you simply include the variable name within the function's parentheses. Here's an example of using a variable inside the calc() function to calculate a dynamic width:
$width: 200px;.element { width: calc(#{$width} + 20px);}
In this example, the $width variable is interpolated using #{} syntax to include its value within the calc() function. The resulting width will be 220px.
By leveraging functions and variables in SCSS, you can create more dynamic, maintainable, and reusable stylesheets, enhancing your CSS development process.