Compass + ...

Board index Software / Программное обеспечение Web development

Post #1by vralle » 12.01.2014, 17:59

Windows:

Скачиваем по ссылке Ruby installer и Development Kit (необходим для Rails)
*ветки ниже 2.0 уже практически не поддерживаются. смело выбираем свежую версию

устанавливаем без пробелов в путях, выбрав все.

Устанавливаем Development Kit.
Для этого распаковываем содержимое архива с Development Kit в соответствующую папку, например, RubyDev-Kit. Пути не должны содержать пробелов.
открываем окно командной строки с поддержкой Ruby (W8 - поиск - ruby - выбираем command promt with Ruby)
переходим в каталог с DevKit: cd /d D:\Ruby-Dev-Kit\
регистрируем конфигурацию: ruby dk.rb init
устанавливаем: ruby dk.rb install

С Ruby на этом этапе разобрались, переходим к установке Rails: gem install rails

Автоматизируем процесс создания стилей:

compass - фреймворк для SASS.
Установка:
gem install compass

autoprefixer-rails - автоматическое добавление префиксов при компиляции стилей. В стилях пишем только W3C.
gem install autoprefixer-rails

csso-rails - css-оптимизатор + минимизация.
gem install csso-rails
тут моя подпись
vralle
With us: 5 years 8 months

Post #2by vralle » 13.01.2014, 20:33

Пример config.rb:
Code: Select all
require 'autoprefixer-rails'
require 'csso'

http_path = "/"
css_dir = "css"
sass_dir = "_sass"
images_dir = "images"
javascripts_dir = "js"

output_style = :compressed

on_stylesheet_saved do |file|
  css = File.read(file)
  File.open(file, 'w') do |io|
    io << Csso.optimize( AutoprefixerRails.compile(css) )
  end
end
На выходе получаем файл стилей, включающий все префиксы и пережатый Csso.

сниппеты от соавтора Compass - Chris Eppstein
тут моя подпись
vralle
With us: 5 years 8 months

Post #3by vralle » 14.01.2014, 06:43

пример работы autoprefixer (border-box, placeholder)
SASS:
Code: Select all
.Form-input {
    border: 1px solid $input-border-color;
    box-sizing: border-box;
    padding: 0.5em 0.6em;

    &[type="search"] {
        box-sizing: border-box;
    }
    &:focus {
        border-color: $input-border-color-focus;
        outline: 0;
    }
    &::placeholder {
        color: $input-placeholder-color;
    }

CSS:
Code: Select all
.Form-input {
  border: 1px solid #989898;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.5em 0.6em;
}
.Form-input[type="search"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.Form-input:focus {
  border-color: #727272;
  outline: 0;
}
.Form-input::-webkit-input-placeholder {
  color: #727272;
}
.Form-input::-moz-placeholder {
  color: #727272;
}
.Form-input:-ms-input-placeholder {
  color: #727272;
}
.Form-input::placeholder {
  color: #727272;
}

Added after 12 hours 28 minutes:
SASS/Compass не поддерживают сдвоенные селекторы аля .Buttom.is-pressed
Обходим это упущение через плейсхолдер "%".
SASS:
Code: Select all
.Button {
  display: inline-block;

  &%is-pressed {
    color: red;
  }
}

.is-pressed {
    @extend %is-pressed;
}

Code: Select all
CSS:
.Button {
  display: inline-block;
}
.Button.is-pressed {
    color: red;
}

Added after 12 hours 39 minutes:
append-selector($selector, $to-append)
append-selector(".foo", ".bar") -> .foo.bar
тут моя подпись
vralle
With us: 5 years 8 months

Post #4by vralle » 08.08.2014, 21:06

Конфиг для совместной работы Compass, Autoprefixer и CSSO: https://gist.github.com/vralle/83e8c73268e9f9598d57
При работе Compass в режиме разработки(environment = :development), сгенерированый файл стилей обрабатывается Autoprefixer, после CSSO создает сжатую версию файла стилей
тут моя подпись
vralle
With us: 5 years 8 months


Return to Web development



cron