How to access the current class in Sass without referencing the parent class

.site-header
    .basket
        position: relative
        &-container
            width: 100%
            padding: 0 18px
        $basket: &
        &.opened
            #{$basket}-link
                border: 1px solid #e5e5e5
                border-bottom: 1px solid white
            #{$basket}-wrapper
                visibility: visible
                opacity: 1

I would like to include an opened state for the basket.

I am looking to generate .site-header .basket.opened .basket-wrapper

However, what I ended up with was .site-header .basket.opened .site-header .basket-wrapper

The issue seems to be that & contains .site-header. How can I correct this and have $basket retain its current class?

I just wanted to avoid having to repeatedly write 'basket' 

.site-header
    .basket
        position: relative
        .basket-container
            width: 100%
            padding: 0 18px
        .basket.opened
            .basket-link
                border: 1px solid #e5e5e5
                border-bottom: 1px solid white
            .basket-wrapper
                visibility: visible
                opacity: 1
csssass

Answer №1

Take a look at this modified version:

.cart
    $cart: &
    .site-header &
        position: relative
        &-container
            width: 100%
            padding: 0 18px
        &.expanded
            #{$cart}-link
                border: 1px solid #e5e5e5
                border-bottom: 1px solid white
            #{$cart}-wrapper
                visibility: visible
                opacity: 1

Answer №2

Let's find out the current class!

@function str-split($string, $separator)
    $split-arr: ()
    $index : str-index($string, $separator)
    @while $index != null
        $item: str-slice($string, 1, $index - 1)
        $split-arr: append($split-arr, $item)
        $string: str-slice($string, $index + 1)
        $index : str-index($string, $separator)

    $split-arr: append($split-arr, $string)

    @return $split-arr

@function last($list) 
    @return nth($list, length($list))

@function get-cur-class()
    $path-arr: str-split('"' + & + '"',' ')
    @return last($path-arr)

.site-header
    .basket
        position: relative
        &-container
            width: 100%
            padding: 0 18px
        $t: get-cur-class()
        &.opened
            #{$t}-link
                border: 1px solid #e5e5e5
                border-bottom: 1px solid white
            #{$t}-wrapper
                visibility: visible
                opacity: 1

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

Angular silhouette casting on CSS fold

