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