Having issues with extending multiple classes in a scss file?

I have integrated AdminLTE into my project, and within an html page I have the following code:

<aside class="main-sidebar sidebar-dark-primary elevation-4">
<aside>

Everything seems to be working fine.

To customize the styling for multiple tenants, I created a custom scss file where I imported scss files and defined the following styles:

@import '_adminlte/node_modules/bootstrap/scss/bootstrap';
@import '_adminlte/build/scss/adminlte.raw';

.tenant-sidebar {
     @extend .main-sidebar, .sidebar-dark-primary, .elevation-4
}

After that, I updated my aside tag to:

<aside class="tenant-sidebar">
<aside>

However, it appears that only the main-sidebar and elevation-4 classes are being applied. The sidebar-dark-primary class is not getting applied. Any idea why this is occurring?

htmlcssbootstrap-4sassadminlte

Answer №1

Summary:
.sidebar-dark-primary class is void in the adminlte.css

In my observation, the css class sidebar-dark-primary does not contain any styling in the generated css file. Its sole purpose is to group the child elements styles like this: 

.sidebar-dark-primary .nav-sidebar.nav-legacy > .nav-item > .nav-link.active

Therefore, when you @extend this class, no relevant stylings will be applied.

Answer №2

As outlined in the SASS Documentation for @extend,

.tenant-sidebar {
     @extend .main-sidebar, .sidebar-dark-primary, .elevation-4
}

This effectively indicates extending the selector: 

.main-sidebar.sidebar-dark-primary.elevation-4

Instead of that, I would recommend trying this approach:

.tenant-sidebar {
     @extend .main-sidebar;
     @extend .sidebar-dark-primary;
     @extend .elevation-4;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS styles are not being applied correctly to the Bootstrap modal in combination with Leaflet

After importing leaflet-bootstrapmodal.js into my project, I am facing an issue with styling it. Take a look at the plugins listed below: <!-- Bootstrap modal--> <link rel="stylesheet" href="bootstrap-modal/bootstrap ...

javascripthtmlcssbootstrap-4leaflet

I am puzzled as to why there is extra space on the right side of the output. Is there a way to utilize Bootstrap 4 to fill in

What could be causing the space at the end of the output? And how can I utilize Bootstrap 4 to fill that space? .navbar-custom { background-color:rgb(128 128 128 / 18%); height:48px; } .close{ margin-bottom: 40px; } h2{ margin-to ...

htmlcssbootstrap-4containersnavbar

How can I modify the font style in Bootstrap?

How can I integrate a custom open font into Bootstrap without using a CDN? Should I create a CSS rule to override Bootstrap's default font or locate the font files in Bootstrap and replace them with my desired font? ...

css

Combining HTML and CSS into a single line using Node.js for optimization

Is there a way to minimize HTML and CSS code into a single line using Node.js? For instance <style media='screen' type='text/css'> .text { padding: 1px 1px 1px 1px; font-size: 12px; } </style> < ...

htmlnode.jsgulpnode-modulesminify

Bug in Cascading Style Sheets affecting Internet Explorer version 6 and version 7

My team is currently facing an issue with our website over at www.eat.vn. While the site functions perfectly on browsers like Firefox, Chrome, IE8 & IE9, and Safari, we are encountering a problem with a key design element when it comes to IE6 and IE7. ...

cssinternet-explorerinternet-explorer-7internet-explorer-6

Displaying and hiding elements as the page is scrolled

Is there a way to create a single scrolling page with a fixed element that remains visible as the user scrolls down? Imagine an image of a car on a road, where the car appears to be moving down the road as the user scrolls. The car should go under certain ...

jqueryhtmlcss

Retain the previously selected option in a PHP combobox even when changing pages

Can someone please assist me with my PHP code? I am having trouble keeping my combobox unchanged after a page reload. It works fine until I change pages in my pagination. Can anyone help? THIS IS MY PHP. PHP ...

javascriptphphtmldatabasecombobox

The CSS root variable is failing to have an impact on the HTML element's value

I'm in the process of changing the text color on home.html. I've defined the color property in a :root variable, but for some reason, it's not appearing correctly on the HTML page. Take a look at my code: home.scss :root { --prim-headclr : ...

htmlcsstypescriptsass

In HTML, utilize the "clone" div class

Upon inspecting the element of my website, I have observed that the top-header div contains a duplicate. Why did this occur? How can I eliminate the clone and retain the original div top-header? Visit my site Below is the HTML code: <div id="top-h ...

phphtmlcsslayout

The nonexistence of the ID is paradoxical, even though it is present

I've been working on a school project that involves a dropdown box with the id "idSelect." However, I'm encountering an issue where it says that idSelect is not defined when I try to assign the value of the dropdown box to a variable. Even after ...

javascripthtml

Bootstrap: Right aligning text labels

I need help with aligning a text label to the right using Bootstrap 5. Currently, when I use the following code: <div class="form-floating text-dark text-end float-right"> <input type="password" class="form-control text- ...

cssbootstrap-5

Check if text is being added to an input field using jQuery and then execute a specified function

My input field has the readonly attribute set by HTML, and I am populating text into it using jQuery's .html() method: <input type="text" id="myField" readonly="readonly" /> I have a function called myFunction() th ...

htmljqueryjquery-events

Choosing HTML elements within nested DIV tags

In the process of creating a Hangman-style game using javascript/jQuery, I encountered an issue with selecting HTML content from virtual keyboard keys : <div class="square keyboard"> <div class="content"> <div class="table"> ...

javascriptjqueryhtmlcss

Modify the background's color and incorporate a pointlight using three.js

Recently, I have been exploring the capabilities of three.js. One interesting challenge I encountered was creating a cube within a wireframe cube. However, I found myself struggling to alter the background color in my project. I believe that incorporating ...

javascripthtmlcanvasthree.js

Tips for applying a custom design to your MUI V5 styled component

How do I customize the style of a button component in MUI V5? I've been trying to combine old methods with the new version, but it's not working as expected. import { Button } from "@mui/material"; import { styled } from "@mui/mate ...

javascriptcssreactjsmaterial-ui

Display the dropdown selection

I am trying to customize my dropdown menu so that when I hover over the main menu item (Sample Page), only the About submenu is displayed, not all of the dropdown menus. li.menu-item.dropdown .dropdown-menu { position: absolute; top: 70px; visibil ...

jqueryhtmlcss

What is the best way to delete an input field once it has been cleared?

After scouring through resources, I found a way to dynamically add input fields on keystroke by referencing an answer from this question. To see my implementation, check out this example. However, one challenge remains - removing a field if the user delete ...

javascriptjqueryhtml

Reviewing code for a simple form and box using HTML5 and CSS3

I have developed a compact form as part of a larger webpage, proceeding step by step according to the specified requirements. I am wondering if there could have been a more efficient way to code this. Perhaps streamlining the code or utilizing different c ...

htmlcssoptimization

Chrome fails to apply CSS to Polymer 2 web component

The implementation of my web component in Polymer v2 is causing a styling issue specifically in Google Chrome. Despite including a CSS file that defines a style called n-action-button, the styling is not being applied to the content of the web component in ...

javascriptcssgoogle-chromepolymerpolymer-2.x

Having trouble with CSS background-attachment not functioning properly and unable to adjust padding or margins on the background

Currently, I am in the process of learning CSS and HTML5. However, I am experiencing some difficulty when it comes to implementing basic elements. Specifically, I am using Google Chrome and attempting to create a top bar for my webpage. This top bar should ...

csshtml