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
Top comments (0)