Hello, In this article, I will introduce you to some of the key features of SCSS and show you how to use them in your projects.
Variables
You can use variables for any CSS property like font, color and sizes. To create a variable, you use the $
symbol:
$primary-color: #ff0000;
$secondary-color: #00ff00;
$font-family: Arial, sans-serif;
To use a variable, you simply write its name instead of the value. For example:
h1 {
color: $primary-color;
font-family: $font-family;
}
p {
color: $secondary-color;
font-family: $font-family;
}
This selector
You can use โ&โ to select the current element:
.class {
color: red;
&:hover {
color: green;
}
}
this would be the same as:
.class {
color: red;
}
.class:hover {
color: green;
}
Nesting
Nesting allows you to write selectors that follow the same structure as your HTML. Instead of writing long and repetitive selectors, you can nest them inside each other using curly braces. For example:
nav {
background-color: #333;
ul {
list-style: none;
li {
display: inline-block;
a {
color: #fff;
text-decoration: none;
}
}
}
}
This is equivalent to writing:
nav {
background-color: #333;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
Mixins
Mixins are a way to define reusable chunks of code that can accept arguments and return different values depending on the input. To create a mixin, you use @mixin
followed by the name of the mixin and optionally some parameters. For example:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
To use a mixin, you use the @include
directive followed by the name of the mixin and optionally some arguments. For example:
.button {
@include border-radius(10px);
}
Functions
Functions are similar to mixins, but they return a single value instead of a block of code. You can use functions for calculations, conversions, or manipulations of values. To create a function, you use the @function
directive followed by the name of the function and optionally some parameters. For example:
@function darken($color, $amount) {
return mix(black, $color, $amount);
}
To use a function, you simply write its name followed by parentheses and optionally some arguments. For example:
.button:hover {
background-color: darken($primary-color, 10%);
}
Use
To use code from another file, just write @use: 'path/filename.scss';
.
Variables can be used from other files with 'filename.$variablename'
Operators
You can use operators to perform calculations, comparisons, or concatenations in your SCSS code. For example:
$width: 100px;
$height: 50px;
div {
width: $width * 2; // 200px
height: $height / 2; // 25px
margin: ($width + $height) / 4; // 37.5px
}
p {
font-size: 12px + 2px; // 14px
}
a {
color: #fff or #000; // #fff
}
Conditionals
Conditionals are statements that execute different blocks of code depending on whether a condition is true or false. You can use conditionals to apply different styles based on variables, functions, or expressions. To create a conditional, you use the @if
, @else if
, and @else
directives followed by a condition and a block of code. For example:
$theme: dark;
body {
@if $theme == dark {
background-color: #000;
color: #fff;
} @else if $theme == light {
background-color: #fff;
color: #000;
} @else {
background-color: #333;
color: #ccc;
}
}
Loops
Loops are statements that repeat a block of code a number of times or for each element in a list or a map. To create a loop, you use the @for
, @each
, or @while
directives followed by a variable, a range, or a condition and a block of code. For example:
// For loop
@for $i from 1 through 5 {
.col-#{$i} {
width: $i * 20%;
}
}
// Each loop
$colors: red, green, blue;
@each $color in $colors {
.#{$color}-text {
color: $color;
}
}
// While loop
$i: 1;
@while $i < 10 {
.item-#{$i} {
margin-left: $i * 10px;
}
$i: $i + 1;
}
Conclusion
SCSS is a powerful and expressive way to write CSS that can save you time and effort.
If you have any questions/problems/ideas, feel free to add me on discord: waradu
.
Top comments (4)
Thank you for this post! It comes at a perfect time for me. I'm brushing up on my SCSS skills for a Hugo theme.
thx. i forgot smth btw.
You can use โ&โ to select the current element:
this would be the same as:
one if the features i use the most (after nesting)
What does the header image have to do with the article?
hahaha, sorry I used the wrong one, i was in a hurry.