CODEWITHSUNDEEP
csssass
HendrikEng
HendrikEng

Reputation: 684

scss nesting , repeat necessary

one quick question :

why do i have to repeat the first aruments like position and top for every nested state ? i thought the point is not to repeat it? If i remove the states in the nested classes, it doesnt work.

I wanted to use them like:

logo has to go top left so i use top__left as a class , for a menu i.e. top__right etc ...

  .top {
  position: fixed;
  top: 2%;
  &__left {
    position: fixed;
    top: 2%;
    left: 1%;
  }
  &__right {
    position: fixed;
    top: 2%;
    right:1%;
  }
  &__centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

Upvotes: 1

Views: 570

Answers (2)

user4994625
user4994625

Reputation:

It makes no sense to inherit all properties of parents selectors, but for cases where it is desirable that we have the @extend directive:

SASS

.top {
  position: fixed;
  top: 2%;
  &__left {
    @extend .top ;
    left: 1%;
  }
  &__right {
    @extend .top;
    right:1%;
  }
  &__centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

OUTPUT

.top, .top__left, .top__right {
  position: fixed;
  top: 2%;
}
.top__left {
  left: 1%;
}
.top__right {
  right: 1%;
}
.top__centered {
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
}

Upvotes: 1

Marcos Pérez Gude
Marcos Pérez Gude

Reputation: 22158

I suggest to use multiple classes:

.top {
  position: fixed;
  top: 2%;
  &.left {
    left: 1%;
  }
  &.right {
    right:1%;
  }
  &.centered {
    top: initial;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

You can use it like this:

<div class="top left"></div>
<div class="top right"></div>
<div class="top centered"></div>

Upvotes: 1

Related Questions