SlideShare uma empresa Scribd logo
1 de 21
Baixar para ler offline
Оптимизация
                               верстки:
                         SASS + Compass
                             framework


© Андрей Тюпа @ RedFox
SASS – это метаязык на основе СSS,
  предназначенный для увеличения уровня
  абстракции CSS кода и упрощения файлов
  каскадных таблиц стилей.


Syntactically Awesome Stylesheets - синтаксически
  превосходные таблицы стилей
SCSS

$blue: #3bbfce;

    .content-navigation {
       color: $blue;
         li {
         margin: 0 10px;
       }
}

расширение файлов .scss
SASS "the intended syntax"

$blue: #3bbfce

  .content-navigation
     color: $blue
      li
      margin: 0 10px



расширение файлов .sass
Возможности SASS


 1.   Переменные
 2.   Вложение
 3.   Mixins (Примеси)
 4.   Наследование селекторов
Переменные (variables)
  $blue: #222fa7;
  $pink: #ee3381;
  $grey: #ccc;

  div {
          background-color: $blue;
  }
  a{
          color: $pink;
  }
  td {
          border: 1px solid $grey;
  }
Вложения (Nesting)
  .pane-mailchimp-form    {
     /***styles***/
  }
  .pane-mailchimp-form    .pane-title {
        /***styles***/
  }
  .pane-mailchimp-form    input.form-text {
        /***styles***/
  }
  .pane-mailchimp-form    input.form-submit {
        /***styles***/}
Вложения (Nesting)
 .pane-mailchimp-form {
    /***styles***/
    .pane-title {
        /***styles***/
    }
    input.form-text {
        /***styles***/
    }
    input.form-submit {
        /***styles***/}
 }
Примеси (Mixins)
 @mixin pane-main-style {
     background: #ff0000;
     border: 1px solid #ccc;
     margin: 10px;
     padding: 5px;
 }
 .pane-mailchimp-form {
     @include pane-main-style;
 }
 /*****/
 .pane-mailchimp-form {
     @include border-radius(5px);
 }
Наследование селекторов (Selector
inheritance)

      .error {
        border: 1px solid #ff0000;
      }

      .badError {
        @extend .error;
        border-width: 3px;
      }
Андрей Тюпа Оптимизация верстки Sass + Compass framework
Кроссбраузерный CSS3
SCSS
.simple {
      @include border-radius(5px);
 }

CSS
.simple {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
Кроссбраузерный CSS3

SCSS
@include font-face("Blooming Grove", font-
   files("examples/bgrove.ttf", "examples/bgrove.otf"));


CSS
@font-face {
   font-family: "Blooming Grove";
   src: url('/fonts/examples/bgrove.ttf') format('truetype'),
    url('/fonts/examples/bgrove.otf') format('opentype');
}
Хелперы (Helpers)


image-width()

.views-row {
    padding-left: image-width('../i/arrow_blue.png');
}
Хелперы (Helpers)

SCSS
ul li {
    background: inline-image('../i/arrow_blue.png') no-repeat 0 0;
}

CSS
ul li {
    background:
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAA
    LCAYAAACtWacbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlY
    WR5ccllPAAAAG9JREFUeNpiZCjaY8zAwHCWAQ9gAuJVQDwTiJXwKQK
    BNCA+A8TlQCyISxEDVLIDqjgNlyIYUIJavxuIjXEpggEXqMJyfIreA3EnCLP
    gkFwNVXAPJICuaA8QV6CHG0wRSHAWFGMAFqixs/CFOECAAQAoihR8l
    UW5KwAAAABJRU5ErkJggg==') no-repeat 0 0;
}
Утилиты (Utilities)

 Спрайты (Sprites)

 my-icons/new.png
 my-icons/edit.png
 my-icons/save.png
 my-icons/delete.png

 @import "my-icons/*.png";
 @include all-my-icons-sprites;
Утилиты (Utilities)

Спрайты (Sprites)

.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save {
   background: url('/images/my-icons-s34fe0604ab.png') no-
   repeat;
}

.my-icons-delete { background-position: 0 0; }
.my-icons-edit { background-position: 0 -32px; }
.my-icons-new { background-position: 0 -64px; }
.my-icons-save { background-position: 0 -96px; }
Установка SASS + Compass
framework

$ wget --no-check-certificate
  https://raw.github.com/joshfng/railsready/m
  aster/railsready.sh

$ bash railsready.sh

$ gem install compass
Установка SASS + Compass
framework

$ cp -R css scss

$ compass init

$ nano config.rb
   http_path = "/"
   css_dir = "css"
   sass_dir = "scss"
   images_dir = "images"

$ cp css/global.css scss/global.scss
Установка SASS + Compass
framework

$ compass watch

>>> Change detected at 08:15:12 to: global.scss
overwrite css/global.css
Ссылки (sources)

    http://sass-lang.com

    http://compass-style.org




© Андрей Тюпа @ RedFox

Mais conteúdo relacionado

Semelhante a Андрей Тюпа Оптимизация верстки Sass + Compass framework

ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....rit2011
 
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....rit2011
 
Front-end разработка. Compass
Front-end разработка. CompassFront-end разработка. Compass
Front-end разработка. CompassDrupalSib
 
CSS. Практика
CSS. ПрактикаCSS. Практика
CSS. ПрактикаVitebsk Miniq
 
Михаил Трошев — CSS: Систематизация базовых знаний
Михаил Трошев — CSS: Систематизация базовых знанийМихаил Трошев — CSS: Систематизация базовых знаний
Михаил Трошев — CSS: Систематизация базовых знанийYandex
 
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, JammitВёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, JammitAndrey Sitnik
 
пользовательские свойства как основа архитектуры CSS
пользовательские свойства как основа архитектуры CSSпользовательские свойства как основа архитектуры CSS
пользовательские свойства как основа архитектуры CSSZigzag_McQuack
 
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)Ontico
 
