Оптимизация                               верстки:                         SASS + Compass                             fram...
SASS – это метаязык на основе СSS,  предназначенный для увеличения уровня  абстракции CSS кода и упрощения файлов  каскадн...
SCSS$blue: #3bbfce;    .content-navigation {       color: $blue;         li {         margin: 0 10px;       }}расширение ф...
SASS "the intended syntax"$blue: #3bbfce  .content-navigation     color: $blue      li      margin: 0 10pxрасширение файло...
Возможности SASS 1.   Переменные 2.   Вложение 3.   Mixins (Примеси) 4.   Наследование селекторов
Переменные (variables)  $blue: #222fa7;  $pink: #ee3381;  $grey: #ccc;  div {          background-color: $blue;  }  a{    ...
Вложения (Nesting)  .pane-mailchimp-form    {     /***styles***/  }  .pane-mailchimp-form    .pane-title {        /***styl...
Вложения (Nesting) .pane-mailchimp-form {    /***styles***/    .pane-title {        /***styles***/    }    input.form-text...
Примеси (Mixins) @mixin pane-main-style {     background: #ff0000;     border: 1px solid #ccc;     margin: 10px;     paddi...
Наследование селекторов (Selectorinheritance)      .error {        border: 1px solid #ff0000;      }      .badError {     ...
Кроссбраузерный CSS3SCSS.simple {      @include border-radius(5px); }CSS.simple {    -webkit-border-radius: 5px;    -moz-b...
Кроссбраузерный CSS3SCSS@include font-face("Blooming Grove", font-   files("examples/bgrove.ttf", "examples/bgrove.otf"));...
Хелперы (Helpers)image-width().views-row {    padding-left: image-width(../i/arrow_blue.png);}
Хелперы (Helpers)SCSSul li {    background: inline-image(../i/arrow_blue.png) no-repeat 0 0;}CSSul li {    background:    ...
Утилиты (Utilities) Спрайты (Sprites) my-icons/new.png my-icons/edit.png my-icons/save.png my-icons/delete.png @import "my...
Утилиты (Utilities)Спрайты (Sprites).my-icons-sprite,.my-icons-delete,.my-icons-edit,.my-icons-new,.my-icons-save {   back...
Установка SASS + Compassframework$ wget --no-check-certificate  https://raw.github.com/joshfng/railsready/m  aster/railsre...
Установка SASS + Compassframework$ cp -R css scss$ compass init$ nano config.rb   http_path = "/"   css_dir = "css"   sass...
Установка SASS + Compassframework$ compass watch>>> Change detected at 08:15:12 to: global.scssoverwrite css/global.css
Ссылки (sources)    http://sass-lang.com    http://compass-style.org© Андрей Тюпа @ RedFox
Андрей Тюпа Оптимизация верстки Sass + Compass framework
Upcoming SlideShare
Loading in …5
×

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

3,724 views
3,410 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,724
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Оптимизация верстки: SASS + Compass framework© Андрей Тюпа @ RedFox
  2. 2. SASS – это метаязык на основе СSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.Syntactically Awesome Stylesheets - синтаксически превосходные таблицы стилей
  3. 3. SCSS$blue: #3bbfce; .content-navigation { color: $blue; li { margin: 0 10px; }}расширение файлов .scss
  4. 4. SASS "the intended syntax"$blue: #3bbfce .content-navigation color: $blue li margin: 0 10pxрасширение файлов .sass
  5. 5. Возможности SASS 1. Переменные 2. Вложение 3. Mixins (Примеси) 4. Наследование селекторов
  6. 6. Переменные (variables) $blue: #222fa7; $pink: #ee3381; $grey: #ccc; div { background-color: $blue; } a{ color: $pink; } td { border: 1px solid $grey; }
  7. 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. 8. Вложения (Nesting) .pane-mailchimp-form { /***styles***/ .pane-title { /***styles***/ } input.form-text { /***styles***/ } input.form-submit { /***styles***/} }
  9. 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. 10. Наследование селекторов (Selectorinheritance) .error { border: 1px solid #ff0000; } .badError { @extend .error; border-width: 3px; }
  11. 11. Кроссбраузерный CSS3SCSS.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;}
  12. 12. Кроссбраузерный CSS3SCSS@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);}
  13. 13. Хелперы (Helpers)image-width().views-row { padding-left: image-width(../i/arrow_blue.png);}
  14. 14. Хелперы (Helpers)SCSSul li { background: inline-image(../i/arrow_blue.png) no-repeat 0 0;}CSSul li { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAA LCAYAAACtWacbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlY WR5ccllPAAAAG9JREFUeNpiZCjaY8zAwHCWAQ9gAuJVQDwTiJXwKQK BNCA+A8TlQCyISxEDVLIDqjgNlyIYUIJavxuIjXEpggEXqMJyfIreA3EnCLP gkFwNVXAPJICuaA8QV6CHG0wRSHAWFGMAFqixs/CFOECAAQAoihR8l UW5KwAAAABJRU5ErkJggg==) no-repeat 0 0;}
  15. 15. Утилиты (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;
  16. 16. Утилиты (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; }
  17. 17. Установка SASS + Compassframework$ wget --no-check-certificate https://raw.github.com/joshfng/railsready/m aster/railsready.sh$ bash railsready.sh$ gem install compass
  18. 18. Установка SASS + Compassframework$ 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
  19. 19. Установка SASS + Compassframework$ compass watch>>> Change detected at 08:15:12 to: global.scssoverwrite css/global.css
  20. 20. Ссылки (sources) http://sass-lang.com http://compass-style.org© Андрей Тюпа @ RedFox

×