Learning SCSS in 5 Minutes?

#webdev #scss #css #codenewbie

Let's learn the basics of SCSS in 5 Minutes. So basically SCSS means Sassy CSS. It's a CSS preprocessor that gives you access to useful features that are not available in Vanilla(normal) CSS.

VARIABLES

To create variable just add a $ sign to the variable name and set them like a normal CSS property.

//color palette for a project to maintain consistency

$product-dark-blue: #324e85;
$product-light-blue: #4c7396;

.element {
    coloe: $product-dark-blue;
}

NESTING

SCSS helps you write cleaner and concise CSS.

.container {
    width: 100%; 
    color: grey; 
    background-color: green; 

    div {
        border: 1px solid black; 
        a {
            text-decoration: none; 
            color: white;
            &::hover {
                color: #b59a9a;
            }
        }
    }
}

INHERITANCE

@extends help you inherit the properties of another class.

.header {
    color: grey; 
}
.sub-header{
    @extend .header; 
    font-size: 40px;
}

@Mixin

Mix in is another way SCSS implement inheritance using @mixin.

// create mixin
@mixin red-color {
    color: grey; 
}

.header {
    @include red-color; /*add mixin*/
}

Operators

SCSS offers you different kind of operators that you can use in your CSS. Arithmetic operators like +,-,*,/ etc.

@mixin top-margin ($margin){
    margin-top: 30px + $margin; 
}
.container {
    width: 800px -80px;
    @include top-margin(10px); 
}

LOOPS

We can use for loops in our CSS thanks again to SCSS. You can create utility classes for your color, font-size and a lot of other properties.

/* generate utility classes for font-size */

@for $x from 1 through 70 {
    .font-size-#{$x} {
        font-size: 0px + $x;
    }
}

CONDITIONS

Another awesome feature of scss is the ability to use if/else statements in CSS.

$bg: pink;
$bg-mobile: red;

p{
    @if $bg == pink {

        color: blue;
    } @else if $bg-mobile == red {
        color: green;
    } @else {
        color: grey;
    }
}