Сергей Сыркин - CSS
Сергей Сыркин - CSSСергей Сыркин - CSS
Сергей Сыркин - CSSYandex
 
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.ADCI Solutions
 
Sass&less на Drupal-слёте
Sass&less на Drupal-слётеSass&less на Drupal-слёте
Sass&less на Drupal-слётеzabej
 
Роман Комаров "CSS-препроцессоры: из каменного века — в будущее"
Роман Комаров "CSS-препроцессоры: из каменного века — в будущее"Роман Комаров "CSS-препроцессоры: из каменного века — в будущее"
Роман Комаров "CSS-препроцессоры: из каменного века — в будущее"Yandex
 
Crossbrowser Css layout
Crossbrowser Css layoutCrossbrowser Css layout
Crossbrowser Css layoutDarkestMaster
 
Лекция 4 Client-side
Лекция 4 Client-sideЛекция 4 Client-side
Лекция 4 Client-sideTechnosphere1
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10Technopark
 
CSS глазами машин
CSS глазами машинCSS глазами машин
CSS глазами машинRoman Dvornov
 
Алексей Морозов (Россия), Rambler.ru. ASP.NET в помощь хакеру и не только....
Алексей Морозов (Россия), Rambler.ru. ASP.NET в помощь хакеру и не только....Алексей Морозов (Россия), Rambler.ru. ASP.NET в помощь хакеру и не только....
Алексей Морозов (Россия), Rambler.ru. ASP.NET в помощь хакеру и не только....KazHackStan
 

Semelhante a Андрей Тюпа Оптимизация верстки Sass + Compass framework (20)

ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
 
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
 
Front-end разработка. Compass
Front-end разработка. CompassFront-end разработка. Compass
Front-end разработка. Compass
 
Semantic Grid. Layout of the future
Semantic Grid. Layout of the futureSemantic Grid. Layout of the future
Semantic Grid. Layout of the future
 
CSS. Практика
CSS. ПрактикаCSS. Практика
CSS. Практика
 
Михаил Трошев — CSS: Систематизация базовых знаний
Михаил Трошев — CSS: Систематизация базовых знанийМихаил Трошев — CSS: Систематизация базовых знаний
Михаил Трошев — CSS: Систематизация базовых знаний
 
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, JammitВёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
 
Парсим CSS
Парсим CSSПарсим CSS
Парсим CSS
 
пользовательские свойства как основа архитектуры CSS
пользовательские свойства как основа архитектуры CSSпользовательские свойства как основа архитектуры CSS
пользовательские свойства как основа архитектуры CSS
 
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
 
