Sass и добавление родительского класса

Question

Есть ли способ сделать что-то в SASS ниже, где -центр добавляется к детали, чтобы добавить центр? Я бы хотел, чтобы у обоих было 110px, а у -центра - выравнивание по центру.

 .table-col-sm {
        width: 110px;
    }

    .table-col-sm-center {
        width: 110px;
        text-align: center;
    }

Я пошел дальше и сделал это.

$column-widths: ( "sm" : ("width": 110px), "md": ( "width": 160px));

 @each $col, $values in $column-widths {
        .table-col-#{$col} {
             width: map-get($values, "width");
        }
        .table-col-#{$col}-center {
             width: map-get($values, "width");
             text-align: center;
        }
    }

Answer 1

К сожалению, вы должны написать атрибут width дважды, но да, есть способ. Кстати, если вы хотите увидеть больше, что вы можете сделать с родительским селектором в SASS, посмотрите его здесь

.table-col-sm
  width: 110px

  &-center
    width: 110px
    text-align: center

Answer 2

Не уверен, что вы подразумеваете под добавлением, но вот несколько вариантов:

   <div>
       <p class="table-col-sm text-center w--110"></p>
   </div>

  <style>
    .table-col-sm {
    &.center {
         text-align: center;
     }
    &.w--110 {
         width: 110px;
     }
    }
  </style>

опция 2

    <div class="table-col-sm">
        <p class="text-center w--110"></p>
    </div>

    <style>
        .table-col-sm {
        & p  {
              text-align: center;
          }
        & .w-110 {
             width: 110px;
         }
        }
    </style>