Please help me understand the difference in these SCSS codes

HTML-CSS
1

Hey guys. Need some help here. What’s the difference in these:

Code A :

.simple-menu {
    min-width: $simple-menu-width;
    max-width: 320px;
    &.ie {
      max-width: none;
    }
  }

Code B :

.simple-menu {
    min-width: $simple-menu-width;
    max-width: 320px;
    .ie {
      max-width: none;
    }
  }

Essentially I’m trying to understand whether we need & here or not.
Do both of them not imply the same thing?

2

code A will apply the nested syntax to an element that has both classes
it’s the same as .simple-menu.ie {

code B will apply the css rules to an .ie element nested in a .simple-menu element, it’s the same as .simple-menu .ie {

1 Like
3

HI!
This article will help you.!

1 Like
4

what exactly changes when a space is introduced between classes?

Do you mean, the code B will be applied in this case:

<div class="simple-menu">
  <span> Span-1</span>
  <span class="ie"> Span-2 </span>
</div>

and code A be applied here:

<div class="simple-menu ie"></div>
5

yes, that’s correct

you can read about css selectors here:

2 Likes
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.