К содержанию

Иттиҳоди селекторҳо дар SASS

Гаҳе ба мо лозим аст, ки дар вақти компилят кардани сохторҳои фаромида, онҳо ба воситаи фосила набошанд, балки ба таври пайваст ҳамроҳ шаванд. Барои ин, пеш аз номи селектори фаромида, амперсанд гузоштан лозим аст:

styles.scssdiv {
  &.block {
    width: 300px;
  }
}

Дар натиҷа, пас аз компилят, мо ин рамзро ба даст меорем:

styles.cssdiv.block {
  width: 300px;
}

Задание 1

Ба мо натиҷаи компилят кардани рамзи зеринро гӯед:

styles.scss#block {
  &.xxx {
    width: 300px;
  }
}

Задание 2

Ба мо натиҷаи компилят кардани рамзи зеринро гӯед:

styles.scss#block {
  .xxx {
    width: 300px;
  }
}

Задание 3

Ба мо натиҷаи компилят кардани рамзи зеринро гӯед:

styles.scss#block {
  &.xxx {
    &.zzz {
      width: 300px;
    }
  }
}

Задание 4

Ба мо натиҷаи компилят кардани рамзи зеринро гӯед:

styles.scss#block {
  &.xxx {
    .zzz {
      width: 300px;
    }
  }
}

Задание 5

Ба мо натиҷаи компилят кардани рамзи зеринро гӯед:

styles.scss#block {
  .xxx {
    &.zzz {
      width: 300px;
    }
  }
}