S css изменить правила на основе самого верхнего родителя - PullRequest
Новая
       22

S css изменить правила на основе самого верхнего родителя

1 голос
/ 20 июня 2020

Давайте предположим, что у нас есть следующий код s css: 

.a {
    .b {
        .c {
            // rules here
        }
     }
}

Это приведет к следующему css: .a .b .c

Теперь, если я хочу изменить набор правил .c, если .a получит другой класс, мне придется изменить мой s css следующим образом: 

.a {
    .b {
        .c {
            // rules here
        }
     }

     &.d {
        .b {
            .c {
              // rules here
            }
        }
     }
}

Если есть несколько модификаций, мой s css станет очень долго, и правила, относящиеся к .c, будут исключены. Разве нет более простого синтаксиса, чтобы сохранить в коде все правила .c, чтобы, когда мне нужно что-то изменить, было легче? Я думаю о чем-то в этом роде: 

.a {
    .b {
        .c {
            // rules here

            ^^&.d {
               // go up 2 selectors (hence twicte the ^), and add to the selector the `.d` class, then keep on modifying the current selector `.c` here
            }
        }
     }
}

EDIT: Я использую для указания каждого элемента (или большинства, в любом случае) в пути к селектору, поэтому мои селекторы как можно более явным. Приведенный выше пример может быть отражен для кнопки панели инструментов, которая находится глубоко внутри панели, и с подходом basi c мне придется воспроизвести 5 уровней вложенности, чтобы указать некоторый стиль для кнопки, основанный на состоянии панель приборов (ie. боковая панель-открытая). Я мог бы, конечно, добавить класс прямо к кнопке и оформить его таким образом, но я думаю, это излишество, так как в таблице стилей для этого c статуса меняется много разных вещей.

В качестве полного примера, когда я нажимаю эту кнопку c, боковая панель должна выскочить, некоторые другие элементы, которые перекрываются, должны быть сдвинуты вправо и т. Д. c. Мой javascript просто добавляет класс, представляющий статус, на всю панель управления, и я хотел бы оформить все соответствующим образом. Но в этом случае стили для разных элементов, к сожалению, сильно различаются.

1 Ответ

0 голосов
/ 20 июня 2020

Вы можете использовать

Предположим, у вас может быть 3 класса на первом уровне, т.е. x, y, z, с их дочерними классами a, b.

Тогда ваш код s css variable будет выглядеть, как показано ниже: 

$classes: (
 x: (
   a: (
      color: blue,
      font-size: 15px
     ),
   b: (
      color: blue,
      font-weight: 600
   )
 ),
 y: (
   a: (
      color: red,
     ),
   b: (
      color: blue,
      font-size:20px
   )
 ),
z: (
  a: (
      color: black,
      overflow: scroll
     ),
   b: (
      color: black,
      font-size: 20px,
      background-color: white
   )
 )
);

Теперь мы можем перебирать указанную выше переменную, как показано ниже: 

@each $key, $value in $classes {
 .#{$key} {
   @each $key1, $value1 in $value {
     .#{$key1} {
       @each $key2, $value2 in $value1 {
          #{$key2}: $value2
       }
      }
   }
 }
}

Если вы хотите добавить больше классов в будущем, вам нужно следовать той же структуре и соответственно добавлять имена классов и стили.

Результат (CSS) 

.x .a {
  color: blue;
  font-size: 15px;
}
.x .b {
  color: blue;
  font-weight: 600;
}

.y .a {
  color: red;
}
.y .b {
  color: blue;
  font-size: 20px;
}

.z .a {
  color: black;
  overflow: scroll;
}
.z .b {
  color: black;
  font-size: 20px;
  background-color: white;
}

Надеюсь, это решит вашу проблему, а также украсит ваш код.

...