2015-09-24 4 views
2

Я ищу для создания интернационализированного приложения, которое будет поддерживать контент Right To Left.Создание нескольких файлов CSS из менее основанных на статических переменных

Поэтому стандарт (LTR) будет:

div{ 
    padding-left:10px; 
} 

В то время как RTL будет:

div{ 
    padding-right:10px; 
} 

Использование меньше я мог сделать:

@left:right; 

.div{ 
    [email protected]{left}:10px; 
} 

Что бы произвести:

.div { 
    padding-right: 10px; 
} 

Есть ли способ создать два файла CSS, если @left = right и @left = left?

Например, я мог бы:

Styles.less

Который производит:

styles.css

Styles.rtl.css

ответ

3

это имя файла будет стили-rtl.less

@import "styles.less"; 

/*override variables */ 

@direction   :ltr; 
@oposite-direction :rtl; 

@start-direction :left; 
@end-direction  :right; 

@tr-direction  :-1;/*for manipulation transform*/ 

Пример использования:

/*positions*/ 
position:absolute; 

right:0;  
/*will be*/  
@{start-direction}:0; 

/**************/ 

float:right;  
/*will be*/  
float:@start-direction; 


/**************/ 
direction:rtl;  
/*will be*/ 
direction:@direction; 

/*************/ 
transform:translateX(180px); 
/*will be*/ 
transform:translateX(180px*@tr-direction);/*multiple by minus*/ 
+0

Спасибо, как это произвести несколько файлов CSS? Вы предлагаете мне иметь дубликаты файлов LESS, импортирующих 'styles.less' в один и' styles-rtl.less' с другой? – Curt

+0

На самом деле я понимаю сейчас - у нас будет меньше файлов, которые импортируют оригинальные файлы, совершенные, ура! – Curt