Сергей Сыркин - CSS
Сергей Сыркин - CSSСергей Сыркин - CSS
Сергей Сыркин - CSS
 
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
 
Sass&less на Drupal-слёте
Sass&less на Drupal-слётеSass&less на Drupal-слёте
Sass&less на Drupal-слёте
 
Роман Комаров "CSS-препроцессоры: из каменного века — в будущее"
Роман Комаров "CSS-препроцессоры: из каменного века — в будущее"Роман Комаров "CSS-препроцессоры: из каменного века — в будущее"
Роман Комаров "CSS-препроцессоры: из каменного века — в будущее"
 
Crossbrowser Css layout
Crossbrowser Css layoutCrossbrowser Css layout
Crossbrowser Css layout
 
Canvas
CanvasCanvas
Canvas
 
Лекция 4 Client-side
Лекция 4 Client-sideЛекция 4 Client-side
Лекция 4 Client-side
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10
 
CSS глазами машин
CSS глазами машинCSS глазами машин
CSS глазами машин
 
Алексей Морозов (Россия), Rambler.ru. ASP.NET в помощь хакеру и не только....
Алексей Морозов (Россия), Rambler.ru. ASP.NET в помощь хакеру и не только....Алексей Морозов (Россия), Rambler.ru. ASP.NET в помощь хакеру и не только....
Алексей Морозов (Россия), Rambler.ru. ASP.NET в помощь хакеру и не только....
 

Mais de Albina Tiupa

Happy ever afters with ci workflow
Happy ever afters with ci workflowHappy ever afters with ci workflow
Happy ever afters with ci workflowAlbina Tiupa
 
Иван Фесюк Работа с медиа
Иван Фесюк Работа с медиаИван Фесюк Работа с медиа
Иван Фесюк Работа с медиаAlbina Tiupa
 
Виктор Левандовский Управление проектами по разработке на Drupal
Виктор Левандовский Управление проектами по разработке на DrupalВиктор Левандовский Управление проектами по разработке на Drupal
Виктор Левандовский Управление проектами по разработке на DrupalAlbina Tiupa
 
Артур Богданов Как быть успешными с клиентами решая их проблемы
Артур Богданов Как быть успешными с клиентами решая их проблемыАртур Богданов Как быть успешными с клиентами решая их проблемы
Артур Богданов Как быть успешными с клиентами решая их проблемыAlbina Tiupa
 
Андрей Подлубный Seo и вёрстка
Андрей Подлубный Seo и вёрсткаАндрей Подлубный Seo и вёрстка
Андрей Подлубный Seo и вёрсткаAlbina Tiupa
 
Александр Бондаренко Хорошая типографика как залог успешности вашего сайта
Александр Бондаренко Хорошая типографика как залог успешности вашего сайтаАлександр Бондаренко Хорошая типографика как залог успешности вашего сайта
Александр Бондаренко Хорошая типографика как залог успешности вашего сайтаAlbina Tiupa
 
М. Боднарчук Современное функциональное тестирование с Codeception
М. Боднарчук Современное функциональное тестирование с CodeceptionМ. Боднарчук Современное функциональное тестирование с Codeception
М. Боднарчук Современное функциональное тестирование с CodeceptionAlbina Tiupa
 
А. Рябцев Drupal vs Wordpress на реальных примерах
А. Рябцев Drupal vs Wordpress на реальных примерахА. Рябцев Drupal vs Wordpress на реальных примерах
А. Рябцев Drupal vs Wordpress на реальных примерахAlbina Tiupa
 
В. Мельник Практические примеры использования модуль feeds
В. Мельник Практические примеры использования модуль feedsВ. Мельник Практические примеры использования модуль feeds
В. Мельник Практические примеры использования модуль feedsAlbina Tiupa
 
А. Горобец Расширяем media module. эффективный content management
А. Горобец Расширяем media module. эффективный content managementА. Горобец Расширяем media module. эффективный content management
А. Горобец Расширяем media module. эффективный content managementAlbina Tiupa
 
С. Савва Основы Commerce и примеры
С. Савва Основы Commerce и примерыС. Савва Основы Commerce и примеры
С. Савва Основы Commerce и примерыAlbina Tiupa
 
