Inheritance in SASS - excluding the parent class

Question

Inheritance in SASS - excluding the parent class

Can I apply this syntax to inherit a class in SASS?

Code

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

Output

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

I would like to achieve a similar result, but without including .message in the output

Desired Output

.success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

Is there a way to do this?

css inheritance sass

Answer 1

Answer №1

A great way to style messages in SASS is by using a placeholder selector:

SASS

%message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend %message;
  border-color: green;
}

.error{
  @extend %message;
  border-color: red;
}

OUTPUT

.success, .error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

If you want to use the message style as a class, you can also extend it like this:

.message{
  @extend %message;
}

Answer 2

A great way to style messages in SASS is by using a placeholder selector:

SASS

%message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend %message;
  border-color: green;
}

.error{
  @extend %message;
  border-color: red;
}

OUTPUT

.success, .error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

If you want to use the message style as a class, you can also extend it like this:

.message{
  @extend %message;
}

Inheritance in SASS - excluding the parent class

Answer №1

Similar questions

The focus is on the last row that was selected

The header is displaying with the heading and image out of alignment

Preventing scrollbar-induced content shifting in Material-UI components: A guide

Encountered an issue when trying to generate a shader cache entry- there was an error when attempting to locate an

Personalized Bootstrap 4 grid system

Ways to eliminate basic text from HTML/HAML

How to Create a Responsive Layout with Bootstrap 5: Cards, Grids, and Columns

Storing User Information in Cookies using jQuery

Guide on incorporating `Animate.css` into an Angular application

Mac users may experience lag when using Javascript parallax effects

Tips for customizing CSS hover effects using HTML and jQuery scripts

Unable to find the XPATH element with Selenium in Python due to element not being located

Is there a way to eliminate the number spinner in Angular specifically for certain input fields?

CSS hover effects are not displayed when using the input type button

Ensure that the select boxes are aligned in a horizontal manner

Webpack is failing to load the logo PNG image file

Emphasizing buttons that are in a "pressed" or "inactive" state

Animate hovering over a specific element within a group of similar elements using jQuery

Designing a webpage using CSS

Tips for ensuring consistent spacing between font icons within a navigation bar when using text with font icons as links