SCSS Nesting and Selecting the Parent Element

I often nest SCSS and I know how to target the parent element using &, but in this particular case, it's causing me some trouble! I have a feeling I'm missing something obvious here, but I just can't seem to get it right. Here is my (simplified) SCSS code:

[class^="icon--"]:before,
[class*=" icon--"]:before {
    opacity: .50;
}

Basically, I am using an icon font and I want the icons (added using the :before element) to appear lighter than the text they are attached to - which is okay.

Now, I want to override this on certain elements where this class is applied. I have tried the following (below), which does remove the opacity from the targeted element...but it also seems to cancel out the opacity: .50; on every element. So essentially, everything has opacity: 1; set.

[class^="icon--"]:before,
[class*=" icon--"]:before {
    opacity: .50;

    @at-root {

        .btn#{&} {
            opacity: 1;
        }
    }
}

Any suggestions?

htmlcsssass

Answer №1

To achieve the desired result, use the following SCSS code:

[class^="icon--"],
[class*=" icon--"] {
  &:before {
    opacity: .50;
  }    
  &.btn  {
    &:before {
      opacity: 1;
    }
  }
}

This will generate the corresponding CSS styling:

[class^="icon--"]:before,
[class*=" icon--"]:before {
  opacity: .50;
}
[class^="icon--"].btn:before,
[class*=" icon--"].btn:before {
  opacity: 1;
}

The & symbol refers to the current selector within the nesting level in your SCSS (not limited to only the parent).

Your initial approach would lead to the following CSS output:

[class^="icon--"]:before,
[class*=" icon--"]:before {
  opacity: .50;
}
[class^="icon--"]:before.btn,
[class*=" icon--"]:before.btn {
  opacity: 1;
}

This incorrect formatting implies a class .btn on a pseudo element :before (which is not valid).

You can verify and experiment with this code at sassmeister.com. For more information about the usage of the ampersand in SCSS, refer to this informative article: the almighty ampersand in SCSS.

Answer №2

I don't have much experience with SCSS, but it seems like you're attempting to style 

[class*=" icon--"]:before.btn

Targeting a class btn within a pseudo-element could be causing the issue.

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

Having difficulty recreating the arrow feature in the bootstrap sidebar

I am currently working on creating the fourth sidebar (from the left) using the templates provided in Bootstrap 5 examples. Everything seems to be falling into place except for one issue - I can't seem to get the arrow to rotate when aria-expanded=tr ...

htmlcssbootstrap-5

How to dynamically activate menu tabs using Vanilla JavaScript?

I have been exploring this Codepen project and am attempting to replicate it using vanilla JS (as my company does not use jQuery). My progress so far includes adjusting the line width correctly when clicking on a menu item. However, I am struggling to mak ...

javascripthtmlcss

Rendering HTML with jQuery using AJAX: Step-by-step guide

Within my webpage, I have implemented a select box that contains a list of various books. The purpose of this select box is to allow the user to choose a book and then click a submit button in order to view the chapters of that book on a separate page. Ho ...

javascriptjquerypythonhtmlajax

Steps to turn off hover functionality in bootstrap 4 dropdown menus

I am dealing with a situation where I have a page containing a data grid, and each row in the grid contains a bootstrap dropdown button/menu with various actions that can be performed on that specific row of data. However, there is a problem - the menu ope ...

htmlcssangularjsbootstrap-4

Transferring content files from a nuget directory to a specific destination folder

I am dealing with a nuget package that includes css files as content. My goal is to have these css files copied to a specific directory upon importing the package into a project, without requiring the project's structure to match exactly. Is there a ...

cssnuget

Ways to eliminate space surrounding a div containing an image

When one column takes up col-md-4 and another takes up col-md-8, the second with an image does not fill the width completely, leaving gaps on the left and right sides. Can anyone provide advice on how to remove these gaps and make the image full size? Than ...

htmlcssangular

Is the hero image overlapping the text and logo?

I'm completely new to coding and I can't figure out why the hero image is covering up all the other content, even with z-index in place. Here is how the webpage should appear, but unfortunately, the hero image is hiding the logo, top navigation ...

