LESS and even more. Anton Shubkin.

417 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

LESS and even more. Anton Shubkin.

  1. 1. LESS and even more!
  2. 2. LESS and even more!
  3. 3. Код стилей:● Понятный● Гибкий● Разбит на файлы небольшогоразмера
  4. 4. SMACSSScalable and Modular Architecture for CSSby Jonathan Snook
  5. 5. Категории стилей1. Base2. Layout3. Module4. State5. Theme
  6. 6. 1. Basehtml, body {...}input[type=text] {...}a {...}a:hover {...}p > span {...}span + span {...}- reset.css
  7. 7. 2. Layout#header, #footer {...}#sidebar-first, #sidebar-second {...}#content {...}.l-fixed #sidebar-first { width: 200px; }.l-fluid #sidebar-first { width: 20%; }
  8. 8. 3. Module.menu {border: 1px solid #ccc;}.menu > h2 {padding: 5px;}.menu li {padding: 5px;}.menu {border: 1px solid #ccc;}.menu-header {padding: 5px;}.menu-item {padding: 5px;}
  9. 9. Sub-modules.menu {border: 1px solid #ccc;}.menu-item {padding: 5px;}.menu-horizontal .menu-item {display: inline-block;}
  10. 10. 4. State#header.is-sticky {position: fixed;top: 0;}.menu.is-collapsed > h2 {text-decoration: underline;}
  11. 11. Изменение состояния● класс● псевдо-класс● media query● атрибут.menu.is-collapsed {...}a:hover {...}@media screen and (max-width: 400px) {...}.button[data-state=pressed] {...}
  12. 12. 5. Theme/* in module-name.css */.mod {border: 1px solid;}/* in theme.css */.mod {border-color: blue;}/* in theme.css */.theme-border {border-color: purple;}.theme-background {background: linear-gradient( ... );}
  13. 13. ● используйте классы● избегайте селекторов сидентификаторами● избегайте селекторов по элементам● избегайте большой вложенности вселекторах● используйте префиксы в классах
  14. 14. Структура файлов● выносите базовые стили в отдельный файл● в зависимости от типов layout-ов, выносите их вотдельный файл или каждый основной тип в отдельныйфайл● выносите каждый модуль в отдельный файл● в зависимости от размера проекта, выносите подмодулив отдельные файлы● выносите глобальные состояния в отдельный файл● выносите layout-ы и состояния, относящиеся к модулю, втом числе media queries, в файл модуля
  15. 15. Sass
  16. 16. Переменные$fontSize: 16px;$lineHeight: normal;$fontColor: #000;.element {font-size: $fontSize;line-height: $lineHeight;color: $fontColor;}$black: #000;$fontColor: $black;.element {color: $fontColor;}.scss.element {font-size: 16px;line-height: normal;color: black;}.element {color: black;}.css
  17. 17. Переменные$borderWidth: 1px;$borderStyle: solid;$borderColor: #ccc;$border: $borderWidth $borderStyle $borderColor;.element-1 {border: $border;}.element-2 {border: $borderWidth $borderStyle $borderColor;}.element-1 {border: 1px solid #cccccc;}.element-2 {border: 1px solid #cccccc;}.scss .css
  18. 18. Вложенные правила.menu {a {color: #0000cc;&:hover {text-decoration: underline;}&.active {color: #cc0000;}}}.scss.menu a {color: #0000cc;}.menu a:hover {text-decoration: underline;}.menu a.active {color: #cc0000;}.css
  19. 19. Миксины (Mixins)@mixin link {color: #0000cc;&:hover {text-decoration: underline;}}a {@include link;}.scssa {color: #0000cc;}a:hover {text-decoration: underline;}.css
  20. 20. Миксины@mixin border-radius($radius) {-moz-border-radius: $radius;-webkit-border-radius: $radius;border-radius: $radius;}.rounded {@include border-radius(5px);}.scss.rounded {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}.css
  21. 21. Миксины@mixin fixed-size($width: 100px, $height: 100px) {width: $width;height: $height;}.box-1 {@include fixed-size;}.box-2 {@include fixed-size(150px, 200px);}.scss.box-1 {width: 100px;height: 100px;}.box-2 {width: 150px;height: 200px;}.css
  22. 22. Расширения.error {border: 1px #f00;background-color: #fdd;}.error.intrusion {background-image: url("/image/hacked.png");}.seriousError {@extend .error;border-width: 3px;}.scss.error, .seriousError {border: 1px #f00;background-color: #fdd;}.error.intrusion, .intrusion.seriousError {background-image: url("/image/hacked.png");}.seriousError {border-width: 3px;}.css
  23. 23. Расширенияa:hover {text-decoration: underline;}.hoverlink {@extend a:hover;}.scssa:hover, .hoverlink {text-decoration: underline;}.css
  24. 24. Математическиевыражения и функции$baseFontSize: 16px;$color: #999;$elementOuterWidth: 300px;$elementLeftRightPadding: 20px;.element {padding: 0 $elementLeftRightPadding;width: $elementOuterWidth -$elementLeftRightPadding * 2;font-size: $baseFontSize + 2;color: $color + #000033;}.title {font-size: $baseFontSize * 1.5;}.scss.element {padding: 0 20px;width: 260px;font-size: 18px;color: #9999cc;}.title {font-size: 24px;}.css
  25. 25. Математическиевыражения и функции$colNumber: 3;.col {width: floor(100% / $colNumber);}.col.last {width: 100% - floor(100% / $colNumber) *($colNumber - 1);}$contentWidth: 960px;$colPaddingLeftRight: 20px;.another-col {width: floor(($contentWidth / $colNumber) - 2 *$colPaddingLeftRight);}.scss.col {width: 33%;}.col.last {width: 34%;}.another-col {width: 280px;}.css
  26. 26. Функции работы сцветами$linkColor: #0000ff;$buttonColor: #b83000;a {color: $linkColor;&:hover {color: lighten($linkColor, 10%);}}.button {background-color: $buttonColor;&:hover {background-color: darken($buttonColor, 10%);}}.scssa {color: blue;}a:hover {color: #3333ff;}.button {background-color: #b83000;}.button:hover {background-color: #852300;}.css
  27. 27. Директива @import.element-1 {display: block;float: left;}element-1.scss.element-1 {display: block;float: left;}.element-2 {display: inline-block;border: 1px solid #999;}main.css.element-2 {display: inline-block;border: 1px solid #999;}element-2.scss@import "element-1.scss";@import "element-2";main.scss
  28. 28. + Zen Grids
  29. 29. Omega(7.x-4.x)
  30. 30. /* main.scss */@import"variables","mixins","base/import","layout/import","components/import";
  31. 31. Полезные ссылкиgoogle.com
  32. 32. Полезные ссылки● CSS coding standards https://drupal.org/node/1886770● SMACSS http://smacss.com/● Sass http://sass-lang.com/● Compass http://compass-style.org/● Zen https://drupal.org/project/zen● Omega https://drupal.org/project/omega● AdaptiveTheme https://drupal.org/project/adaptivetheme
  33. 33. Спасибо завнимание!

×