Блог

У меня есть таблица, где я обычно display: flex отображал таблицу. У меня также есть два типа строк, где один-заголовок, а другой-тело таблицы. Текст заголовка таблицы выровнен по центру. Но я хочу, чтобы один из столбцов тела был выровнен по правому краю.

Теперь вы заметили, что я определил заголовок и основную часть столбцов чистой цены одинаковой ширины, чтобы они могли соответствующим образом добавить одинаковую ширину. Теперь я хочу добавить стиль, в котором мне нужно задать только net price столбец тела, который должен быть выровнен по правому краю.

Как я могу добавить селектор в блок net-price SCSS, чтобы стиль применялся только к телу, а не к заголовку таблицы?

 <table>
        <thead class="service-grid__wrapper__header">
            <td>Header one</td><td class="net-price">Header two</td>
        </thead>
        <tbody class="service-grid__wrapper__body">
            <td>Column one</td><td class="net-price">Columntwo</td>
        </tbody>
    </table> 

     .service-grid {
          amp;__wrapper {
            margin: 0;
            background-color: $white;
            amp;__header {
              font-family: "Roboto-Medium";
              display: flex;
            }
            amp;__body {
              display: flex;
              font-family: "Roboto-Regular";
            }
            .net-price {
              width: 160px;
              .myaddtional-style { /* Style block where I need to apply only to the body cell and not the header cell */
                text-align: right;
              }
            }
          }
        } 

Вам нужно будет использовать service-grid__wrapper__body класс в своем селекторе. Самый простой способ выразить это в вашем текущем SCSS будет выглядеть так (все остальные свойства css опущены):

 .service-grid {
  amp;__wrapper {

    // order is important, regular styles before specialized styles
    .net-price {
      width: 160px; // the regular styles for net-price
    }

    amp;__header {
    }

    amp;__body {
      .net-price { text-align: right; } // the special handling inside the __body
    }

  }
}
 

альтернативно

 .service-grid {
  amp;__wrapper {

    amp;__header {
    }

    amp;__body {
    }

    .net-price {
      width: 160px;
    }

    amp;__body .net-price {
      text-align: right;
    }

  }
}
 

И вот еще одна альтернатива, чтобы запутать всех ваших коллег:

 .service-grid {
  amp;__wrapper {

    amp;__header {
    }

    amp;__body {
    }

    $wrapper-class: amp;;

    .net-price {
      width: 160px;
      @at-root #{$wrapper-class}__body .net-price { text-align: right; }
    }

  }
}