2014-01-11 1 views
0

Я хочу выводить что-то вроде этого:определения записи класса с пером

.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 в этом конкретном примере ...

+0

возможно http://kizu.ru/en/issues/new-stylus- features/# block-mixins поможет – floww

ответ

3

В Стилус у вас есть interpolation и iteration. Таким образом, после присоединения к ним вместе, он должен работать (я не знаю, стилус, так Propably вам нужно сделать несколько небольших исправлений):

for side in sides 
    .margin-{side}-small 
    margin-{side} small 
-1

Создание чего-то подобного в 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 ?> 
+1

Он спрашивает о Stylus, а не CSS. И в Стилу это выполнимо. – Hauleth

+0

О, я не знал об этом. – Deharlan

Смежные вопросы