SCSS (Sass CSS)

SCSS (Sass CSS) is a superset of CSS that allows for more powerful and flexible stylesheets. SCSS provides additional features and syntax that are not available in CSS.

SCSS requires a preprocessor to compile SCSS code into standard CSS that can be read by web browsers.

Some key features of SCSS include Variables, Nesting, Mixins and Operators.

Here are the examples of some features in SCSS:

1. Variables: SCSS allows for the use of variables, which can make stylesheets easier to read and maintain.

$primary-color: #007bff;
$secondary-color: #6c757d;


.btn-primary {
  background-color: $primary-color;
  border-color: $primary-color;
  color: #fff;
}


.btn-secondary {
  background-color: $secondary-color;
  border-color: $secondary-color;
  color: #fff;
}        

2. Nesting: SCSS allows for nesting of selectors, which can make the stylesheet more organized and easier to read.

.navbar {
  background-color: #fff;
  padding: 1rem;


  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;


    .nav-link {
      text-decoration: none;
      color: #000;
      padding: 0.5rem;
    }


    .active {
      font-weight: bold;
    }
  }
}        

3. Mixins: SCSS allows for the creation of mixins, which are reusable blocks of code that can be used in multiple places throughout the stylesheet.

@mixin button-styles($bg-color, $text-color) {
  background-color: $bg-color;
  border: none;
  color: $text-color;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;


  &:hover {
    background-color: darken($bg-color, 10%);
  }
}


.btn-primary {
  @include button-styles(#007bff, #fff);
}


.btn-secondary {
  @include button-styles(#6c757d, #fff);
}        

4. Operators: SCSS allows for the use of mathematical operators, which can make it easier to write complex styles.

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;


  .row {
    display: flex;
    flex-wrap: wrap;
    margin: -1rem;


    .col {
      flex: 1 0 0;


      &.col-2 {
        flex-basis: 50%;
      }


      &.col-3 {
        flex-basis: calc(100% / 3 - 2rem);
      }
    }
  }
}        

Overall, SCSS can make it easier to write and maintain stylesheets, and provides more power and flexibility than standard CSS.

#scss #css #html