htmlcsscss-floatcss-positionz-index

Dropbox menu within an extended webpage

I am looking to create a dropdown menu that behaves like the one on this website. The goal is for the dropdown to cover the entire webpage, hide the scroll bar, and "unmount" the other elements of the page, while still displaying them during the transition ...

javascriptjquerycssreactjsecmascript-6

What is the best way to make jQuery not consider hidden elements?

Apologies for not sharing the code, as I know many of you prefer to see it. I am currently working on developing a comprehensive calculator for my small business, and I am aware that I am making several mistakes. I kindly request that you do not critique ...

jqueryhtmlcsshidden

Creating a script to open multiple URLs in HTML and JavaScript

Currently, I am working on creating a multiple URL opener using HTML and JavaScript. However, I have encountered an issue where HTTP links are opening fine but HTTPS links are not. Can someone provide assistance with this problem? Below is the code snippet ...

javascriptjqueryhtmlcss

Animated SVG Arrow Design

I created a dynamic SVG animation that grows as you hover over it. Since I'm still learning about SVG animations, I encountered some issues with my implementation. The animation is quite straightforward - when hovering over the SVG arrow, the line sho ...

javascriptcssreactjssvggatsby

Updating the .css file through the graphical user interface, within the managed bean

I have created a jsf page with colorpickers to allow an administrator to modify the main theme of the site, which consists of 4 colors. I have prefixed my main colors in the css file with numbers like this: .element{ background: /*1*/#333333; } When ...

cssjsf

Is it possible to achieve a capsule shape using border-radius without specifying a fixed width or height?

Can a capsule shape be created using border-radius without specifying a width or height? I am looking to have the left and right sides of the capsule fully rounded while keeping the horizontal length straight. Setting the radius to 50% does not achieve th ...

csscss-shapes

Show a live feed of rows from a SQL database table

I've been struggling with this issue for more than a week now. I have an offline SQL database/website set up where the browser screen is divided into two sections - the full table displayed at the bottom with limited details, and a styled version of i ...

phpjqueryhtmlmysqlajax

Automatic Expansion Feature for HTML Tables

http://jsfiddle.net/bzL7p87k/ In my table, placeholders are filled with special words. However, what happens when I have more than 4 rows? For instance, if there are 21 placeholders for 21 rows? What I mean is this: I only have one row with a placeholder ...

javascriptjqueryhtmlmysqlcss

What is the process by which photoswipe applies styles to blur an image upon clicking the share button?

If you want to see an example, check out this link: http://codepen.io/dimsemenov/pen/gbadPv By clicking on the Share button, you'll notice that it blurs the image (and everything else). Despite inspecting it closely, I still can't seem to figu ...

javascriptcssphotoswipe

Creating a dynamic effect by applying a scale animation to a circle, overlaying centered text on top, and utilizing

I am attempting to create an animation for a button that consists of a black circle in the background and white text in the foreground. The black circle should scale from full size to smaller size, while the text should be white when overlapping the circle ...

htmlcssanimationmix-blend-mode

menu roll-up in an upward direction

Is there a way to implement the CSS effects mentioned in this article to make the menu roll up instead of down? Learn How to Create a Menu that Rolls Up Using CSS! ...

htmlcssdrop-down-menu

Using CSS zoom to enhance JQuery/Javascript Smart Guides

Lately, I've been exploring the idea of incorporating 'smart guides' into one of my JQuery Draggable projects. This project involves a variable zoom level, and I've made adjustments in my code to accommodate it. However, I'm encoun ...

jqueryhtmlcssjquery-ui

Struggling to resolve issues with out-of-Viewport elements in my code while using Python 3.7 and Selenium

My current challenge involves troubleshooting my code to resolve the issue preventing me from utilizing the "actions.move_to_element" method to navigate to an offscreen element and click on it. The specific line of code I am focusing on is: Off_Screen_Ele ...

htmlpython-3.xseleniumselenium-webdriverwebdriverwait