Sass&less на Drupal-слёте

493 views

Published on

Официальный сайт мероприятия drupal-sliot.by

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

  • Be the first to like this

No Downloads
Views
Total views
493
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sass&less на Drupal-слёте

  1. 1. SASS & LESS
  2. 2. проблемы css● структура отсутствует● нельзя быстро поменять код● необходимо писать костыли● производительность
  3. 3. методы борьбы● переменные● области видимости● повторы кода в отдельные блоки
  4. 4. сss != <язык программирования>
  5. 5. выход есть
  6. 6. холивар LESS SASS● проще ● больше возможностей● поддержка javascript ● совместимый с CSS
  7. 7. стоит попробовать оба!
  8. 8. SCSS – диалект SASS SASS SCSS $blue: #3bbfce $blue: #3bbfce; $margin: 16px $margin: 16px; .content-navigation .content-navigation { border-color: $blue border-color: $blue; color: darken($blue, 9%) color: darken($blue, 9%); } .border { .border padding: $margin / 2; padding: $margin / 2 margin: $margin / 2; margin: $margin / 2 border-color: $blue; } border-color: $blue
  9. 9. compass● кросcбраузерные стили● основа - SASS
  10. 10. базовые возможности & синтаксис
  11. 11. вложенные условия LESS CSS #header { #header h1 { font-size: 26px; h1 { font-weight: bold; font-size: 26px; } font-weight: bold; #header p { } font-size: 12px; p { font-size: 12px; } a { text-decoration: none; #header p a { text-decoration: none; &:hover { border-width: 1px } } } #header p a:hover { } border-width: 1px;} }
  12. 12. вложенные условия SСSS CSS #navbar { #navbar { width: 80%; width: 80%; height: 23px; height: 23px; } ul { list-style-type: #navbar ul { none; } list-style-type: li { none; } float: left; #navbar li { a { font-weight: bold; } float: left; } } #navbar li a { } font-weight: bold; }
  13. 13. родительские ссылки LESS & SCSS CSS a { a { color: #ce4dd6; color: #ce4dd6; } &:hover { a:hover { color: #ffb3ff; } color: #ffb3ff; } &:visited { a:visited { color: #c458cb; } color: #c458cb; } }
  14. 14. переменные LESS CSS @color: #4D926F; #header { #header { color: #4D926F; color: @color; } } h2 { h2 { color: #4D926F; color: @color; } }
  15. 15. переменные SСSS CSS $main-color: #ce4dd6; #navbar { $style: solid; border-bottom-color: #ce4dd6; #navbar { border-bottom-style: border-bottom: { solid; } color: $main-color; a { style: $style; } } color: #ce4dd6;} a { a:hover { color: $main-color; border-bottom: solid 1px; } &:hover { border-bottom: $style 1px; } }
  16. 16. примеси LESS CSS .rounded-corners (@radius: 5px) { #header { -webkit-border-radius: @radius; -webkit-border-radius: 5px; -moz-border-radius: 5px; -moz-border-radius: @radius; -ms-border-radius: 5px; -ms-border-radius: @radius; -o-border-radius: 5px; -o-border-radius: @radius; border-radius: 5px; } border-radius: @radius; #footer { } -webkit-border-radius: 10px; -moz-border-radius: 10px; #header { .rounded-corners; } -ms-border-radius: 10px; #footer { .rounded-corners(10px); } -o-border-radius: 10px; border-radius: 10px; }
  17. 17. примеси SСSS CSS @mixin rounded($side, $radius: 10px) { #navbar li { border-#{$side}-radius: $radius; border-top-radius: 10px; -moz-border-radius-top: 10px; -moz-border-radius-#{$side}: $radius; -webkit-border-top-radius: 10px; } -webkit-border-#{$side}-radius: #footer { $radius; border-top-radius: 5px; } -moz-border-radius-top: 5px; -webkit-border-top-radius: 5px; } #navbar li { @include rounded(top); } #sidebar { #footer { @include rounded(top, 5px); } border-left-radius: 8px; #sidebar { @include rounded(left, 8px); } -moz-border-radius-left: 8px; -webkit-border-left-radius: 8px; }
  18. 18. функции и операторы LESS CSS @the-border: 1px; #header { @base-color: #111; color: #333; @red: #842210; border-left: 1px; #header { color: (@base-color * 3); border-right: 2px; border-left: @the-border; } border-right: (@the-border * 2); #footer { } color: #114411; #footer { border-color: color: (@base-color + #003300); #7d2717; border-color: desaturate(@red, 10%); } }
  19. 19. функции и операторы SСSS CSS $grid-width: 40px; #sidebar { $gutter-width: 10px; width: 240px; } @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid- width(5); }
  20. 20. разные фичи● условия● циклы● перегрузка функций● интерполяция переменных● функции работы с цветом● пространства имен● режимы вывода
  21. 21. установка
  22. 22. консоль● Node.js npm install less sudo apt get install node-less● Ruby gem gem install sass gem install compass
  23. 23. модули● LESS http://drupal.org/project/less● SASSy http://drupal.org/project/sassy● SASS http://drupal.org/project/sass
  24. 24. итоги● удобно● несложно● доступно● будет в D8
  25. 25. ссылки● http://lesscss.org/● sass-lang.com● http://compass-style.org/● http://drupal.org/project/compass● http://drupal.org/project/compass● http://drupal.org/project/compass
  26. 26. спасибо за внимание!

×