Каким образом должна быть настроена структура шаблона LESS?

Question

Я строю сайт с использованием рамки skeleton, используя a fork that compiles from LESS.

Каков правильный подход к настройке стилей без потери базовых строительных лесов, предоставляемых скелетом? Я понимаю, что я могу изменить переменные, такие как @font-color, но нет никаких переменных для размера шрифта, и для некоторых элементов нужны настраиваемые поля и отступы.

Должен ли я редактировать файл LESS или создавать отдельный файл css?

Answer 1

Вилка вы упомянули суда с одним файлом (less/skeleton.less), который содержит все необходимые Меньше кода.

Вы можете создать новый файл (например, project.less), который импортирует less/skeleton.less.

project.less:

@import "less/skeleton"; 

Теперь вы можете переопределить все переменную, объявленную в less/skeleton.less после директивы импорта.

@import "less/skeleton"; 
@font-color: blue; 

Из-за Less использует отложенную загрузку и последнее заявление выигрывает правило для переменных, которые вы можете переопределить переменную, поставив определение впоследствии, смотрите также: http://lesscss.org/features/#variables-feature-lazy-loading.

но нет переменных для размера шрифта, и для некоторых элементов необходимы специальные поля и поля.

Вы должны изменить эти свойства на селектор, для позиции:

button, .button { 
height: 48px; //overide button's height 
} 

или создать новый класс с extend feature

.smallbutton { 
&:extend(.button all); 
height: 16px; 
} 

Чем меньше кода также содержит некоторые медиа-запросы. Вы должны использовать этот медиа-запросы в коде:

@media (min-width: @bp-larger-than-mobile) { 
.smallbutton { 
&:extend(.button all); 
height: 16px; 
} 
} 

В вместо импорта меньше коды вы можете также использовать Less Skeleton plugin. После установки этого плагина (npm install less-plugin-skeleton) вы можете скомпилировать свой код, как указано выше, без директивы @import.

lessc project.less --skeleton