Как организовать импорт в Compass / Blueprint? - PullRequest
Новая
       37

Как организовать импорт в Compass / Blueprint?

3 голосов
/ 08 февраля 2011

Я исследовал SASS и Blueprint отдельно, и мне кажется, что я понимаю, как они работают, и я настроил свой каталог проектов с помощью инструмента CLI компаса, но я не знаю, как правильно организовать свой проект.

После инициализации моего проекта с 

$ compass create my_project --using blueprint/semantic

... Мне сказали связать созданные файлы CSS в моем HTML с этими строками 

<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />

... но куда мне поместить собственные файлы .scss для конкретного приложения и как мне включить соответствующие файлы чертежей?

Мне кажется, что я не должен включать сгенерированные print.css и screen.css непосредственно в мой HTML, а делать что-то вроде: 

@import "screen";

body {
    @include container;
}

... и затем используя только файл, сгенерированный из вышеупомянутого в моем HTML. Иначе зачем нам такая строка в screen.scss?: 

// Import all the default blueprint modules so that we can access their mixins.
@import "blueprint";

Я не могу использовать миксины в своем HTML.

Я считаю, что документы очень расплывчаты и противоречивы, и любой короткий пример, иллюстрирующий комбинацию:

  1. HTML
  2. SCSS-файлы, сгенерированные из приведенной выше команды компаса
  3. SCSS-файлы, содержащие стили для сайта

было бы очень полезно для меня и, вероятно, для других.

1 Ответ

17 голосов
/ 10 февраля 2011

В файлах "screen.scss" и "print.scss" нет ничего волшебного. Это всего лишь примеры имен файлов, которые выдаются для вывода, который вы можете связать с вашим HTML, но вам не нужно: просто удалите их и создайте свои собственные файлы, если хотите, или добавьте свои собственные стили к ним , Цель этих двух файлов состоит в том, чтобы объединить вопросы стиля отдельно: вы можете добавить «mobile.scss» и затем связать все это в своем HTML-коде или импортировать их вместе в один мастер-файл под @media блоками.

Я не могу использовать миксины в своем HTML.

Миксины не применяются к вашему HTML. Они полезны для написания исходного кода SCSS: скомпилированный вывод CSS или HTML ничего о них не знают. Вы должны использовать mixins, чтобы воспользоваться Sass.

Я исследовал SASS и Blueprint отдельно

Важно понимать, что сначала делают классы Blueprint, но когда вы используете Compass, существуют разные подходы к применению сред, таких как Blueprint:

1. Используйте оригинальные несемантические имена классов Blueprint в своем HTML

Это не считается наилучшей практикой, но это способ начать, особенно когда используются каркасы / строительные леса:

screen.scss 
    @import "blueprint";

    // This outputs Blueprint's classes into your stylesheet:
    @include blueprint;

    #sidebar { background: $blue; }
    #main { background: $yellow; }
screen.css (скомпилировано) 
    .column { float: ... }
    .span-6 { width: ... }
    .span-12 {width: ... }
    /* ...etc., all of Blueprint's classes ... */
    #sidebar { background: #ccf; }
    #main { background: #ffc; }
index.html 
    <div id="sidebar" class="column span-6">sidebar content</div>
    <div id="main" class="column span-12">main content</div>

Результат такой же, как при использовании Blueprint без Sass / Compass. Ваш HTML будет содержать презентационные классы, которые на самом деле не слишком отличаются от использования style="width:120px" в ваших элементах: вместо этого просто используются классы.

2. Используйте Blueprint в качестве смеси для имен ваших семантических классов:

screen.scss 
    @import "blueprint";
    // Do not output Blueprint's classes into your stylesheet.
    // Instead, write your own classes and mixin the functionality:
    #sidebar {
      @extend .column;
      @include span(6);
      background: $blue; }
    #main {
      @extend .column;
      @include span(12);
      background: $yellow; }
screen.css (скомпилировано) 
    .column, #sidebar, #main { float: left; ... }
    #sidebar { width: 240px; background: #ccf; }
    #main { width: 480px; background: #ffc; }
index.html 
    <div id="sidebar">sidebar content</div>
    <div id="main">main content</div>

Как видите, второй метод перемещает логику представления Blueprint из HTML в таблицу стилей.

Разумное использование @extend (вместо @include) - это оптимизация, которая позволяет объединять общие стили, например, все элементы, которые являются «столбцами», определяются один раз как список селекторов; только их различные ширины включены непосредственно в каждый элемент.

...