Save values under a name that can be called and modify. In sass, it’s key to change several selector’s properties at the same time.
It’s common to create a file “_variables” and imported it in the main SCSS file. There it’s a best practice to organize the variables and also put that guide in variables CSS.
To use Sass it’s key the organization of the folders:
• Separate between SASS and CSS in folders.
• Use the “@import” to build the main “style.scss”file
• Organize “scss files” in folder (base, components, libraries…etc)
• Finally, save them and create templates for future uses.
Make your own Template Guidance for future projects. Annalise how many files are needed and how to categorize them. Save all the changes in a folder for future usages.
Also create two variables guidance, SASS, and CSS ones to use together.
These are the folders: Helpers, Tools, Basics, Layout, Modules, Pages.
Inside of them, we find:
One characteristic of SASS is the annidations. There is a block who it’s the father of the next elements inside of it. This method “BEMBlock Element Modifier” helps the project organizing it.
The Block’s independent but the element is dependent on the father block. The modifier is for example the brother or sister of the element, similar between then but not identically. So this can also be included as independent blocks.
Mixins are like variables, they save code in this case, a bunch of properties under one name. That can be called: “@include nameMixin”.
There are mixins with parameters, this means you can create variables for the mixin only or in other way, variables for the piece of code made. This would look like: “@mixin nameOf($parameter: value/$globalVariable)” and it must be called: “@include nameMixin(value/$global variable). The variable can be revalued.
At the time of working with breakpoints, referring to media queries. It’s possible to work this with the directive @content inside the mixin. An example:
@mixin respond-to ($width){
@media only screen and (min-width:$parameter){
@content
}
}
This example shows it is possible to include more code inside the mixin, the advantage is that it should be used in each element where the breakpoint does affect it. The positive side is the usage it apports the code.
Let me say extends work like “@include” but in the same page. This means there is a code that will be repeated but what makes it different from a mixin is that this code will be “extend or develop” ahead in the page.
One best practice here to save code it’s to use extend with the placeholder “%”. This will avoid the block code to be compiled, only when the selector calls the extension “@extend %selectorBlockCode”.
Conclusion Mixins are very useful when it’s needed an amount of code several time and to save code due to properties like extend, also it’s a really helpful tool with the media queries.
When it’s need new values related from a same one, normally instead of creating new values it’s better to use a function to modify the original value into the one wished. For that Sass counts with several functions about colours, numbers, opacity even invers functions.
Just call the function by its name and introduce as parameter the original variable value that it will be modified and the values that will make the modification. In the case of invers functions it’s just needed the name of the variable.
The main difference between mixins is that with functions we can alternate the value of the properties but with mixins we copy and paste a bunch of properties.
Now how to create functions, let’s see with the following example:
@function nameOf($parameter-one,$parameter-two){
@return (operation among parameters);
}
Finally to get the value just introduce the proper value for the parameters and the function will return the result from the operation.
As in program languages we have arrays, variable and value. In this case in Sass those are declared :
$array: (
variableOne:valueOne,
variableTwo:valueTwo,
variableThree:valueThree,
variableFour:valueFour
)
To pick a value, within the property the value it’s indicated by “Propery: map-get($array, variableOne);”. Quite easy to use as it can be seen.
• Los dropdown que contenga mi proyecto.
• Los elementos sticky.
• Los modales
• El overlay de cada modal
• Los tooltip
With each we have a loop, a cicle where the variable runs the list adopting in each cicle the value given. It used with a list because it can increase, both must be writen:
$list: valueOne valueTwo valueThree
@each $variable in ($list){
.#{$variable}{property:$variable}
}
This will generate in this case, three classes with the name of valueOne, valueTwo and valueThree with properties which values will be: valueOne, valueTwo and valueThree.
For loops functions allow coding saving lines, due this loop will generate the amount of those depending of the number of times choosen. An example:
@for $i from a to b{
.class-#{$i}{
&:before{
Content:’#{$i};
}}}
Conditionals are perfect to implement or not style pages to a website. Also it can be used inside selectors to define a certains properties or not due to previous values. An example:
@if $variable == value{
Selector{
Property: diffValue;
}
}
Its usage is normally to select different styles sheets based on a variable that can be true or false.