Е. Фиделин Безопасность Drupal сайтов
Е. Фиделин Безопасность Drupal сайтовЕ. Фиделин Безопасность Drupal сайтов
Е. Фиделин Безопасность Drupal сайтовAlbina Tiupa
 
Владимир Мельник Практические примеры используя модуль feeds
Владимир Мельник Практические примеры используя модуль feedsВладимир Мельник Практические примеры используя модуль feeds
Владимир Мельник Практические примеры используя модуль feedsAlbina Tiupa
 
Михаил Боднарчук Современное функциональное тестирование с Codeception
Михаил Боднарчук Современное функциональное тестирование с CodeceptionМихаил Боднарчук Современное функциональное тестирование с Codeception
Михаил Боднарчук Современное функциональное тестирование с CodeceptionAlbina Tiupa
 

Mais de Albina Tiupa (14)

Happy ever afters with ci workflow
Happy ever afters with ci workflowHappy ever afters with ci workflow
Happy ever afters with ci workflow
 
Иван Фесюк Работа с медиа
Иван Фесюк Работа с медиаИван Фесюк Работа с медиа
Иван Фесюк Работа с медиа
 
Виктор Левандовский Управление проектами по разработке на Drupal
Виктор Левандовский Управление проектами по разработке на DrupalВиктор Левандовский Управление проектами по разработке на Drupal
Виктор Левандовский Управление проектами по разработке на Drupal
 
Артур Богданов Как быть успешными с клиентами решая их проблемы
Артур Богданов Как быть успешными с клиентами решая их проблемыАртур Богданов Как быть успешными с клиентами решая их проблемы
Артур Богданов Как быть успешными с клиентами решая их проблемы
 
Андрей Подлубный Seo и вёрстка
Андрей Подлубный Seo и вёрсткаАндрей Подлубный Seo и вёрстка
Андрей Подлубный Seo и вёрстка
 
Александр Бондаренко Хорошая типографика как залог успешности вашего сайта
Александр Бондаренко Хорошая типографика как залог успешности вашего сайтаАлександр Бондаренко Хорошая типографика как залог успешности вашего сайта
Александр Бондаренко Хорошая типографика как залог успешности вашего сайта
 
М. Боднарчук Современное функциональное тестирование с Codeception
М. Боднарчук Современное функциональное тестирование с CodeceptionМ. Боднарчук Современное функциональное тестирование с Codeception
М. Боднарчук Современное функциональное тестирование с Codeception
 
А. Рябцев Drupal vs Wordpress на реальных примерах
А. Рябцев Drupal vs Wordpress на реальных примерахА. Рябцев Drupal vs Wordpress на реальных примерах
А. Рябцев Drupal vs Wordpress на реальных примерах
 
В. Мельник Практические примеры использования модуль feeds
В. Мельник Практические примеры использования модуль feedsВ. Мельник Практические примеры использования модуль feeds
В. Мельник Практические примеры использования модуль feeds
 
А. Горобец Расширяем media module. эффективный content management
А. Горобец Расширяем media module. эффективный content managementА. Горобец Расширяем media module. эффективный content management
А. Горобец Расширяем media module. эффективный content management
 
С. Савва Основы Commerce и примеры
С. Савва Основы Commerce и примерыС. Савва Основы Commerce и примеры
С. Савва Основы Commerce и примеры
 
Е. Фиделин Безопасность Drupal сайтов
Е. Фиделин Безопасность Drupal сайтовЕ. Фиделин Безопасность Drupal сайтов
Е. Фиделин Безопасность Drupal сайтов
 
Владимир Мельник Практические примеры используя модуль feeds
Владимир Мельник Практические примеры используя модуль feedsВладимир Мельник Практические примеры используя модуль feeds
Владимир Мельник Практические примеры используя модуль feeds
 
Михаил Боднарчук Современное функциональное тестирование с Codeception
Михаил Боднарчук Современное функциональное тестирование с CodeceptionМихаил Боднарчук Современное функциональное тестирование с Codeception
Михаил Боднарчук Современное функциональное тестирование с Codeception
 

