Sass: The Superman of CSS

Syntaxically Awesome Style Sheet

I used to rely on CSS all the time for styling, thinking it was the simplest way to style my pages. Then, a preprocessor came into my life, leading me to an easier approach to styling—it's called SASS. That day, my whole perspective suddenly changed; I realized this is the way a programmer should style.

***Setup

Setup was easy. You just have to install Node on Windows, followed by Ruby. Compiling SCSS was also easy.

SASS is a CSS preprocessor that is mostly used for the following reasons:

• Variables
• Nesting
• Importing
• Autocompilation

***Variables

When you use css, you have noticed that if you want to apply same color to another element, you have to inpect the element and then copy and paste the color.....
bro this is a much problem
SASS -- everyone I am here to solve you problem
Yes in SASS you can define variables and use it in all the file.

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size-large: 18px;
$padding: 10px;

body {
  background-color: $primary-color;
  color: $secondary-color;
  font-size: $font-size-large;
}

***Nesting

In Sass you can write code in nested way as everyone wanted to

// SASS example with nesting
nav {
  background-color: #333;
  color: white;

  ul {
    list-style: none;
    
    li {
      display: inline-block;
      
      a {
        text-decoration: none;
        color: white;

        &:hover {
          color: #f39c12; // Change color on hover
        }
      }
    }
  }
}

***Importing

As in many languages in this you can also import other files for example--

1. Create a File Structure

Let's say you have the following file structure:

/styles
  ├── _variables.scss   // SASS variables
  ├── _mixins.scss      // SASS mixins
  └── main.scss         // Main SASS file

2. Using @import in SASS

_variables.scss

// Define variables
$primary-color: #3498db;
$font-size: 16px;

_mixins.scss

@mixin button-style {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

main.scss

@import 'variables';
@import 'mixins';

body {
  font-size: $font-size;
}

.button {
  @include button-style; 
}

***Autocompilation

Autocompilation is a powerful feature of SASS that allows you to automatically compile your SASS files into CSS whenever you make changes. This means you don’t have to manually run a compilation command every time you update your styles, saving you time and streamlining your workflow.

there are many reasons that stands on the scss from the css

so, that's it
see you on the other side :)