1.
Основы CSS
препроцессоров и их
использование в WordPress
WordCamp Russia 2014 | Дмитрий Майоров

2.
Что такое CSS препроцессоры?

3.
ƭstyle.scss Magic
ƭstyle.css

4.
ƭstyle.scss Magic
ƭstyle.css
ƭheader.scss
ƭfooter.scss
ƭbody.scss

5.
Виды препроцессоров

6.
sass-lang.com

7.
lesscss.org

8.
learnboost.github.io/stylus

9.
Основные возможности
на примере Sass

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.
Комментарии
// 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.
Переменные
$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.
Вложенные структуры
.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.
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.
&
a {!
font-weight: bold;!
&:hover {!
text-decoration: underline;!
}!
}!
Scss CSS
a {!
font-weight: bold;!
}!
a:hover {!
text-decoration: underline;!
}!

16.
Арифметика
height: 20px + 2;!
height: 20px - 2;!
height: 20px * 2;!
height: (20px / 2);!
!
Scss CSS
height: 22px;!
height: 18px;!
height: 40px;!
height: 10px;!

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.
Submit

19.
Submit
#6ee16c
Mixins
#ffffff
#83e581 (:hover)

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.
Button
#6ee16c
Button
#cccccc
Button
#6cb1e1
Разные цвета

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.
Button
#ffffff
Button
#000000
Button
#ffffff
Цвет текста

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.
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.
В одну строку
@function color-check( $color ) {!
@return if( lightness($color) > lightness(#aaaaaa), #000, #fff );!
}!
!
.foo {!
color: color-check( #6ee16c );!
}!
Scss CSS
.foo {!
color: white;!
}

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.
Button
#6ee16c
Button
#cccccc
Button
#6cb1e1
Много кнопок сразу

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.
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.
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.
@extend
input[type="submit"] {!
@extend %btn-green;!
}!
Scss CSS
input[type="submit"] {!
background: #6ee16c;!
color: white;!
}!
input[type="submit"]:hover {!
background: #83e581;!
}!

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.
@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.
@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.
@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.
Установка

38.
Command Line

39.
Установка Sass на Mac
1. Открываем Terminal
2. Запускаем команду:
gem install sass

40.
Установка Sass на PC
1. Устанавливаем Ruby ( http://rubyinstaller.org/ )
2. Открываем Command Prompt
3. Запускаем команду:
gem install sass

41.
Компиляция Sass
1. Идем в директорию где лежит нужный файл
cd /Users/Username/Desktop/!
2. Запускаем команду:
sass style.scss style.css

42.
Автоматическая Компиляция Sass
1. Идем в директорию где лежит нужный файл
cd /Users/Username/Desktop/!
2. Запускаем команду:
sass --watch style.scss:style.css

43.
Software

44.
compass.kkbox.com

45.
mhs.github.io/scout-app

46.
koala-app.com

47.
alphapixels.com/prepros

48.
incident57.com/codekit/index.html

49.
Frameworks, Mixin Libraries
and Tools

50.
getbootstrap.com
lesselements.com
lesshat.madebysource.com
LESS

51.
compass-style.org/
bourbon.io
foundation.zurb.com
Sass

52.
bourbon.io
foundation.zurb.com
Sass
compass-style.org/

53.
compass-style.org

54.
Большая библиотека
полезных mixins и функций

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.
headings()
#{headings()} {!
font-weight: bold;!
}!
Scss CSS
h1, h2, h3, h4, h5, h6 {!
font-weight: bold;!
}!

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.
URL helpers

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.
image-url()
.selector {!
background: image-url("background.jpg");!
}!
Scss CSS
.selector {!
background: url('/img/background.jpg');!
}!

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.
image-url()
.selector {!
background: image-url("background.jpg");!
}!
Scss CSS
.selector {!
background: url('../img/background.jpg');!
}!

63.
Встроенные компоненты

64.
Reset
@import "compass/reset";

65.
Расширения
1. Susy (susy.oddbird.net)
Больше чем просто Grid Framework
2. Sass Modular Scale (github.com/Team-Sass/modular-scale)
Инструмент для создания модульных сеток
3. Breakpoint (breakpoint-sass.com/)
Инструмент для работы с медиа-выражениями

66.
compass-style.org

67.
Чего следует избегать

68.
Редактирование
компилированного CSS

69.
ƭstyle.scss Magic
ƭstyle.css
ƭvars.scss
ƭother.scss
ƭmixins.scss

70.
Редактирование
файла style.css в темах
WordPress

71.
Как вносить изменения в темы
1. Child Themes
2. Модуль Сustom CSS плагина Jetpack

72.
Тяжелые CSS файлы

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.
Излишние уровни вложенности

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.
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.
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.
Спасибо за внимание