Вопрос:

SCSS для циклов - для создания более короткого / комбинированного кода

css loops sass

32 просмотра

2 ответа

6 Репутация автора

Я хочу генерировать комбинированный / более короткий код CSS с использованием SCSS для цикла. Кстати, я использую Dreamweaver2019, но не думаю, что это проблема.

Я пробовал следующее:

1) Это приводит к ошибке:

@for $i from 1 to 6 {
  #slide#{$i}:checked ~ #slide-btn label:nth-of-type(#{$i}) a
    &: { 
      background: none;
      height: 5px;
      width: 5px;
      border: solid 2px;
      border-color: #fff;
}
@for $i from 1 to 6 {
  #slide#{$i}:checked ~ #slide-btn label:nth-of-type(#{$i}) a
    & { 
    background: none;
    height: 5px;
    width: 5px;
    border: solid 2px;
    border-color: #fff;
}

2) Это производит отдельный класс / блок:

@for $i from 1 to 6 {
  #slide#{$i}:checked ~ #slide-btn label:nth-of-type(#{$i}) a { 
    background: none;
    height: 5px;
    width: 5px;
    border: solid 2px;
    border-color: #fff;
}

3) Это сгенерирует наиболее близкий к желаемому результату, но мне не нужен дополнительный класс (.x) в моем коде.

@for $i from 1 to 6 {
  #slide#{$i}:checked ~ #slide-btn label:nth-of-type(#{$i}) a { 
       @extend .x
}
    .x {
    background: none;
    height: 5px;
    width: 5px;
    border: solid 2px;
    border-color: #fff;
}

Я ожидаю, что более короткий код SASS / SCSS будет выглядеть примерно так:

#slide1:checked ~ #slide-btn label:nth-of-type(1) a,
#slide2:checked ~ #slide-btn label:nth-of-type(2) a,
#slide3:checked ~ #slide-btn label:nth-of-type(3) a,
#slide4:checked ~ #slide-btn label:nth-of-type(4) a,
#slide5:checked ~ #slide-btn label:nth-of-type(5) a {
   background: none;
   height: 5px;
   width: 5px;
   border: solid 2px;
   border-color: #fff;
}

СПАСИБО ОГРОМНО тому, кто сможет мне помочь.

Автор: ArZ Источник Размещён: 11.08.2019 12:40

Ответы (2)


0 плюса

16688 Репутация автора

Добро пожаловать в ТАК;

%x{
  background: none;
  height: 5px;
  width: 5px;
  border: solid 2px;
  border-color: #fff;
}

@for $i from 1 to 6 {
  #slide#{$i}:checked ~ #slide-btn label:nth-of-type(#{$i}) a { @extend %x }}

вывод ;

#slide1:checked ~ #slide-btn label:nth-of-type(1) a,
#slide2:checked ~ #slide-btn label:nth-of-type(2) a, 
#slide3:checked ~ #slide-btn label:nth-of-type(3) a,
#slide4:checked ~ #slide-btn label:nth-of-type(4) a,
#slide5:checked ~ #slide-btn label:nth-of-type(5) a {
  background: none;
  height: 5px;
  width: 5px;
  border: solid 2px;
  border-color: #fff;
}
Автор: Chris W. Размещён: 11.08.2019 05:51

0 плюса

914 Репутация автора

Вы можете использовать синтаксис заполнителя %.

@for $i from 1 to 6 {
  #slide#{$i}:checked ~ #slide-btn label:nth-of-type(#{$i}) a {
    @extend %x;
  }
}

%x {
  background: none;
  height: 5px;
  width: 5px;
  border: solid 2px;
  border-color: #fff;
}

Автор: 10101010 Размещён: 11.08.2019 08:13
Вопросы из категории :
32x32