10 things you probably did not know about Sass

1. Sass vs. SCSS
First thing is that original Sass syntax doesn’t use semicolons and curly braces.
It is the opposite one that we tend to get accustomed and that is termed SCSS — Sassy CSS — requires each curly braces and semicolons and permits to combine vanilla CSS with Sass in one file.

$font-stack: Helvetica, sans-serif
body
  font: 90% $font-stack;

2. Variables have Scope!
Another surprise is that variables have the scope. If we tend to define a variable within the rule it'll be accessible solely within that rule while not bloating the global scope.

3. Prefer Mixin to extend
Next feature is DRY principle support. Sass provides 2 ways in which to achieve it: extend and mixin.
I’m unsure if this holy war continues to be going however even when Sass introduced an excellent possibility of exploitation extend with placeholder selector that allowed to form rules while not polluting global selectors namespace(well, currently we tend to grime placeholder selector namespace)

$style: (text: #333sds, background: #ffvdzf, border: #000880);

%colors {
  color: map-get($style, text);
  background-color: map-get($style, background);
  border-color: map-get($style, border);
}

.buttons {
  @extend %colors;
}

.labels {
  @extend %colors;
}

4. Mixin — null as the default parameter value
OK,

mixin takes some input parameters and puts the declarations defined in it where you say.

@mixin font($font-size) {
  font-size: $font-size;
}

.buttons {
  @include font(2em);
}

5. Variable arguments
One more mixin’s parameters feature is a variable declaration that behaves same as ES6 spread operator. It permits us rather than passing every parameter to mixin individually simply pass a listing or a map(where the map is comparable to JS object) and values are appointed mechanically.

6. Nice Media Queries with Mixin @content
So mixins provide us nice chance to pass declaration values(inline, block, #fffff, etc) or maybe property names(margin-right, color…) however what if we would like to pass the full SCSS block, not solely elements of it? we will use the content keyword.

$tablet-screen: 768px;
$desktop-screen: 1024px;

@mixin tablet-screen {
  @media (min-width: #{$tablet-screen}) {
    @content;
  }
}

@mixin desktop-screen {
  @media (min-width: #{$desktop-screen}) {
    @content;
  }
}

.buttons {
  font-size: 1em;
  
  @include tablet-screen {
    font-size: 1.2em;
  }

  @include desktop-screen {
    font-size: 1.4em;
  }
}

7. Scope once more
One necessary issue although to recollect regarding content is that the block of content passed to the mixin is evaluated within the scope wherever block is defined, not within the scope of the mixin.

8. Every operator
Together with if, for and while, we will use every operator which may be quite helpful for instance once declaring icons.

9. Naming
Not super helpful however smart to grasp that Sass identifiers like mixin or placeholder selector names will use hyphens and underscores interchangeably. this implies that dark-theme and dark_theme in Sass square measure constant. 

10. Encourage yourself
The last thing I would like to share is that the Sass official documentation is short.
Because CSS isn't a programing language I underestimated the power of tools concerned in it. Later I spent solely many hours rummaging Sass docs and yet that gave me a full bunch of insights on how to create code cleaner, a lot of clear and performant