Sass i dołączająca klasa nadrzędna

Question

Czy jest sposób na zrobienie czegoś w SASS poniżej, gdzie -center zostanie dołączony do części, aby dodać środek? Chciałbym, aby oba miały 110 pikseli, ale -środek ma wyrównanie do środka.

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

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

Poszedłem do przodu i zrobiłem to.

$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;
        }
    }

css sass

0

Mike Flynn 20 marzec 2020, 00:31

Answer 1

Niestety musisz dwukrotnie wpisać atrybut width, ale tak, jest na to sposób. Przy okazji, jeśli chcesz zobaczyć więcej, co możesz zrobić z selektorem rodzica w SASS, poszukaj go tutaj

.table-col-sm
  width: 110px

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

0

Phy 19 marzec 2020, 22:29

Answer 2

Nie masz pewności, co masz na myśli, mówiąc o dołączaniu, ale oto kilka opcji:


   <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>

Opcja 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>

0

Nolan 19 marzec 2020, 22:21

Sass i dołączająca klasa nadrzędna

2 odpowiedzi

Podobne pytania

Nowe pytania

css