DEV Community

Cover image for what I find super in sass
Hillary Chibuko
Hillary Chibuko

Posted on

4 1

what I find super in sass

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

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay