CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



Sass @extend

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). It is a powerful tool that allows developers to write CSS in a more efficient and organized way. One of the features of Sass is the @extend directive, which allows developers to inherit styles from one selector to another.

The @extend directive is used to create a relationship between two selectors. It allows developers to reuse styles from one selector in another selector. This can be useful when you have multiple selectors that share the same styles. Instead of duplicating the styles in each selector, you can use the @extend directive to inherit the styles from one selector to another.

The syntax for using the @extend directive is as follows:

.selector-1 {
  color: red;
}

.selector-2 {
  @extend .selector-1;
  font-size: 16px;
}

In the example above, the styles defined in .selector-1 are inherited by .selector-2 using the @extend directive. This means that .selector-2 will have the same color as .selector-1, but will also have its own font-size.

The @extend directive can also be used with multiple selectors:

.selector-1, .selector-2 {
  color: red;
}

.selector-3 {
  @extend .selector-1, .selector-2;
  font-size: 16px;
}

In the example above, the styles defined in .selector-1 and .selector-2 are inherited by .selector-3 using the @extend directive. This means that .selector-3 will have the same color as .selector-1 and .selector-2, but will also have its own font-size.

It is important to note that the @extend directive should be used with caution. If used improperly, it can lead to bloated CSS and performance issues. It is recommended to use the @extend directive sparingly and only when it makes sense to do so.

Here are some best practices for using the @extend directive:

  • Only use the @extend directive when it makes sense to do so.
  • Avoid using the @extend directive with complex selectors.
  • Use the @extend directive with simple selectors that are likely to be reused.
  • Keep the @extend directive close to the selector it is extending.

Overall, the @extend directive is a powerful tool that can help developers write more efficient and organized CSS. When used properly, it can save time and reduce the amount of code needed to style a website.

Code Examples

Here are some code examples of using the @extend directive:

Example 1

.error {
  color: red;
  font-weight: bold;
}

.warning {
  @extend .error;
  color: orange;
}

In this example, the .warning selector inherits the styles from the .error selector using the @extend directive. The .warning selector also has its own color property, which overrides the color property inherited from the .error selector.

Example 2

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: blue;
  color: white;
}

.button-primary {
  @extend .button;
  background-color: green;
}

In this example, the .button-primary selector inherits the styles from the .button selector using the @extend directive. The .button-primary selector also has its own background-color property, which overrides the background-color property inherited from the .button selector.

Example 3

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  @extend .container;
  background-color: blue;
  color: white;
}

.footer {
  @extend .container;
  background-color: black;
  color: white;
}

In this example, both the .header and .footer selectors inherit the styles from the .container selector using the @extend directive. This allows the .header and .footer selectors to have a consistent layout and spacing.

References



Share via:

Activity