Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DrupalCafe #1: Андрей Кочергин - SASS & Compass в Drupal

2,242 views

Published on

Андрей Кочергин - SASS & Compass в Drupal
Событие: DrupalCafe #1
Дата: 10.11.2012

Published in: Technology
  • Be the first to comment

  • Be the first to like this

DrupalCafe #1: Андрей Кочергин - SASS & Compass в Drupal

  1. 1. Использование SASS и COMPASS Что такое SASS & COMPASS Установка Переменные Функции Примеси Беглый обзор CompassПрактическая часть Настройка для темы ZEN Файл _base.scss и _custom.scss Сетка zen-grid!!!
  2. 2. Установка. Устанавливаем Rubby gem install sass gem update --system gem install compass@see http://compass-style.org/install/http://sass-lang.com/tutorial.htmlhttp://rubyinstaller.org/downloads/
  3. 3. Переменные$my_width:200px; Number (10, 20, 1.2 в том числе и единицы измерения em, px). String ($my_string:examples);для строк поддреживается контактинация, то есть сложение + colors($my_colors: #04a3f9) Booleans ($my_boolean: true);
  4. 4. Интерполяции$name: foo;$attr: border;p.#{$name} { #{$attr}-color: blue;} Возможность использовать переменных в названиях имен селектров и для определения свойств css
  5. 5. Функции Возвращают значение $grid-width: 40px;$gutter-width: 10px;@function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width;}#sidebar { width: grid-width(5); }
  6. 6. Примеси@mixin firefox-message($selector) body.firefox .header:before {{ content: "Hi, Firefox users!"; } body.firefox #{$selector}:before { content: "Hi, Firefox users!"; }}@include firefox-message(".header");
  7. 7. Compass – расширение для SASS (http://compass-style.org) SASS + fucntion + mixin + variables + Blueprint + CSS3 (support) = Compass Blueprint Function Mixin

×