Your SlideShare is downloading. ×
  • Like
LESS and even more. Anton Shubkin.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

LESS and even more. Anton Shubkin.

  • 187 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
187
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. LESS and even more!
  • 2. LESS and even more!
  • 3. Код стилей:● Понятный● Гибкий● Разбит на файлы небольшогоразмера
  • 4. SMACSSScalable and Modular Architecture for CSSby Jonathan Snook
  • 5. Категории стилей1. Base2. Layout3. Module4. State5. Theme
  • 6. 1. Basehtml, body {...}input[type=text] {...}a {...}a:hover {...}p > span {...}span + span {...}- reset.css
  • 7. 2. Layout#header, #footer {...}#sidebar-first, #sidebar-second {...}#content {...}.l-fixed #sidebar-first { width: 200px; }.l-fluid #sidebar-first { width: 20%; }
  • 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. Sub-modules.menu {border: 1px solid #ccc;}.menu-item {padding: 5px;}.menu-horizontal .menu-item {display: inline-block;}
  • 10. 4. State#header.is-sticky {position: fixed;top: 0;}.menu.is-collapsed > h2 {text-decoration: underline;}
  • 11. Изменение состояния● класс● псевдо-класс● media query● атрибут.menu.is-collapsed {...}a:hover {...}@media screen and (max-width: 400px) {...}.button[data-state=pressed] {...}
  • 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. ● используйте классы● избегайте селекторов сидентификаторами● избегайте селекторов по элементам● избегайте большой вложенности вселекторах● используйте префиксы в классах
  • 14. Структура файлов● выносите базовые стили в отдельный файл● в зависимости от типов layout-ов, выносите их вотдельный файл или каждый основной тип в отдельныйфайл● выносите каждый модуль в отдельный файл● в зависимости от размера проекта, выносите подмодулив отдельные файлы● выносите глобальные состояния в отдельный файл● выносите layout-ы и состояния, относящиеся к модулю, втом числе media queries, в файл модуля
  • 15. Sass
  • 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. Переменные$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. Вложенные правила.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. Миксины (Mixins)@mixin link {color: #0000cc;&:hover {text-decoration: underline;}}a {@include link;}.scssa {color: #0000cc;}a:hover {text-decoration: underline;}.css
  • 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. Миксины@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. Расширения.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. Расширенияa:hover {text-decoration: underline;}.hoverlink {@extend a:hover;}.scssa:hover, .hoverlink {text-decoration: underline;}.css
  • 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. Математическиевыражения и функции$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. Функции работы сцветами$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. Директива @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. + Zen Grids
  • 29. Omega(7.x-4.x)
  • 30. /* main.scss */@import"variables","mixins","base/import","layout/import","components/import";
  • 31. Полезные ссылкиgoogle.com
  • 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. Спасибо завнимание!