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

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

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

Dmitry Mayorov

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