Successfully reported this slideshow.

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

3

Share

Upcoming SlideShare
SmartCSS
SmartCSS
Loading in …3
×
1 of 78
1 of 78

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

3

Share

Download to read offline

Description

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

Transcript

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

Description

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

Transcript

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

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

×