Пишите определения классов стилусом

Я хочу вывести что-то вроде этого:

.margin-right-small {
  margin-right: 10px;
}

.margin-right-medium {
  margin-right: 15px;
}

.margin-right-large {
  margin-right: 20px;
}
/* same for top, bottom, and left */

Могу ли я сделать что-то, чтобы сделать это проще, чем это:

small = 10px
medium = 15px
large = 20px

.margin-right-small {
  margin-right: small;
}

.margin-right-medium {
  margin-right: medium;
}

.margin-right-large {
  margin-right: large;
}
/* same for top, bottom, and left */

Что-то вроде этого псевдокода:

small = 10px
medium = 15px
large = 20px
sides = ['top', 'right', 'bottom', 'left']
sides.each(function(side) {
  .margin-[side]-small {
    margin-[side]: small;
  }

  .margin-[side]-medium {
    margin-[side]: medium;
  }

  .margin-[side]-large {
    margin-[side]: large;
  }
}
/* that would take care of all sides */

Я новичок со стилусом. Возможно ли это упростить? Если нет, то мне трудно понять, чем стилус лучше обычного css в этом конкретном примере...


css stylus
person kentcdodds    schedule 11.01.2014    source источник
comment
возможно kizu.ru/en/issues/new-stylus-features/ #block-mixins поможет   -  person floww    schedule 18.01.2014

Ответы (2)


arrow_upward
3
arrow_downward

В Stylus у вас есть интерполяция и итерация. Итак, после их объединения все должно работать (я не знаю Stylus, поэтому, возможно, вам нужно внести небольшие исправления):

for side in sides
  .margin-{side}-small
    margin-{side} small
person Hauleth    schedule 11.01.2014

arrow_upward
-1
arrow_downward

Создать что-то подобное в CSS невозможно, но можно использовать PHP, и создать php-файл с html-кодами можно. как в примере:

<?php $small = '15px'; ?>
<style>
.class {
   margin-right: <?php echo $small; ?>;
}
</style>

Помните, что вам нужно создать это в файле php и include в вашем <head> следующим образом:

<?php include '\style.php'; // you are including the file style.php ?>
person Deharlan    schedule 11.01.2014
comment
Он спрашивает о Стилусе, а не о CSS. И в Stylus это выполнимо. - person Hauleth; 12.01.2014
comment
о, я не знал об этом. - person Deharlan; 12.01.2014