We use cookies to enhance your experience on the site

Extend and Inheritance in Sass

Sass enables the use of inheritance and selector extension, allowing for even greater optimization and avoidance of code repetition. This means we can create classes that inherit styles from other classes while adding their own unique styles.

The @extend Directive

The @extend directive allows you to inherit all styles from another selector. For example:

1.panel {
2  border: 1px solid gray;
3  padding: 10px;
4  color: black;
5}
6
7.panel-success {
8  @extend .panel;
9  border-color: green;
10}

After compiling to CSS, we get:

1.panel, .panel-success {
2  border: 1px solid gray;
3  padding: 10px;
4  color: black;
5}

.panel-success { border-color: green; }

As you can see, .panel-success inherits all styles from .panel and then adds its own unique style.

Placeholder Selectors

Sass also offers so-called placeholder selectors, which are defined using the % sign. These selectors do not generate CSS code on their own - they are used exclusively with the @extend directive.

1%button {
2  padding: 10px 15px;
3  border: none;
4  border-radius: 5px;
5  font-size: 16px;
6}
7
8.button-primary {
9  @extend %button;
10  background-color: blue;
11  color: white;
12}
13
14.button-danger {
15  @extend %button;
16  background-color: red;
17  color: white;
18}

After compiling to CSS, we get:

1.button-primary, .button-danger {
2  padding: 10px 15px;
3  border: none;
4  border-radius: 5px;
5  font-size: 16px;
6}
7
8.button-primary {
9  background-color: blue;
10  color: white;
11}
12
13.button-danger {
14  background-color: red;
15  color: white;
16}

Extension and inheritance are powerful mechanisms in Sass that help maintain concise, readable, and easily manageable CSS code. However, remember to use them with moderation and care to avoid creating overly complex and hard-to-debug relationships between styles.

Exercise: Using @extend and Placeholder Selectors in a Sass Project

Exercise Goals

Create base styles using placeholder selectors.
Apply the @extend directive to inherit styles in different classes.
Organize code into modules and partials for better readability and management.

Step 1: File Structure

Create the following file structure for the project:

1project/
2|-- scss/
3|   |-- _base.scss
4|   |-- _buttons.scss
5|   |-- main.scss
6|-- css/
7|   |-- main.css
8|-- index.html

Step 2: Defining Base Styles

In the _base.scss file, define base styles using placeholder selectors:

1// _base.scss
2%base-panel {
3  border: 1px solid gray;
4  padding: 10px;
5  color: black;
6}
7
8%base-button {
9  padding: 10px 15px;
10  border: none;
11  border-radius: 5px;
12  font-size: 16px;
13}

Step 3: Creating Specific Styles

In the _buttons.scss file, import the base styles and create specific classes:

1// _buttons.scss
2@use 'base';
3
4.panel-success {
5  @extend %base-panel;
6  border-color: green;
7}
8
9.panel-warning {
10  @extend %base-panel;
11  border-color: orange;
12}
13
14.button-primary {
15  @extend %base-button;
16  background-color: blue;
17  color: white;
18}
19
20.button-danger {
21  @extend %base-button;
22  background-color: red;
23  color: white;
24}

Step 4: Compiling Sass

In the main.scss file, import all partial files and compile to CSS:

1// main.scss
2@use 'base';
3@use 'buttons';

Step 5: HTML

Create an index.html file and add the following structure:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Sass Project</title>
7  <link rel="stylesheet" href="css/main.css">
8</head>
9<body>
10  <div class="panel panel-success">
11    Panel Success
12  </div>
13  <div class="panel panel-warning">
14    Panel Warning
15  </div>
16  <button class="button-primary">Primary Button</button>
17  <button class="button-danger">Danger Button</button>
18</body>
19</html>

Step 6: Compiling Sass

Use a Sass compilation tool (e.g., node-sass, Dart Sass, or your editor's preprocessor) to generate the CSS file (main.css) from the Sass file (main.scss).

Exercise

Adding New Styles: Create new styles for info panels and buttons using placeholder selectors and the @extend directive.
Refactoring Existing Styles: Analyze existing CSS code and use placeholder selectors and the @extend directive to simplify and optimize the code.
Testing Styles: Test the new and modified styles on different HTML elements to make sure inheritance works correctly.

This exercise will help you understand how to effectively use the @extend directive and placeholder selectors in Sass to create modular, readable, and easy-to-manage stylesheets.

Go to CodeWorlds→