I am attempting to recreate this design as accurately as possible, but I am struggling with replicating the shadow effect on the right side. Is it achievable using CSS? CSS: *{margin:0px;padding:0px;} html { width:100%; height:100%; te ...

htmlcsscss-shapes

What is the solution to making flexbox align-items flex-end work in WebKit/Blink?

I'm attempting to embed one flexbox within another flexbox. The outer box is aligned vertically: +------+ | | +------+ | | | | | | +------+ The top section adjusts to fit the content with flex 0 1 auto, while the bottom half occu ...

cssflexbox

Adjusting the cell size to align with the height of another cell in the same row

Within a table row, I have two cells that contain divs and the height varies due to changing content. Is there a way for one cell to take up 100% height to match the other cell? You can see an example here. The goal is for the second cell and its div to ...

htmlcsscss-tables

Tips for styling Ajax.ActionLink elements with CSS

Hi there, I'm trying to style a navigation bar using CSS. I'm pulling the navigation bar values from a database using Ajax.ActionLink. I attempted to use JavaScript but encountered an error stating "jQuery is not defined", Here's the cod ...

javascriptjquerycssasp.net-mvcasp.net-ajax

How to optimize the loading speed of background images in an Angular application

Utilizing Angular v6, typescript, and SASS for my project. A CSS background image is set for the homepage, however, it's a large photo that always takes too long to load. Custom CSS: @import '../../../scss/variables'; :host { .wrapper { ...

cssangularimage-processingoptimizationsass

Optimizing Bootstrap for Tablet Browsing in Internet Explorer

Hey there, I have a question regarding Internet Explorer and tablets. As I revamp this website and integrate Bootstrap into it, my focus is currently on the small-sized IE browser for tablets. My dilemma arises from not knowing if there are any tablets th ...

htmlcssinternet-explorertwitter-bootstrap-3

Ways to include scrolling specifically for one template

As a newcomer to frontend development, I have recently started learning Vue and the Quasar Framework. I am currently working on a table and trying to set a fixed table name with only the table items scrollable. <template> <q-table virt ...

javascriptcssvue.jsquasar-framework

Utilize a personalized container for Bootstrap 4 dropdowns

I'm currently working on a Megamenu using Bootstrap 4 dropdown functionality. My goal is to implement a custom container like <div class="dropdown-container"> to control the visibility of the dropdown content, instead of relying on Bootstrap&ap ...

jquerydrop-down-menusassbootstrap-4megamenu

The JavaScript code that added links to the mobile menu on smaller screens is no longer functioning properly

I recently created a website with a mobile navigation menu that should appear when the browser width is less than 1024px. However, I used some JavaScript (with jQuery) to include links to close the menu, but now the site is not displaying these links and t ...

javascriptjqueryhtmlcsswordpress

Is there a way to use jQuery to verify if an LI element contains a parent LI element?

Struggling with customizing the comments section of a WordPress theme? Utilizing jQuery for styling can be tricky, especially when dealing with nested UL elements like admin comments. The challenge lies in traversing the DOM structure to target specific el ...

jquerycssdomtraversal

Ways to create a back-and-forth transition across a sequence

Is it possible to create an animation that changes the width of an element once, then reverts back after a pause? I want this transition to occur over a three-second interval followed by a two-second delay. How can I achieve this? Below is the code I have ...

javascriptjquerycsstransition

Showing content in a single line causes it to drop down to the next

Check out my code snippet here: http://jsfiddle.net/spadez/aeR7y/23/ I'm curious about how I can make my header list align on the same line as the header, without dropping down. Here's the CSS code I have for the list: #header li { display: ...

htmlcss

The element within the flexbox does not extend across the entire width, despite being designated as 100% full width

I'm currently attempting to center certain elements to ensure they are visually aligned. The upper div seems to have some odd space on the right, causing all the content within that div to be shifted and not accurately centered. On the other hand, th ...

htmlcssflexboxbootstrap-5

Design buttons that are generated dynamically to match the style

I have a challenge in styling dynamically generated buttons. I've developed a component responsible for generating these dynamic buttons. const TIMER_PRESETS: Record<string, number> = { FIFTHTEENSEC: 15, THIRTYSEC: 30, FORTYFIVESEC: 45, ...

cssreactjstypescriptmaterial-uiclient-side

combine two columns into a single responsive list group item

Using Bootstrap 4, I created an item list and divided it into two columns (see image). However, when I resized the website to a mobile size screen, it displayed like this: https://i.sstatic.net/0iPHm.png My desired outcome is for the list to display in o ...

csshtmlbootstrap-4css-grid

Assigning the style of the parent element based on the child element

Currently, I am attempting to develop a customized dropdown field and here is the code I have come up with: const list = document.querySelector('.list'); const listItems = list.getElementsByTagName('p'); document.querySelector('# ...

javascripthtmlcss

The functionality of aria-expanded is not functioning properly when set to false

Having trouble with the bootstrap accordion feature. When the page loads, the accordions are expanded by default instead of being collapsed. I want them to start collapsed and then expand when clicked. Here is the HTML code: <!DOCTYPE html> &l ...

jqueryhtmlcsstwitter-bootstrapweb-deployment

How Webpack 4 Utilizes splitChunks to Create Numerous CSS Files

I need to create multiple CSS files using webpack 4 with the min-css-extract-plugin and splitChunks plugin. Here is my webpack configuration. const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const path = require("path"); module.exports = ...

csswebpackwebpack-4webpack-splitchunks

Using HTML and CSS, we can achieve a fixed position using the `position: sticky`

On my website, I have elements that utilize transformations. One issue I've encountered is that these transformations end up resizing the viewport. Normally, I would address this by setting overflow-x: hidden for both html and body, but doing so disru ...

htmlcsscss-transformssticky

Using @font-face with Rails version 2.3.8

Hello, I am having trouble including a custom font in my Rails application. I am currently using Rails 2.3.8. I have placed my font folder in the public folder and below is my CSS code. However, it seems to not be working. Can anyone provide some assistan ...

cssruby-on-railsfontsruby-on-rails-2