DEV Community

loading...
Cover image for what I find super in sass

what I find super in sass

Hillary Chibuko
A frontend web developer Based in Africa,Nigeria
・2 min read

Sass stands for Syntactically Awesome Stylesheet. Sass is an extension to CSS.
it is a CSS pre-processor. Sass is completely compatible with all versions of CSS.

Sass reduces repetition of CSS and therefore saves time

so today i am going to highlight two main features i consider as super in sass

the first goes to mixins

sass provides us with a mixin which is kinda like a regular javascript function

it helps reduce code redundancy

for example

.container{
display:flex;
justify-content:center;
align-items:center;
flex-basis:100%
}

.container2{
display:flex;
justify-content:center;
align-items:flex-start;
flex-basis:100%
}

both container and container2 share similar properties,with the power of sass we could easily create a function(mixin) to handle such repetitions.....

it goes like this

@mixin mymixin{
display:flex;
justify-content:center;
align-items:flex-start;
flex-basis:100%
}

and we can simply call this in our class by including @include mymixin()

as easy as that your code is available throughout your styling.....
you could also add parameters as i would call it to your mixins

e.g
@mixin mymixin($horizontal,$vertical){
display:flex;
justify-content:$horizontal;
align-items:$vertical;
flex-basis:100%
}

and when calling such mixin you simply provide two arguments for horizontal and vertical...flexible huh

The second super power i appreciate is the ability to import styles...

sass uses @imort to import scss files

header.sccs('' a convention for additional sass files)

and can be import as @import "./_header"
no need to append .scss as sass already knows its a sass file

those are the two i find really super in sass...

leave your thoughts on those you consider super

Discussion (0)