Проблема с переопределением селекторов точек останова CSS с помощью SASS - PullRequest
Новая
       4

Проблема с переопределением селекторов точек останова CSS с помощью SASS

0 голосов
/ 13 февраля 2020

У меня есть _display.scss частичное.

Содержит @mixin и классы , связанные с отображением CSS свойство.

_display.s css

@mixin d-block{
    display: block;
}

@mixin d-none{
    display: none;
}

.d-block{
    @include d-block();
}

.d-none{
    @include d-none();
}

Я разработчик @mixin generate-response-content , который принимает @content класса и генерирует разные @ медиа-запрос для каждой точки останова.

Таким образом: 

.d-block{
    @include generate-responsive-content() {
        @include d-block();
    }
}

.d-none{
    @include generate-responsive-content() {
        @include d-none();
     }
}

// Generate all breakpoints from content
@mixin generate-responsive-content() {

  // Responsive styles
  // Loop over each size
  @each $breakName, $width in $breakpoints {

    // Check breakpoint
    @if ($breakName != "") {
      $breakName: '-' + $breakName;

      @media (min-width: $width) {
        &#{$breakName} {
          @content
        }
      }

    } @else {
      @content;
    }

  }
}

например. сгенерированные классы: .d-block, .d-block-xs, .d-block-sm ...

Но таким образом я не могу переопределить классы .d-none классами .d-block для каждой точки останова, потому что они имеют были сгенерированы ранее и перезаписаны классами .d-none.

У меня также есть класс с тем же именем, но без варианта точки останова, например d-none-lg, d-block-lg, они перезаписывают все остальные.

Проверьте это CodePen . Здесь d-none варианты перезаписывают каждый класс d-block.

Как я могу это решить?

Ответы [ 2 ]

0 голосов
/ 13 февраля 2020

Я создал для вас быстрое демо - https://codepen.io/rhythm19/pen/OJVMyLa и работает как положено. Я думаю, что вам просто нужно обменять заказ. Сначала создайте d-none классов, а затем d-block классов. 

.d-none{
    @include generate-responsive-content() {
        @include d-none();
     }
}

.d-block{
    @include generate-responsive-content() {
        @include d-block();
    }
}
0 голосов
/ 13 февраля 2020

Обновленный ответ, включающий max-width точку останова. 

.see{outline:1px solid black;padding:1em;}
// BREAKPOINT
$breakpoints: (
  "xs": 575px,
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px
);

@mixin d-block() {
  display: block;
}

@mixin d-none() {
  display: none;
}

.d-block{
    @include d-block();
}

.d-none{
    @include d-none();
}

// Generate all breakpoints from content
@mixin generate-responsive-content() {

  // Responsive styles
  // Loop over each size
  @each $breakName, $width in $breakpoints {

    // Check breakpoint
    @if ($breakName == 'xs' ) {
      $breakName: '-' + $breakName;

      @media (max-width: $width) {
        &#{$breakName} {
          @content
        }
      }
    }
    @else if ($breakName != 'xs' ) {
      $breakName: '-' + $breakName;

      @media (min-width: $width) {
        &#{$breakName} {
          @content
        }
      }

    } @else {
      @content;
    }

  }
}

.d-block{
    @include generate-responsive-content() {
        @include d-block();
    }
}

.d-none{
    @include generate-responsive-content() {
        @include d-none();
     }
}

Вот что выводится: 

.see {
  outline: 1px solid black;
  padding: 1em;
}

.d-block {
   display: block;
}


.d-none {
   display: none;
 }

@media (max-width: 575px) {
  .d-block-xs {
    display: block;
  }
}
@media (min-width: 576px) {
  .d-block-sm {
    display: block;
  }
}
@media (min-width: 768px) {
  .d-block-md {
    display: block;
  }
}
@media (min-width: 992px) {
  .d-block-lg {
    display: block;
  }
}
@media (min-width: 1200px) {
  .d-block-xl {
    display: block;
  }
}

@media (max-width: 575px) {
  .d-none-xs {
    display: none;
  }
}
@media (min-width: 576px) {
  .d-none-sm {
    display: none;
  }
}
@media (min-width: 768px) {
  .d-none-md {
    display: none;
  }
}
@media (min-width: 992px) {
  .d-none-lg {
    display: none;
  }
}
@media (min-width: 1200px) {
  .d-none-xl {
    display: none;
  }
}

ОБНОВЛЕНО КОДЕПЕН: Вот кодовая строка OP с этим обновлением: https://codepen.io/chrislafrombois/pen/JjdGKGJ

Вот код с ручки: 

.see {
  outline: 1px solid black;
  padding: 1em;
}

.d-block {
  display: block;
}

.d-none {
  display: none;
}

@media (max-width: 575px) {
  .d-block-xs {
    display: block;
  }
}

@media (min-width: 576px) {
  .d-block-sm {
    display: block;
  }
}

@media (min-width: 768px) {
  .d-block-md {
    display: block;
  }
}

@media (min-width: 992px) {
  .d-block-lg {
    display: block;
  }
}

@media (min-width: 1200px) {
  .d-block-xl {
    display: block;
  }
}

@media (max-width: 575px) {
  .d-none-xs {
    display: none;
  }
}

@media (min-width: 576px) {
  .d-none-sm {
    display: none;
  }
}

@media (min-width: 768px) {
  .d-none-md {
    display: none;
  }
}

@media (min-width: 992px) {
  .d-none-lg {
    display: none;
  }
}

@media (min-width: 1200px) {
  .d-none-xl {
    display: none;
  }
}
<div class="see">
  <span>I CANNOT SEE ANYTHING BECAUSE d-none OVERWRITE EVERYTHING</span>
  <div class="d-none d-none-xs d-block-sm d-block-md d-block-lg">
    CHECK CSS STYLE D-BLOCK-LG OVERWRITE EVERITHING
  </div>
</div>

Согласно нашему обсуждению, вы не должны пытаться вставлять значения по умолчанию d-none и d-block в этот миксин. Из-за того, как код будет выводиться, вы должны просто отделить эту проблему и поместить значения по умолчанию перед блоками медиазапроса.

...