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)