Правилно използване на „Mixins“ в LESS

Опитвам се да създам прости „шаблони“, използвайки по-малко, но си представям, че може да го правя неправилно..

ето за какво отивам:

<div class='box'>content</div>

и файла .less:

//this is the mixin

.blueBoxNotificationDiv {
    text-decoration: none !important;
    position: absolute;
    background: #EBEBEB;
    width: 100%;
    border-top: 1px solid #999;
    bottom: 0;
    height: 21px;
}

сега да кажем, че искам да приложа този „mixin“ към div „.box“. ето как бих го написал в .less:

.box {
    .blueBoxNotificationDiv;
}

Какъв е правилният начин за това?


css less mixins
person captainrad    schedule 29.05.2012    source източник
comment
Това ми изглежда правилно. Това, което имате досега, не работи или нещо подобно? Опитахте ли да използвате mixin със синтаксиса, който публикувахте?   -  person Bojangles    schedule 30.05.2012
comment
Правилно.. mixin не прилага нищо към div.   -  person captainrad    schedule 30.05.2012
comment
Уверете се, че класът mixin е над декларацията .box във вашия LESS. Освен това погледнете в инспектора/Firebug на Chrome и вижте дали някои стилове се отменят.   -  person Bojangles    schedule 30.05.2012
comment
Инспекторът изобщо не показва, че се прилагат стилове :/   -  person captainrad    schedule 30.05.2012
comment
В такъв случай опитайте да поставите правилата вътре в .box (т.е. не използвайте миксин), за да сте сигурни, че можете да прилагате стилове в някакъв капацитет. Използвате ли LESS.js или PHP порта на LESS?   -  person Bojangles    schedule 30.05.2012
comment
Хм, спрях да използвам mixin и добавих стила направо към .box, но дори те не се прилагат.   -  person captainrad    schedule 30.05.2012
comment
Ако има начин да го направите, проверете дали вашият LESS файл първо е зареден и след това проверете дали всъщност е компилиран от LESS.js (приемайки, че е клиент). Можете също така да опитате да презаредите кеша с Ctrl+F5.   -  person Bojangles    schedule 30.05.2012
comment
Проверете отново правописа и главните букви във вашия html файл. Има голяма вероятност просто да сте пропуснали главна буква.   -  person Gregg B    schedule 30.05.2012

Отговори (1)


arrow_upward
1
arrow_downward

Променливите LESS, ако не са написани правилно (включително правилото), ще попречат на всичко друго да бъде прочетено във вашия файл less.

Пример за проблема:

@color1: #000000;
@color2: #ffffff;
@color3: ##e6e6e6;

.container {
    color:@color1;
}

.....etc

Това трябва да е доста очевидно, но малките грешки могат лесно да бъдат пропуснати.. променливата '@color3' има два хеша '##'. Това ще прекъсне по-малко EVEN, ако не извикате променливата и никой от следния код няма да бъде прочетен (доколкото мога да кажа). Проблема решен!

person captainrad    schedule 29.05.2012
comment
Можете ли да дадете пример за това от кода във вашата OP? Интересно ми е какво точно е причинило проблема. - person Bojangles; 30.05.2012
comment
Не включих целия си код в моята OP, погледнете моя редактиран отговор по-горе. Беше малка грешка, но ясно, че създава проблем! Благодаря за помощта между другото! - person captainrad; 30.05.2012
comment
Често съм се чудил защо половината стилове на страницата ми се развалят, след това намирам липсваща точка и запетая и всичко работи отново! Трябва да има по-лесен начин за валидиране на CSS (W3C валидаторът е малко труден за бързо изпълнение) или дори LESS валидатор. - person Bojangles; 30.05.2012
comment
@Bojangles Знам, че това е ваш стар коментар, но Codekit ще ви уведоми за грешки и на кои редове са всеки път, когато запазите файла. incident57.com/codekit/?codekitCB=402602985.241876 - person Jacques ジャック; 23.11.2013
comment
Благодаря за коментара, Codekit изглежда доста полезен. Ако някога го пуснат за Windows, ще го пробвам. Сега използвам Grunt с LESS и това дава добри съобщения за грешка, така че намерих решение - person Bojangles; 23.11.2013