Weitere ähnliche Inhalte Ähnlich wie LESS and even more. Anton Shubkin. Ähnlich wie LESS and even more. Anton Shubkin. (20) LESS and even more. Anton Shubkin.7. 1. Base
html, body {...}
input[type=text] {...}
a {...}
a:hover {...}
p > span {...}
span + span {...}
- reset.css
8. 2. Layout
#header, #footer {...}
#sidebar-first, #sidebar-second {...}
#content {...}
.l-fixed #sidebar-first { width: 200px; }
.l-fluid #sidebar-first { width: 20%; }
9. 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;
}
12. Изменение состояния
● класс
● псевдо-класс
● media query
● атрибут
.menu.is-collapsed {...}
a:hover {...}
@media screen and (max-width: 400px) {...}
.button[data-state=pressed] {...}
13. 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( ... );
}
14. ● используйте классы
● избегайте селекторов с
идентификаторами
● избегайте селекторов по элементам
● избегайте большой вложенности в
селекторах
● используйте префиксы в классах
15. Структура файлов
● выносите базовые стили в отдельный файл
● в зависимости от типов layout-ов, выносите их в
отдельный файл или каждый основной тип в отдельный
файл
● выносите каждый модуль в отдельный файл
● в зависимости от размера проекта, выносите подмодули
в отдельные файлы
● выносите глобальные состояния в отдельный файл
● выносите layout-ы и состояния, относящиеся к модулю, в
том числе media queries, в файл модуля
17. Переменные
$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
19. Вложенные правила
.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
20. Миксины (Mixins)
@mixin link {
color: #0000cc;
&:hover {
text-decoration: underline;
}
}
a {
@include link;
}
.scss
a {
color: #0000cc;
}
a:hover {
text-decoration: underline;
}
.css
22. Миксины
@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
23. Расширения
.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
25. Математические
выражения и функции
$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
26. Математические
выражения и функции
$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
27. Функции работы с
цветами
$linkColor: #0000ff;
$buttonColor: #b83000;
a {
color: $linkColor;
&:hover {
color: lighten($linkColor, 10%);
}
}
.button {
background-color: $buttonColor;
&:hover {
background-color: darken($buttonColor, 10%);
}
}
.scss
a {
color: blue;
}
a:hover {
color: #3333ff;
}
.button {
background-color: #b83000;
}
.button:hover {
background-color: #852300;
}
.css
28. Директива @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
35. Полезные ссылки
● 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