Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Основы CSS
препроцессоров и их
использование в WordPress
WordCamp Russia 2014		 |	 Дмитрий Майоров
Что такое CSS препроцессоры?
ƭstyle.scss Magic
ƭstyle.css
ƭstyle.scss Magic
ƭstyle.css
ƭheader.scss
ƭfooter.scss
ƭbody.scss
Виды препроцессоров
sass-lang.com
lesscss.org
learnboost.github.io/stylus
Основные возможности
на примере Sass
@imports
.sidebar {!
margin: 0;!
padding: 0;!
}
Scss CSS
.sidebar {!
margin: 0;!
padding: 0;!
}!
!
body {!
background: #ff...
Комментарии
// Silent comment!
!
/* CSS-style comment */!
!
/*!!
Theme Name: Twenty Fourteen Child!
Template: twentyfourte...
Переменные
$font-family: 'Open Sans', sans-serif;!
$text-color: #222222;!
!
body {!
font-family: $font-family;!
color: $te...
Вложенные структуры
.post {!
margin: 0;!
!
.title {!
font-size: 2em;!
font-weight: normal;!
!
a {!
text-decoration: none;!...
Nested Media Queries
.container {!
width: 960px;!
!
! @media screen and (max-width: 960px) {!
width: 100%!
}!
}!
Scss CSS
...
&
a {!
font-weight: bold;!
&:hover {!
text-decoration: underline;!
}!
}!
Scss CSS
a {!
font-weight: bold;!
}!
a:hover {!
t...
Арифметика
height: 20px + 2;!
height: 20px - 2;!
height: 20px * 2;!
height: (20px / 2);!
!
Scss CSS
height: 22px;!
height:...
Цвета
color: lighten(#dd4141, 50%);!
color: darken(#dd4141, 30%);!
color: saturate(#dd4141, 75%);!
color: desaturate(#dd41...
Submit
Submit
#6ee16c
Mixins
#ffffff
#83e581 (:hover)
Mixins
@mixin btn() {!
background: #6ee16c:!
color: #ffffff; !
&:hover {!
background: #83e581;!
}!
}!
!
input[type="submit...
Button
#6ee16c
Button
#cccccc
Button
#6cb1e1
Разные цвета
Mixins с параметрами
@mixin btn( $bg-color, $text-color ) {!
background: $bg-color;!
color: $text-color; !
&:hover {!
back...
Button
#ffffff
Button
#000000
Button
#ffffff
Цвет текста
Mixins
@mixin btn( $bg-color ) {!
background: $bg-color;!
@if ( lightness( $bg-color ) > lightness( #aaaaaa ) ) {!
color: ...
Functions
@function color-check( $color ) {!
@if (lightness($color) > lightness(#aaaaaa)) {!
@return #000;!
} @else {!
@re...
В одну строку
@function color-check( $color ) {!
@return if( lightness($color) > lightness(#aaaaaa), #000, #fff );!
}!
!
....
@mixin btn( $bg-color ) {!
background: $bg-color;!
color: color-check( $bg-color );!
!
&:hover {!
background: lighten( $bg...
Button
#6ee16c
Button
#cccccc
Button
#6cb1e1
Много кнопок сразу
Mixins
.btn-blue {!
@include btn( #6cb1e1 );!
}!
.btn-green {!
@include btn( #6ee16c );!
}!
.btn-gray {!
@include btn( #cc...
Maps
$buttons: (!
blue: #6cb1e1,!
green: #6ee16c, !
red: #eb3b50!
);!
!
@each $button, $bg-color in $buttons {!
.btn-#{$bu...
Map with Placeholder Selector
$buttons: (!
blue: #6cb1e1,!
green: #6ee16c, !
red: #eb3b50!
);!
!
@each $button, $bg-color ...
@extend
input[type="submit"] {!
@extend %btn-green;!
}!
Scss CSS
input[type="submit"] {!
background: #6ee16c;!
color: whit...
@extend vs @include
input[type="submit"] {!
@include btn( #6ee16c );!
}!
Scss CSS
input[type="submit"] {!
background: #6ee...
@extend vs @include
input[type="submit"] {!
@include btn( #6ee16c );!
}!
!
button {!
@include btn( #6ee16c );!
}!
Scss CSS...
@extend vs @include
input[type="submit"] {!
@extend %btn-green;!
}!
!
button {!
@extend %btn-green;!
}!
Scss CSS
input[typ...
@extend vs @include
input[type="submit"] {!
@extend %btn-green;!
}!
!
// Много других стилей!
!
button {!
@extend %btn-gre...
Установка
Command Line
Установка Sass на Mac
1. Открываем Terminal
2. Запускаем команду:
gem install sass
Установка Sass на PC
1. Устанавливаем Ruby ( http://rubyinstaller.org/ )
2. Открываем Command Prompt
3. Запускаем команду:...
Компиляция Sass
1. Идем в директорию где лежит нужный файл
cd /Users/Username/Desktop/!
2. Запускаем команду:
sass style.s...
Автоматическая Компиляция Sass
1. Идем в директорию где лежит нужный файл
cd /Users/Username/Desktop/!
2. Запускаем команд...
Software
compass.kkbox.com
mhs.github.io/scout-app
koala-app.com
alphapixels.com/prepros
incident57.com/codekit/index.html
Frameworks, Mixin Libraries
and Tools
getbootstrap.com
lesselements.com
lesshat.madebysource.com
LESS
compass-style.org/
bourbon.io
foundation.zurb.com
Sass
bourbon.io
foundation.zurb.com
Sass
compass-style.org/
compass-style.org
Большая библиотека

полезных mixins и функций
image-width() & image-height()
.selector {!
$image: 'testpattern.gif';!
background: url($image);!
width: image-width($imag...
headings()
#{headings()} {!
font-weight: bold;!
}!
Scss CSS
h1, h2, h3, h4, h5, h6 {!
font-weight: bold;!
}!
enumerate()
.selector {!
#{enumerate(".col", 1, 6)} {!
margin: 0;!
padding: 0;!
}!
}!
Scss CSS
.selector .col-1,!
.selecto...
URL helpers
config.rb
http_path = "/"!
css_dir = "stylesheets"!
sass_dir = "sass"!
images_dir = "img"!
javascripts_dir = "javascripts"!...
image-url()
.selector {!
background: image-url("background.jpg");!
}!
Scss CSS
.selector {!
background: url('/img/backgrou...
config.rb
http_path = "/"!
css_dir = "stylesheets"!
sass_dir = "sass"!
images_dir = "img"!
javascripts_dir = "javascripts"!...
image-url()
.selector {!
background: image-url("background.jpg");!
}!
Scss CSS
.selector {!
background: url('../img/backgr...
Встроенные компоненты
Reset
@import "compass/reset";
Расширения
1. Susy (susy.oddbird.net) 

Больше чем просто Grid Framework
2. Sass Modular Scale (github.com/Team-Sass/modul...
compass-style.org
Чего следует избегать
Редактирование
компилированного CSS
ƭstyle.scss Magic
ƭstyle.css
ƭvars.scss
ƭother.scss
ƭmixins.scss
Редактирование
файла style.css в темах
WordPress
Как вносить изменения в темы
1. Child Themes
2. Модуль Сustom CSS плагина Jetpack
Тяжелые CSS файлы
// Core variables and mixins!
@import "variables.less";!
@import "mixins.less";!
!
// Reset and dependencies!
@import "nor...
Излишние уровни вложенности
Nesting
.post {!
margin: 0;!
!
.title {!
font-size: 2em;!
font-weight: normal;!
!
a {!
text-decoration: none;!
}!
}!
}!
Sc...
Nesting
.post {!
margin: 0;!
!
.title {!
font-size: 2em;!
font-weight: normal;!
}!
a {!
text-decoration: none;!
}!
}!
Scss...
What’s next
1. Документация Sass - sass-lang.com
2. Документация LESS - lesscss.org
3. CSS-TRICKS - css-tricks.com
4. Tuts...
Спасибо за внимание
Upcoming SlideShare
Loading in …5
×

Основы CSS препроцессоров и их использование в WordPress

2,061 views

Published on

Доклад том как начать работать с CSS препроцессорами и перестать писать чистый CSS. Основы работы с Sass, Compass, компиляция, фреймворки, типичные ошибки.

Published in: Technology

Основы CSS препроцессоров и их использование в WordPress

  1. 1. Основы CSS препроцессоров и их использование в WordPress WordCamp Russia 2014 | Дмитрий Майоров
  2. 2. Что такое CSS препроцессоры?
  3. 3. ƭstyle.scss Magic ƭstyle.css
  4. 4. ƭstyle.scss Magic ƭstyle.css ƭheader.scss ƭfooter.scss ƭbody.scss
  5. 5. Виды препроцессоров
  6. 6. sass-lang.com
  7. 7. lesscss.org
  8. 8. learnboost.github.io/stylus
  9. 9. Основные возможности на примере Sass
  10. 10. @imports .sidebar {! margin: 0;! padding: 0;! } Scss CSS .sidebar {! margin: 0;! padding: 0;! }! ! body {! background: #fff;! }! _sidebar.scss @import “_sidebar”;! ! body {! background: #fff;! }! style.scss
  11. 11. Комментарии // Silent comment! ! /* CSS-style comment */! ! /*!! Theme Name: Twenty Fourteen Child! Template: twentyfourteen! */! Scss CSS /* CSS-style comment */! ! /*!! Theme Name: Twenty Fourteen Child! Template: twentyfourteen! */! !
  12. 12. Переменные $font-family: 'Open Sans', sans-serif;! $text-color: #222222;! ! body {! font-family: $font-family;! color: $text-color;! }! Scss CSS body {! font-family: 'Open Sans', sans-serif;! color: #222222;! }!
  13. 13. Вложенные структуры .post {! margin: 0;! ! .title {! font-size: 2em;! font-weight: normal;! ! a {! text-decoration: none;! }! }! }! Scss CSS .post {! margin: 0;! }! .post .title {! font-size: 2em;! font-weight: normal;! }! .post .title a {! text-decoration: none;! }!
  14. 14. Nested Media Queries .container {! width: 960px;! ! ! @media screen and (max-width: 960px) {! width: 100%! }! }! Scss CSS .container {! width: 960px;! }! ! @media screen and (max-width: 960px) {! .container {! width: 100%;! }! }!
  15. 15. & a {! font-weight: bold;! &:hover {! text-decoration: underline;! }! }! Scss CSS a {! font-weight: bold;! }! a:hover {! text-decoration: underline;! }!
  16. 16. Арифметика height: 20px + 2;! height: 20px - 2;! height: 20px * 2;! height: (20px / 2);! ! Scss CSS height: 22px;! height: 18px;! height: 40px;! height: 10px;!
  17. 17. Цвета color: lighten(#dd4141, 50%);! color: darken(#dd4141, 30%);! color: saturate(#dd4141, 75%);! color: desaturate(#dd4141, 25%);! Scss CSS color: white;! color: #711414;! color: #ff1f1f;! color: #c15d5d;!
  18. 18. Submit
  19. 19. Submit #6ee16c Mixins #ffffff #83e581 (:hover)
  20. 20. Mixins @mixin btn() {! background: #6ee16c:! color: #ffffff; ! &:hover {! background: #83e581;! }! }! ! input[type="submit"] {! @include btn();! }! Scss CSS input[type="submit"] {! background: #6ee16c;! color: white; }! ! input[type="submit"]:hover {! ! background: #83e581; }!
  21. 21. Button #6ee16c Button #cccccc Button #6cb1e1 Разные цвета
  22. 22. Mixins с параметрами @mixin btn( $bg-color, $text-color ) {! background: $bg-color;! color: $text-color; ! &:hover {! background: lighten( $bg-color, 5% );! }! }! ! input[type="submit"] {! @include btn( #6ee16c, #fff );! }! Scss CSS input[type="submit"] {! background: #6ee16c;! color: white; }! ! input[type="submit"]:hover {! ! background: #83e581; }!
  23. 23. Button #ffffff Button #000000 Button #ffffff Цвет текста
  24. 24. Mixins @mixin btn( $bg-color ) {! background: $bg-color;! @if ( lightness( $bg-color ) > lightness( #aaaaaa ) ) {! color: #000;! } @else {! color: #fff;! }! &:hover {! background: lighten( $bg-color, 5% );! }! }! ! input[type="submit"] {! @include btn( #6ee16c );! }! Scss CSS input[type="submit"] {! background: #6ee16c;! color: white; }! ! input[type="submit"]:hover {! !background: #83e581; }!
  25. 25. Functions @function color-check( $color ) {! @if (lightness($color) > lightness(#aaaaaa)) {! @return #000;! } @else {! @return #fff;! }! }! ! .foo {! color: color-check( #6ee16c );! }! Scss CSS .foo {! color: white;! }
  26. 26. В одну строку @function color-check( $color ) {! @return if( lightness($color) > lightness(#aaaaaa), #000, #fff );! }! ! .foo {! color: color-check( #6ee16c );! }! Scss CSS .foo {! color: white;! }
  27. 27. @mixin btn( $bg-color ) {! background: $bg-color;! color: color-check( $bg-color );! ! &:hover {! background: lighten( $bg-color, 5% );! }! }! ! input[type="submit"] {! @include btn( #6ee16c );! }! Mixin with Function Scss CSS input[type="submit"] {! background: #6ee16c;! color: white; }! ! input[type="submit"]:hover {! !background: #83e581; }!
  28. 28. Button #6ee16c Button #cccccc Button #6cb1e1 Много кнопок сразу
  29. 29. Mixins .btn-blue {! @include btn( #6cb1e1 );! }! .btn-green {! @include btn( #6ee16c );! }! .btn-gray {! @include btn( #ccc );! }! Scss CSS .btn-blue {! background: #6cb1e1;! color: white; }! .btn-blue:hover {! background: #81bce5; }! ! .btn-green {! background: #6ee16c;! color: white; }! .btn-green:hover {! background: #83e581; }! ! .btn-gray {! background: #cccccc;! color: black; }! .btn-gray:hover {! background: #d9d9d9; }!
  30. 30. Maps $buttons: (! blue: #6cb1e1,! green: #6ee16c, ! red: #eb3b50! );! ! @each $button, $bg-color in $buttons {! .btn-#{$button} {! @include btn( $bg-color );! }! }! Scss CSS .btn-blue {! background: #6cb1e1;! color: white; }! .btn-blue:hover {! background: #81bce5; }! ! .btn-green {! background: #6ee16c;! color: white; }! .btn-green:hover {! background: #83e581; }! ! .btn-gray {! background: #cccccc;! color: black; }! .btn-gray:hover {! background: #d9d9d9; }!
  31. 31. Map with Placeholder Selector $buttons: (! blue: #6cb1e1,! green: #6ee16c, ! red: #eb3b50! );! ! @each $button, $bg-color in $buttons {! %btn-#{$button} {! @include btn( $bg-color );! }! }! Scss CSS
  32. 32. @extend input[type="submit"] {! @extend %btn-green;! }! Scss CSS input[type="submit"] {! background: #6ee16c;! color: white;! }! input[type="submit"]:hover {! background: #83e581;! }!
  33. 33. @extend vs @include input[type="submit"] {! @include btn( #6ee16c );! }! Scss CSS input[type="submit"] {! background: #6ee16c;! color: white;! }! input[type="submit"]:hover {! background: #83e581;! }!
  34. 34. @extend vs @include input[type="submit"] {! @include btn( #6ee16c );! }! ! button {! @include btn( #6ee16c );! }! Scss CSS input[type="submit"] {! background: #6ee16c;! color: white;! }! input[type="submit"]:hover {! background: #83e581;! }! button {! background: #6ee16c;! color: white;! }! button:hover {! background: #83e581;! }!
  35. 35. @extend vs @include input[type="submit"] {! @extend %btn-green;! }! ! button {! @extend %btn-green;! }! Scss CSS input[type="submit"], button {! background: #6ee16c;! color: white;! }! input[type="submit"]:hover, button:hover {! background: #83e581;! }!
  36. 36. @extend vs @include input[type="submit"] {! @extend %btn-green;! }! ! // Много других стилей! ! button {! @extend %btn-green;! }! Scss CSS input[type="submit"], button {! background: #6ee16c;! color: white;! }! input[type="submit"]:hover, button:hover {! background: #83e581;! }!
  37. 37. Установка
  38. 38. Command Line
  39. 39. Установка Sass на Mac 1. Открываем Terminal 2. Запускаем команду: gem install sass
  40. 40. Установка Sass на PC 1. Устанавливаем Ruby ( http://rubyinstaller.org/ ) 2. Открываем Command Prompt 3. Запускаем команду: gem install sass
  41. 41. Компиляция Sass 1. Идем в директорию где лежит нужный файл cd /Users/Username/Desktop/! 2. Запускаем команду: sass style.scss style.css
  42. 42. Автоматическая Компиляция Sass 1. Идем в директорию где лежит нужный файл cd /Users/Username/Desktop/! 2. Запускаем команду: sass --watch style.scss:style.css
  43. 43. Software
  44. 44. compass.kkbox.com
  45. 45. mhs.github.io/scout-app
  46. 46. koala-app.com
  47. 47. alphapixels.com/prepros
  48. 48. incident57.com/codekit/index.html
  49. 49. Frameworks, Mixin Libraries and Tools
  50. 50. getbootstrap.com lesselements.com lesshat.madebysource.com LESS
  51. 51. compass-style.org/ bourbon.io foundation.zurb.com Sass
  52. 52. bourbon.io foundation.zurb.com Sass compass-style.org/
  53. 53. compass-style.org
  54. 54. Большая библиотека
 полезных mixins и функций
  55. 55. image-width() & image-height() .selector {! $image: 'testpattern.gif';! background: url($image);! width: image-width($image);! height: image-height($image);! }! Scss CSS .selector {! background: url("testpattern.gif");! width: 640px;! height: 480px;! }!
  56. 56. headings() #{headings()} {! font-weight: bold;! }! Scss CSS h1, h2, h3, h4, h5, h6 {! font-weight: bold;! }!
  57. 57. enumerate() .selector {! #{enumerate(".col", 1, 6)} {! margin: 0;! padding: 0;! }! }! Scss CSS .selector .col-1,! .selector .col-2,! .selector .col-3,! .selector .col-4,! .selector .col-5,! .selector .col-6 {! margin: 0;! padding: 0;! }!
  58. 58. URL helpers
  59. 59. config.rb http_path = "/"! css_dir = "stylesheets"! sass_dir = "sass"! images_dir = "img"! javascripts_dir = "javascripts"! ! output_style = :expanded! ! # relative_assets = true! ! line_comments = false!
  60. 60. image-url() .selector {! background: image-url("background.jpg");! }! Scss CSS .selector {! background: url('/img/background.jpg');! }!
  61. 61. config.rb http_path = "/"! css_dir = "stylesheets"! sass_dir = "sass"! images_dir = "img"! javascripts_dir = "javascripts"! ! output_style = :expanded! ! relative_assets = true! ! line_comments = false!
  62. 62. image-url() .selector {! background: image-url("background.jpg");! }! Scss CSS .selector {! background: url('../img/background.jpg');! }!
  63. 63. Встроенные компоненты
  64. 64. Reset @import "compass/reset";
  65. 65. Расширения 1. Susy (susy.oddbird.net) 
 Больше чем просто Grid Framework 2. Sass Modular Scale (github.com/Team-Sass/modular-scale)
 Инструмент для создания модульных сеток 3. Breakpoint (breakpoint-sass.com/)
 Инструмент для работы с медиа-выражениями
  66. 66. compass-style.org
  67. 67. Чего следует избегать
  68. 68. Редактирование компилированного CSS
  69. 69. ƭstyle.scss Magic ƭstyle.css ƭvars.scss ƭother.scss ƭmixins.scss
  70. 70. Редактирование файла style.css в темах WordPress
  71. 71. Как вносить изменения в темы 1. Child Themes 2. Модуль Сustom CSS плагина Jetpack
  72. 72. Тяжелые CSS файлы
  73. 73. // Core variables and mixins! @import "variables.less";! @import "mixins.less";! ! // Reset and dependencies! @import "normalize.less";! @import "print.less";! @import "glyphicons.less";! ! // Core CSS! @import "scaffolding.less";! @import "type.less";! @import "code.less";! @import "grid.less";! @import "tables.less";! @import "forms.less";! @import "buttons.less";! ! // Components! @import "component-animations.less";! @import "dropdowns.less";! @import "button-groups.less";! @import "input-groups.less";! @import "navs.less";! @import "navbar.less";! @import "breadcrumbs.less";! @import "pagination.less";! @import "pager.less";! @import "labels.less";! @import "badges.less";! @import "jumbotron.less";! @import "thumbnails.less";! @import "alerts.less";! @import "progress-bars.less";! @import "media.less";! @import "list-group.less";! @import "panels.less";! @import "responsive-embed.less";! @import "wells.less";! @import "close.less";! ! // Components w/ JavaScript! @import "modals.less";! @import "tooltip.less";! @import "popovers.less";! @import "carousel.less";! ! // Utility classes! @import "utilities.less";! @import "responsive-utilities.less";! // Core variables and mixins! @import "variables.less";! @import "mixins.less";! ! // Reset and dependencies! @import "normalize.less";! @import "print.less";! ! // Core CSS! @import "scaffolding.less";! @import "type.less";! @import "code.less";! @import "grid.less";! @import "tables.less";! @import "forms.less";! @import "buttons.less";!
  74. 74. Излишние уровни вложенности
  75. 75. Nesting .post {! margin: 0;! ! .title {! font-size: 2em;! font-weight: normal;! ! a {! text-decoration: none;! }! }! }! Scss CSS .post {! margin: 0;! }! .post .title {! font-size: 2em;! font-weight: normal;! }! .post .title a {! text-decoration: none;! }!
  76. 76. Nesting .post {! margin: 0;! ! .title {! font-size: 2em;! font-weight: normal;! }! a {! text-decoration: none;! }! }! Scss CSS .post {! margin: 0;! }! .post .title {! font-size: 2em;! font-weight: normal;! }! .post a {! text-decoration: none;! }!
  77. 77. What’s next 1. Документация Sass - sass-lang.com 2. Документация LESS - lesscss.org 3. CSS-TRICKS - css-tricks.com 4. Tuts+ - tutsplus.com 5. The Sass Way - thesassway.com 6. Hugo Giraudel - hugogiraudel.com 7. Sass For Web Designers - www.abookapart.com
  78. 78. Спасибо за внимание

×