Sass Replicating Nested Selector

Is it possible to traverse nested SASS selectors to the parent selector?

You want to reuse two selectors (.btn-lang and span) in a single construction. This is not possible with SASS.

This situation is where extends really shine:

// Declaring a reusable extend that will not appear in CSS by itself.
%span-with-hover-on-active-element {
    & > span {
        /* styles for span under btn-lang */ }
    &.is-active > span:hover {
        opacity: 0; } }

.btn-lang {
    /* styles for btn-lang */
    // Apply the span-on-hover thing.
    @extend %span-with-hover-on-active-element; }  

It makes complicated code reuable and easier to read.

Resulting CSS:

.btn-lang > span {
  /* styles for span under btn-lang */
}
.is-active.btn-lang > span:hover {
  opacity: 0;
}

.btn-lang {
  /* styles for btn-lang */
}

SASS: @extend within (nested) pseudo class

The answer is: The order doesn't matter for the resulting CSS.

Therefore: Don't mind.

Is it possible to traverse nested SASS selectors to the parent selector?

You want to reuse two selectors (.btn-lang and span) in a single construction. This is not possible with SASS.

This situation is where extends really shine:

// Declaring a reusable extend that will not appear in CSS by itself.
%span-with-hover-on-active-element {
    & > span {
        /* styles for span under btn-lang */ }
    &.is-active > span:hover {
        opacity: 0; } }

.btn-lang {
    /* styles for btn-lang */
    // Apply the span-on-hover thing.
    @extend %span-with-hover-on-active-element; }  

It makes complicated code reuable and easier to read.

Resulting CSS:

.btn-lang > span {
  /* styles for span under btn-lang */
}
.is-active.btn-lang > span:hover {
  opacity: 0;
}

.btn-lang {
  /* styles for btn-lang */
}

What is the point of sass @extend?

In most cases @extend makes the css output smaller than if you would use a mixin. But the most efficient way is to put that @extend class in the html and not extend it to an element which does not have that class. Eventually the DOM might get messy, but it's faster.

How to properly do nested imports for scss?Semantic-UI issues?

The first issue you're having is because you're not importing the Semantic UI library correctly. It should be:

.semantic-ui{
    @import '~semantic-ui-css/semantic.min.css';
}

The ~ tells webpack to look for that file within the node_modules folder. Without it, the SASS parcer will look inside your current directory, and if it can't find it there, it will search through the directories defined via the --load-path argument (CLI), or the includePaths (JS API).

The second issue is that you should be ommiting the .css extention when importing CSS files inside SASS. If you don't, they will be translated into normal CSS import rules, @import url(...), which is why your semantic-ui rules aren't being nested within the .profile-iconsclass. Try:

.semantic-ui{
    @import '~semantic-ui-css/semantic.min';
}

For some reason @font-face rules defined inside the semantic.min.css file will stop working if you nest your rules like this. Not sure if it's invalid CSS or if webpack can't figure out the files' location. A quick fix would be to redefine them at the top level of your project, inside index.css perhaps:

// index.css
@font-face {
  font-family: "Icons";
  src: url("~semantic-ui-css/themes/default/assets/fonts/icons.woff")
    format("woff");
}

---

Related Topics