learn sass

June 12, 2020

It’s a CSS preprocessor/extension Allows us to use features that don’t exist yet in CSS compiled to regular CSS form (.scss/sass)

Variables in CSS

$primary: "blue"

@mixin transform  ($property) {

}

.box{
    @include transform(rotate(30deg))
}

%message-shared {
    border: 1px solid #ccc;
}

inherit

.message {
    @extend % message-shared;
}

.success {
    @extend % message-shared;
    padding: 1px;
}

*, /, -, +

@if $direction === up {

}

@else if $direction === right {

}

@else {

}

@error {

}

each in

Allows imports from other files