Arhn - архитектура программирования

Дочерний класс SCSS вместо родительского класса

У меня есть это:

tr {
          &.selected {
            background-color: #424253;
          }
          td {
            &.current-month {
              background-color: #2c3645;
            }
            &.last {
              background-color: #1e252f;
              font-weight: bold;
            }
          }
        }

Правило в тр:

&.selected {
        background-color: #424253;
      }

Как и ожидалось, переопределяется правилами td:

&.current-month {
          background-color: #2c3645;
        }
&.last {
          background-color: #1e252f;
          font-weight: bold;
        }

Как мне сделать так, чтобы класс tr selected всегда отменял любой класс td, влияющий на background-color (без использования !important)?

css sass
02.02.2017

Ответы:


1

Вы можете указать ту же специфичность, что и для классов current-month и last, а запись selected в конце потребует большей точности и переопределит другие.

tr {              
          td {
            &.current-month {
              background-color: #2c3645;
            }
            &.last {
              background-color: #1e252f;
              font-weight: bold;
            }
            &.selected {
            background-color: #424253;
          }
          }
        }
02.02.2017

2

Вы можете переопределить фон для всех элементов td, которым назначен класс:

tr {
  &.selected {
    background-color: #424253;
    &[class] {
      background-color: #424253;
    }
  }
  td {
    &.current-month {
      background-color: #2c3645;
    }
    &.last {
      background-color: #1e252f;
      font-weight: bold;
    }
  }
}

но я также думаю, что в этом случае было бы совершенно нормально использовать !important. Другое решение, если бы вы использовали классы для элементов tr и td, было бы таким:

.table-row {
  .table-cell {
    &.current-month {
      background-color: #2c3645;
    }
    &.last {
      background-color: #1e252f;
      font-weight: bold;
    }
    @at-root .selected#{&} {
      background-color: #424253;
    }
  }
}
12.02.2017
Новые материалы
Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..