Компас + Blueprint CSS = ширина входных тегов всегда 300px? - PullRequest
Новая
       29

Компас + Blueprint CSS = ширина входных тегов всегда 300px?

1 голос
/ 21 июня 2011

Пытаясь найти причину проблемы, я отключил все свои пользовательские таблицы стилей. Сейчас я использую только одну таблицу стилей SCSS: 

@import "blueprint/reset";
@import "partials/base";
@import "blueprint";
@include blueprint;

Однако эта таблица стилей приводит к проблемам. Во всем приложении я использую <input> теги, подобные следующим: 

<input class="span-17 title" type="text" size="30" name="customer[name]">

Как видите, я использую классы span- Blueprint для элементов формы. Это без проблем работает без компаса.

Однако Compass генерирует дополнительные правила стиля для элементов формы: 

input.span-17, textarea.span-17, select.span-17 {
    width: 840px;
}
/* followed by: */
input.text, input.title, input[type="email"],
input[type="text"], input[type="password"] {
    width: 300px;
}

С этими двумя правилами все мои поля ввода получают ширину 300 пикселей (полностью разрушая макет моего приложения). Почему Compass генерирует второе правило, упомянутое выше (для меня это абсолютно бессмысленно)? И как мне предотвратить такое поведение?

Обновление: Похоже, я не достаточно ясно. Я хочу использовать классы Blueprint span- в полях ввода моей формы. Установка постоянной ширины <input> на постоянное значение - это не то решение, на которое я надеялся. Вместо этого я ищу способ заставить классы span- работать с Compass. Желаемое поведение похоже на Blueprint CSS без Compass - в любом случае мне пришлось бы изменить множество HTML-шаблонов - именно этого я и пытаюсь избежать.

Ответы [ 3 ]

2 голосов
/ 21 июня 2011

Вам нужно определить свои правила CSS с более высокой специфичностью.

Попробуйте что-то вроде этого: 

@import "blueprint/reset";
@import "partials/base";
@import "blueprint";
@include blueprint;

body input.text, body input.title, body input[type="email"],
body input[type="text"], body input[type="password"] {
    width: inherit;
}

или, если приведенная ниже часть написана в вашем собственном коде: 

input.span-17, textarea.span-17, select.span-17 {
    width: 840px;
}

вы могли бы повысить специфичность своих правил аналогичным образом: 

body input.span-17, body textarea.span-17, body select.span-17 {
    width: 840px;
}

Подробнее о специфике CSS (и ее отношении к «Звездным войнам») вы можете узнать в статье Малари .

Malarkey's Specificity Wars

0 голосов
/ 04 мая 2012

Полагаю, @include blueprint; включает все шоу, включая сетку, формы, типографику и т. Д.

Если вы не хотите, чтобы автоматически создавались классы input.span, не используйте их.Делай просто: 

@include blueprint-grid;
0 голосов
/ 21 июня 2011

если возможно, вы можете переопределить ширину элемента с помощью jquery. 

$(document).ready(function(){
    $("input[type='text']", "input[type='password']").css("width","100px");
});

надеюсь, это поможет.

...