What Scss ?

Scss is Sassy Cascading Style Sheets. It wraps the CSS to allow you to use functions and variables exc.. make more likely language like JavaScript .

Previously when we styled some of our projects we get repeated code and some time needed much work to design the things .

Then after the Scss appears make the style more clean , easy to read and use multiple times . I am not here to explain what is Scss and how to start and all these PLA PLA things , So let's jump into the way to use it .

Just Second before we dev deep into the example ?! Would you ever feel confused between the Scss and Sass?

Sass is stand from (Syntactically Awesome Style Sheets) ,language that will be compiled into CSS . SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax.SASS has more developer community and support than SCSS

let jump in into the basic syntax

Variables

the most useful feature , It is really help for write the value once and get it all over the project and help for avoid the forgot value of the colors , fonts size and even the break points

// Colors 
$color-primary : #333333;
$color-scondary :  #4F4F4F ;  
$color-oriange : #F2994A ;
$color-green : #B0C2AC ; 

Functions

the second things that we absolutely aspect from script language is the methods , Which struct our code and reject the repetitions .In Scss there are two comment way to do that on is by using @mixin and the other is @function.
And the equation is which one is better . Let me tell you the main differences between them first . Function are blocks of code that return a single value of any Sass data type.

@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

And invoke it like this

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

But the mixin will compile directly into CSS styles, no need to return any value .
like

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

By using the @include

Import

Sometime we need to split the code into multiple file ,Then we need to call some of them into other Scss make the way possible by adding statements to do so . Like @import and @use.
The main differences is how they handle members. @import makes everything globally accessible in the target file. The Sass team discourages the continued use of the @import rule and that because it is allows for overlap and makes it difficult to trace back why your perfect css breaks .

Same as @import, @use rule enables us to break our stylesheet into more practical, smaller sections and load them inside other stylesheets. The key difference is how you access the original files' members .
and You can access variables, functions, and mixins from another module by writing .,

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}

// style.scss
@use "src/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

extend

one more think I like to add here the @extend . when one class should have all the styles of another class, as well as its own specific styles.

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

after compile it will be like

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

I will keep update this post till I get the most helpful features in SCSS . I HOPE YOU ENJOY IT