SASS Placeholder Selectors

Syntax

SASS Placeholder selectors are created using the % symbol followed by a selector name, just like a regular CSS class selector. For example:

%my-selector {
  background-color: #fff;
  color: #000;
}

Example

%btn {
  display: inline-block;
  padding: 10px 20px;
}

.btn-primary {
  @extend %btn;
  background-color: #007bff;
  color: #fff;
}

.btn-secondary {
  @extend %btn;
  background-color: #6c757d;
  color: #fff;
}

Output

The above SASS code will output the following compiled CSS:

.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 10px 20px;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
}

Explanation

SASS Placeholder Selectors are like regular CSS classes, but they don't create any CSS output themselves. Instead, they are used to extend the properties of other selectors. This way, we can avoid duplicating code and improve the readability of our SASS code.

Use

SASS Placeholder Selectors are useful for creating reusable styles, like buttons or typography, that can be extended by multiple other selectors. They can also help reduce the size of our CSS output, since properties are not duplicated.

Important Points

• SASS Placeholder Selectors are created using the % symbol followed by a selector name.
• They don't create any CSS output themselves - they are used to extend the properties of other selectors.
• SASS Placeholder Selectors can be extended by multiple selectors, which helps us avoid duplicating code.
• They can help reduce the size of our CSS output, since properties are not duplicated.

Summary

SASS Placeholder Selectors are an important feature of the SASS language that allows us to create reusable styles and avoid duplicating code in our CSS output. By using them wisely, we can improve the readability and maintainability of our code.