A
A
Alexey2019-04-12 14:44:27
Sass
Alexey, 2019-04-12 14:44:27

SASS. Compilation. What does the result depend on?

Code example:

.gallery {
  @include flex (space-between, center, null, row);
  position: relative;

  %gallery__man-flex {
    @include flex (center, center, wrap);
  }

  &__man {
    @extend %gallery__man-flex;
    width: 60vw;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  &__man-wrapper {
    @extend %gallery__man-flex;
    margin: 0;
  }
}

The compilation result contains the parent class (.gallery .gallery__man, .gallery .gallery__man-wrapper) in the general properties, but no parent class (.gallery) personal properties
.gallery {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative; }
  .gallery .gallery__man, .gallery .gallery__man-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; }
  .gallery__man {
    width: 60vw;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px; }
  .gallery__man-wrapper {
    margin: 0; }

Why is this and what does it depend on?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
F
Flying, 2019-04-12
@AleksRap

You have placeholder %gallery__man-flexdefined inside .gallery, so all places where this placeholder will be used will inherit the context of its definition.
In other cases, the view notation &__manmeans "expanding the current selector", so apparently no contextual selector is added. If you need it, then you should use it.& &__man

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question