Как использовать sass для правильного исключения встраивания имен класса bootstrap twitter в HTML

Ответ 1

Когда вы переименовываете .btn в .button, вы также должны переименовать .form-search в .form-searchnew и т.д.? В этом случае ваш код sass в приведенном выше примере должен выглядеть примерно так:

.form-searchnew .input-appendnew .button {
  extend(.form-search .input-append .btn);
}

Что имеет смысл (я не знаю sass) и результаты в css вы ожидаете.

Я думаю, что bootstrap - это не только css. Bootstrap - это css, html (структура) и javascript. Даже если вы отделите css от html, я бы не стал легко мигрировать в другую структуру. Помимо css вам также придется изменить структуру html и javascript.

Пример перехода из Twitter Bootstrap с 2 по 3 (см. Обновление Bootstrap до версии 3 - что мне делать?). Я также задался вопросом, можно ли мигрировать, распространяя старые классы на новый css (см. http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/). Прочитав руководство по миграции, я думаю, что вы не смогли.

Другие решения. Angular JS отделяет Twitter Bootstrap от javascript. Также в этом случае миграции не кажутся безболезненными: Angular Диалоговые директивы с Bootstrap 3

Возможно, также прочитайте это сообщение: http://www.jasonwong.org/post/45849350459/migrating-from-zurb-foundation-twitter-bootstrap-to. Он ссылается на Bourdon и Neat.

Пример со своего веб-сайта:

<!-- HTML markup for the section right below this code block -->
<section>
  <aside>What is it about?</aside>
  <article>Neat is an open source semantic grid framework built on top of Sass and Bourbon…</article>
</section>

// Enter Neat
section {
  @include outer-container;
  aside { @include span-columns(3); }
  article { @include span-columns(9); }
}
// And the result is...

Как говорится: "он полностью полагается на Sass mixins и не загрязняет ваш HTML", который выглядит так, как вы ищите.

Ответ 2

Я рекомендую вам взглянуть на классы-заполнители sass http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholders, чтобы не раздувать ваш css. Скорее всего, вы не будете использовать каждый элемент, включенный в bootstrap, а заполнители только записываются в таблицу стилей, если они действительно расширены в вашем коде.

Кроме того, я думаю, что люди, как правило, путаются о том, как работают css-фреймворки и как развязаны css и html. Для очень больших веб-сайтов (или тех, которые вы ожидаете в конечном итоге расти очень большими), где производительность и размер файла css имеют решающее значение, ваш подход OOCSS - ваш лучший выбор. И это неизбежно означает, что у вас есть код форматирования непосредственно в вашем HTML.

Если вы можете позволить себе быть немного менее эффективным и хотите, чтобы ваш HTML был чистым, обязательно используйте семантические классы (примеры для кнопок: call-to-action, call-to-action-secondary, submit, btn-primary, btn-корпоративный цвет и т.д.)

Также помните, чтобы отделить JS от CSS! используйте специальные классы для привязки поведения (пример js-submit, js-call-to-action и т.д.)

И последнее, но не менее важное: не планируйте обновлять фреймворк css. Эти рамки предназначены для того, чтобы дать вам головной убор, а не быть вашим общим дизайнерским решением. Расширьте их, адаптируйте их, сделайте их собственными, инвестируйте в дизайн и создайте свой собственный взгляд, чтобы сделать ваше приложение уникальным. Если то, что заставляет вас думать об обновлении, - это беспокоиться, чтобы идти в ногу со стандартными изменениями, лучше использовать компасные микшины.

Ответ 3

Чтобы быть новым для большинства из этого, вы на правильном пути; ресурсы, которые вы читали, превосходны. Но, я думаю, что ваши проблемы могут быть неоправданными:

... кнопка не получит правильный стиль, потому что sass не будет применять это же правило к нашему имени пользовательского класса...

На самом деле, я думаю, вы ошибаетесь. Согласно документации Sass:

@extend работает, вставляя расширенный селектор (например,.seriousError) в любом месте таблицы стилей, который появляется расширенный селектор (.e.g.error).

Для полного примера кода см. http://sass-lang.com/documentation/file.SASS_REFERENCE.html#how_it_works.

Ваше оригинальное решение было действительно правильным. Используйте расширения, но без кавычек:

.button {
  @extend .btn; //no quotes
}

Я проверил это, используя ваш пример, и он работает правильно. Sass копирует все селектор с помощью ".btn" и на тех новых созданных селекторах, он заменяет ".btn" на ".button".

Кроме того, если Sass производит слишком много дублирования по своему усмотрению, не беспокойтесь об этом (пока вы следите за лучшими практиками, как указано в опубликованных вами ссылках). Дублированный код легко сжимается, если сервер использует gzip или эквивалент; клиент не должен замечать более медленные времена загрузки, хотя может потребоваться немного больше времени, чтобы "распаковать" CSS. Что касается скорости селектора CSS, не беспокойтесь об этом; единственный случай, когда скорость имеет значение для селекторов, со стороны JavaScript, особенно с jQuery. Для вашего кода Sass просто следуйте передовым методам поддержки (в частности, модуляции, как вы пытаетесь сделать, то есть SMACSS), и вам будет хорошо идти.

Ответ 4

Используйте @extend, но не цитируйте селекторов:

.button { @extend .btn; }

Затем вы увидите, что Sass также расширяет связанные селекторы, как вы хотите (.form-search .input-append .btn и т.д.).

... помимо множества дополнительных селекторов, которые будут добавляться каждый раз, когда мы расширяем класс начальной загрузки, просто используем другое имя...

@extend работает путем копирования селекторов. Если вы этого не хотите, вы можете "расширить" в HTML вместо этого - например, добавить имена классов Bootstrap.:)

Ответ 5

Ответы, предоставленные sam и tjklemz, помогут вам решить вашу непосредственную техническую проблему, но еще больше можно отделить ваши CSS и HTML. Я приведу пример ниже, но имейте в виду, что это просто быстрый пример, демонстрирующий мощь mixins/расширение классов CSS.

Я также настоятельно рекомендую проверить структуру ZURB Foundation, так как она изначально SASS и разработана с учетом этого стиля развития.

Например:

<body>
    <div id="my-header">
        <h1><a href="#">My Company</a></h1>
        <h2>My Tagline</h2>
    </div>
    <div id="my-main">
        <div class="my-widget">
            <h1>Widget Title</h1>
            <a>Widget Option 1</a>
            <a>Widget Option 2</a> 
        </div>    
    </div>
</body>

С сопровождающим SCSS:

//these examples wouldn't really work
//because bootstrap needs more markup
#my-header {
    @extend .navbar;
}
#my-header h1 {
    @extend .branding;
}
#my-main {
    @extend .container;
}

//good example
.my-widget {
    @extend .well;
    @extend .hero-unit;
}
.my-widget a {
    @extend .btn;
}