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.
Оптимизация                               верстки:                         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,820 views

Published on

  • Sex in your area is here: ❤❤❤ http://bit.ly/39pMlLF ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❤❤❤ http://bit.ly/39pMlLF ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Андрей Тюпа Оптимизация верстки 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

×