Андрей Тюпа Оптимизация верстки Sass + Compass framework

  • 1. Оптимизация верстки: SASS + Compass framework © Андрей Тюпа @ RedFox
  • 2. SASS – это метаязык на основе СSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей. Syntactically Awesome Stylesheets - синтаксически превосходные таблицы стилей
  • 3. SCSS $blue: #3bbfce; .content-navigation { color: $blue; li { margin: 0 10px; } } расширение файлов .scss
  • 4. SASS "the intended syntax" $blue: #3bbfce .content-navigation color: $blue li margin: 0 10px расширение файлов .sass
  • 5. Возможности SASS 1. Переменные 2. Вложение 3. Mixins (Примеси) 4. Наследование селекторов
  • 6. Переменные (variables) $blue: #222fa7; $pink: #ee3381; $grey: #ccc; div { background-color: $blue; } a{ color: $pink; } td { border: 1px solid $grey; }
  • 7. Вложения (Nesting) .pane-mailchimp-form { /***styles***/ } .pane-mailchimp-form .pane-title { /***styles***/ } .pane-mailchimp-form input.form-text { /***styles***/ } .pane-mailchimp-form input.form-submit { /***styles***/}
  • 8. Вложения (Nesting) .pane-mailchimp-form { /***styles***/ .pane-title { /***styles***/ } input.form-text { /***styles***/ } input.form-submit { /***styles***/} }
  • 9. Примеси (Mixins) @mixin pane-main-style { background: #ff0000; border: 1px solid #ccc; margin: 10px; padding: 5px; } .pane-mailchimp-form { @include pane-main-style; } /*****/ .pane-mailchimp-form { @include border-radius(5px); }
  • 10. Наследование селекторов (Selector inheritance) .error { border: 1px solid #ff0000; } .badError { @extend .error; border-width: 3px; }
  • 12. Кроссбраузерный CSS3 SCSS .simple { @include border-radius(5px); } CSS .simple { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
  • 13. Кроссбраузерный CSS3 SCSS @include font-face("Blooming Grove", font- files("examples/bgrove.ttf", "examples/bgrove.otf")); CSS @font-face { font-family: "Blooming Grove"; src: url('/fonts/examples/bgrove.ttf') format('truetype'), url('/fonts/examples/bgrove.otf') format('opentype'); }
  • 14. Хелперы (Helpers) image-width() .views-row { padding-left: image-width('../i/arrow_blue.png'); }
  • 15. Хелперы (Helpers) SCSS ul li { background: inline-image('../i/arrow_blue.png') no-repeat 0 0; } CSS ul li { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAA LCAYAAACtWacbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlY WR5ccllPAAAAG9JREFUeNpiZCjaY8zAwHCWAQ9gAuJVQDwTiJXwKQK BNCA+A8TlQCyISxEDVLIDqjgNlyIYUIJavxuIjXEpggEXqMJyfIreA3EnCLP gkFwNVXAPJICuaA8QV6CHG0wRSHAWFGMAFqixs/CFOECAAQAoihR8l UW5KwAAAABJRU5ErkJggg==') no-repeat 0 0; }
  • 16. Утилиты (Utilities) Спрайты (Sprites) my-icons/new.png my-icons/edit.png my-icons/save.png my-icons/delete.png @import "my-icons/*.png"; @include all-my-icons-sprites;
  • 17. Утилиты (Utilities) Спрайты (Sprites) .my-icons-sprite, .my-icons-delete, .my-icons-edit, .my-icons-new, .my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no- repeat; } .my-icons-delete { background-position: 0 0; } .my-icons-edit { background-position: 0 -32px; } .my-icons-new { background-position: 0 -64px; } .my-icons-save { background-position: 0 -96px; }
  • 18. Установка SASS + Compass framework $ wget --no-check-certificate https://raw.github.com/joshfng/railsready/m aster/railsready.sh $ bash railsready.sh $ gem install compass
  • 19. Установка SASS + Compass framework $ cp -R css scss $ compass init $ nano config.rb http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "images" $ cp css/global.css scss/global.scss
  • 20. Установка SASS + Compass framework $ compass watch >>> Change detected at 08:15:12 to: global.scss overwrite css/global.css
  • 21. Ссылки (sources) http://sass-lang.com http://compass-style.org © Андрей Тюпа @ RedFox