Перезаписывать меньше примесей

Я хочу удалить border radius из всех элементов в Bootstrap. Итак, я создал custom-mixins.less и поместил в него следующие строки, надеясь, что он перезапишет исходный миксин .border-radius, но не сделал этого.

// Border Radius
.border-radius(@radius) {      
}

Поэтому я попробовал следующие строки в качестве альтернативы, которая действительно сработала.

// Border Radius
.border-radius(@radius) {
  @radius : 0px;
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

Я пробовал несколько миксинов на http://less2css.org. Кажется, что less вместо того, чтобы перезаписывать миксины, добавляет все свойства из более позднего миксина к исходному. Есть ли более чистое и простое решение этой проблемы ????


css less mixins
person Asur    schedule 14.06.2013    source источник

Ответы (3)


arrow_upward
9
arrow_downward

В этом отношении Less работает точно так же, как CSS. Например, если вы написали этот CSS:

p { border: 1px solid black; }

Это сделает все абзацы черной рамкой. Если позже в документе вы добавили:

p { }

Вы же не ожидаете, что это перезапишет ваше предыдущее определение, верно?

Итак, в этом случае это ожидаемое поведение, вам нужно специально перезаписать значения CSS, которые вы хотите перезаписать.

person nerdburn    schedule 14.06.2013
comment
+1 - Совершенно верно. Как указано на сайте, определение нескольких миксинов с одинаковым именем и количеством параметров является законным. . Less будет использовать свойства всего, что можно применить, что в основном то, что вы указали в своем ответе. - person ScottS; 14.06.2013
comment
Было бы здорово, если бы мы могли перезаписывать миксины так же, как и с меньшим количеством переменных. И спасибо за помощь @nerdburn - person Asur; 15.06.2013
comment
Просто на заметку. Ссылка на добавление @ScottS была изменена. Текущая ссылка: lesscss.org/features/#mixins-feature - person Lashae; 21.02.2014

arrow_upward
1
arrow_downward

Начиная с lesscss 1.7.0, это должно быть возможно с помощью "отдельных наборов правил", но, к сожалению, даже с 1.7.5 я получаю "ParseError: Unrecognized input", когда пытаюсь использовать синтаксис отдельного набора правил.

http://lesscss.org/features/#detached-rulesets-feature

[РЕДАКТИРОВАТЬ]: я получил ошибку синтаксического анализа, потому что я отбросил точку с запятой после определения набора правил, но он работает нормально - набор правил не имеет параметров, это на самом деле переменная, поэтому ее определение можно переопределить

person xorcus    schedule 18.09.2014
comment
Что ж, вопрос предполагает, что вы не можете или не хотите изменять исходное определение миксина. В противном случае вместо переопределения вы можете просто отредактировать его или использовать default Guard (который является немного более полезный способ разрешить переопределение миксина по сравнению с набором правил в переменной, особенно если миксин является параметрическим). - person seven-phases-max; 18.09.2014

arrow_upward
0
arrow_downward

Если вы импортируете файлы Bootstrap less в свой проект, вы можете попробовать отредактировать / перезаписать переменные радиуса компонента Bootstrap:

@border-radius-base: 0px;
@border-radius-small: 0px;
@border-radius-large: 0px;

в противном случае вы можете перекомпилировать и загрузить код CSS Bootstrap, установив значения 0px для этих переменных в http://getbootstrap.com/customize/

person kurroman    schedule 29.09.2014