Обращайтесь к одной и той же группе селекторов CSS в каждой точке останова. Как сохранить CSS DRY? - PullRequest
Новая
       5

Обращайтесь к одной и той же группе селекторов CSS в каждой точке останова. Как сохранить CSS DRY?

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

Я пишу CSS (SASS) уже несколько лет и скажу, что я достаточно опытен в этом. Однако я не могу придумать хорошую альтернативу для следующего кода.

Мой SASS сейчас несколько упрощен для Stackoverflow: 

.container {
  &.-left {
    h1, 
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol {
      left: 0;
    }
  }

  &.-right {
    h1, 
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol {
      right: 0;
    }
  }
}



@include breakpoint(small) {
  .container {
    &.-left {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        left: 10px;
      }
    }

    &.-right {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        right: 10px;
      }
    }
  }
}



@include breakpoint(medium) {
  .container {
    &.-left {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        left: 20px;
      }
    }

    &.-right {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        right: 20px;
      }
    }
  }
}



@include breakpoint(large) {
  .container {
    &.-left {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        left: 30px;
      }
    }

    &.-right {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        right: 30px;
      }
    }
  }
}

Я не уверен, как, но я думаю, что код может быть написан более элегантным способом. Очень неудобно перечислять и обращаться к одной и той же группе селекторов несколько раз для каждой точки останова. У вас есть идея, как я мог бы сократить этот код и сделать его более читабельным? Я полагаю, с CSS переменными или функциями SASS?

Ответы [ 2 ]

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

Вы можете добавить include внутри другого селектора следующим образом: 

.container {
  &.-left {
    h1, 
    h2 {
      left: 0;

      @include breakpoint(small) {
        left: 10px;
      }
      @include breakpoint(medium) {
        left: 20px;
      }
    }
  }

  &.-right {
    h1, 
    h2 {
      right: 0;

      @include breakpoint(small) {
        right: 10px;
      }
      @include breakpoint(medium) {
        right: 20px;
      }
    }
  }
}
1 голос
/ 13 февраля 2020

1. С миксином

Вы можете использовать @mixin для хранения селекторов и затем @include там, где вам нужно: 

@mixin defaultSelectors() {
  & {
    h1, 
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol {
      @content;
    }
  }
}

.container {
  &.-left {
    @include defaultSelectors {
      left: 0;
    }
  }

  &.-right {
    @include defaultSelectors {
      right: 0;
    }
  }
}

[...]

2. С переменной

Вы также можете сохранить селекторы в переменной в виде списка, а затем использовать интерполяция : 

$defaultSelectors: h1, h2, h3, h4, h5, h6, p, ul, ol;

.container {
  &.-left {
    #{$defaultSelectors} {
      left: 0;
    }
  }

  &.-right {
    #{$defaultSelectors} {
      right: 0;
    }
  }
}

[...]
...