Компас: безболезненная прекомпиляция CSS

Если за последние 6 месяцев вы занимались веб-дизайном, вы наверняка слышали о  прекомпиляторах CSS . Короче говоря, они появились, чтобы дать css возможности, которых у него не было. Но не без затрат на введение промежуточного файла, который в конечном итоге будет преобразован в CSS. Итак, здесь я приступил к написанию руководства для начинающих, которое могло бы помочь  начать с SASS (синтаксически удивительные таблицы стилей) и компаса . Он охватывает важные концепции, установку и пример проекта, чтобы увидеть его в действии. 

I. Важные понятия

Как упомянуто выше, и SASS & less должны быть скомпилированы в css, но чтобы быть осторожнее с терминами, этот процесс более формально известен как  транспилирование . Поскольку компиляция часто включает в себя получение исходного кода и его преобразование во что-то, что может быть выполнено в формате, читаемом машиной (байтовый код). Однако с помощью Sass & Less все это немного отличается, поскольку включает только процесс, когда исходные файлы на этих языках берутся и преобразуются в другой язык. Здесь это  CSS,  который является языком стилей. Однако, делая вещи более запутанными, этот же процесс также широко называют  прекомпиляцией . Извините, если я уже сломал вашу голову здесь. 🙁 

II. Монтаж

Сосредоточив внимание на Compass, это просто еще одна реализация SASS, которая поставляется в качестве драгоценного камня Ruby. Если вы не rubyist, Ruby gem больше похож на библиотеку, когда вы думаете об этом с точки зрения C ++. Итак, давайте сначала установим Compass,

1. Компасу нужен рубиновый драгоценный камень. Если вы на Mac, вы, вероятно, должны иметь его. Если вы хотите подтвердить, есть ли уже ruby, вы можете сделать это, нажав «ruby -v» в вашем терминале / командной строке. Если у вас его нет, отправляйтесь в  Руби Лэнг .
2. Чтобы установить компас, нажмите следующие две команды в вашем терминале:

   $sudo gem update --system

Примечание : иногда вы можете столкнуться с проблемами, если вы не используете sudo. Следовательно, я решил сделать это в режиме sudo. Если вы используете Windows, вам просто нужно открыть cmd.exe как администратор. Выше $ — только заполнитель, который вам не нужно вводить. 

III. Пример проекта

Теперь, когда у нас все настроено. Мы можем перейти к нашему первому проекту, простой адаптивной странице с фоновым видео, воспроизводимым с YouTube. Таким образом, для создания нашего проекта с поддержкой sass / compass существует два способа, с помощью которых можно сгенерировать скелет проекта с помощью следующей команды:

$compass create compass_demo

Следующий подход, который в основном используется теми, кто использовал компас в течение определенного периода времени, — это создание его вручную из существующего проекта. Я точно знаю, что у вас вряд ли будет такой, особенно если вы решили следовать этому посту, чтобы впервые попробовать компас. Не волнуйся, я тебя прикрыл! Вы можете использовать проект, который я разработал для этого поста из  GitHub .

Тем не менее, я бы не советовал вам следовать второму подходу, описанному выше, поскольку он предотвратит загрязнение вашей руки при создании приложения с поддержкой компаса с нуля. Поэтому, предполагая, что вы придерживаетесь первого режима, здесь суть этого поста, настройка  файла  ruby config.rb, сгенерированного после команды create выше. Давайте разберемся с этим, этот файл дает нам возможность определить два важных аспекта всего этого процесса. Первым было бы определить, где в основном будут находиться наши css, sass, js и файлы изображений, структуру нашего проекта.

Следующее — определить, какой синтаксис мы будем использовать с нашими файлами sass. Я выбрал .scss , так как предпочитаю его синтаксис  .sass . Вот содержимое моего конфигуратора (ieconfig.rb),

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

output_style = :expanded # After dev :compressed

# To enable relative paths to assets via compass helper functions.
# relative_assets = true

line_comments = true

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
preferred_syntax = :scss

@import 'compass/css3';

$bg_color: #3b3531;
$text_color: #ffffff;
$header_color: #B7AE74;

@mixin height($min, $max) {
    min-height: $min;
    max-height: $max;
}

@mixin min_height($min) {
    min-height: $min;
}

body {
    background: $bg_color;
    color: $text_color;
}

.video-section .pattern-overlay {
    background-color: rgba(71, 71, 71, 0.59);
    padding: 110px 0 32px;
    @include min_height(496px);
}

#footer {
    @include height(250px, 300px);
}

.dark-overlay {
    padding: 20px;
    @include min_height(206px);
}

.dark, .video-section h1, .video-section h3 {
    text-align: center;
}

.dark h1, .video-section h1 {
    font-size: 110px;
    font-family: 'Buenard', serif;
    font-weight: bold;
    text-transform: uppercase;
    margin: 40px auto 0px;
    text-shadow: 1px 1px 1px #000;
    -webkit-text-shadow: 1px 1px 1px #000;
    -moz-text-shadow: 1px 1px 1px #000;
}

h3 {
    font-size: 25px;
    font-weight: lighter;
    margin: 0px auto 15px;
}

.dark h3 {
    margin: 10px auto 2px;
    color: $header_color;
    font-size: 22px;
}

.dark h4 {
    margin: 16px auto 2px;
    color: $header_color;
    font-size: 12px;
    font-weight: lighter;
}

#credits {
    margin-top: 90px;
}

.video-section .buttonBar {
    display: none;
}

.player {
    font-size: 1px;
}

$compass watch