sass
  1. sass-basic-syntax
PreviousNext

SASS Basic Syntax

  • SASS is a powerful CSS preprocessor that allows developers to write CSS code with advanced features like variables, mixins, and nested rules.
  • Here is a basic syntax guide for SASS.

Syntax

SASS uses a syntax that is similar to CSS but with some additional features. Here is an example of SASS syntax:

$primary-color: #34d979;

.container {
  width: 960px;
  margin: 0 auto;
  background-color: white;
  
  h1 {
    color: $primary-color;
    font-size: 36px;
  }
  
  p {
    font-size: 18px;
  }
}

Example

Here is an example of a SASS code snippet for a simple website:

$primary-color: #34d979;

.container {
  width: 960px;
  margin: 0 auto;
  background-color: white;
  
  h1 {
    color: $primary-color;
    font-size: 36px;
  }
  
  p {
    font-size: 18px;
  }
  
  .button {
    padding: 10px;
    background-color: $primary-color;
    color: white;
    border-radius: 5px;
    
    &:hover {
      background-color: darken($primary-color, 10%);
    }
  }
}

Explanation

In the SASS example, there are three main elements: variables, nested rules, and mixins.

Variables are used to store values that can be reused throughout the code. In the example, the variable $primary-color is set to the value #3B5998.

Nested rules are used to group CSS rules together and make the code more organized. In the example, the h1 and p rules are nested under the .container rule.

Mixins are used to store groups of CSS properties that can be reused throughout the code. In the example, there is no mixin defined but can be added as per requirement.

Use

SASS is used to write more structured and organized CSS code, which can save time and make it easier to maintain. It is commonly used in web development to improve the efficiency of CSS code and make it more maintainable.

Important Points

  • SASS is a CSS preprocessor that adds additional features to CSS.
  • SASS uses variables, nested rules, and mixins to make CSS code more organized.
  • SASS code is compiled to regular CSS code using the Sass compiler.
  • SASS is commonly used in web development to improve the efficiency and maintainability of CSS code.

Summary

SASS is a valuable tool for writing clean and organized CSS code. Its simple yet intuitive syntax makes it easy for developers to write efficient and maintainable code. By using SASS, developers can save time and create more efficient stylesheets for web development.

Project SetupVariables
Published on: