Основы css препроцессоров и их использование в wordpress
DESCRIPTION
Доклад том как начать работать с CSS препроцессорами и перестать писать чистый CSS. Основы работы с Sass, Compass, компиляция, фреймворки, типичные ошибки.TRANSCRIPT
![Page 1: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/1.jpg)
Основы CSS препроцессоров и их
использование в WordPressWordCamp Russia 2014 | Дмитрий Майоров
![Page 2: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/2.jpg)
Что такое CSS препроцессоры?
![Page 3: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/3.jpg)
! style.scss
" Magic
! style.css
![Page 4: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/4.jpg)
! style.scss
" Magic
! style.css
! header.scss
! footer.scss
! body.scss
![Page 5: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/5.jpg)
Виды препроцессоров
![Page 6: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/6.jpg)
sass-lang.com
![Page 7: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/7.jpg)
lesscss.org
![Page 8: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/8.jpg)
learnboost.github.io/stylus
![Page 9: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/9.jpg)
Основные возможности на примере Sass
![Page 10: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/10.jpg)
@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
![Page 11: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/11.jpg)
Комментарии
// Silent comment!!/* CSS-style comment */!!/*!! Theme Name: Twenty Fourteen Child! Template: twentyfourteen!*/!
Scss CSS
/* CSS-style comment */!!/*!! Theme Name: Twenty Fourteen Child! Template: twentyfourteen!*/!!
![Page 12: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/12.jpg)
Переменные
$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;!}!
![Page 13: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/13.jpg)
Вложенные структуры
.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;!}!
![Page 14: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/14.jpg)
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%;! }!}!
![Page 15: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/15.jpg)
&
a {! font-weight: bold;! &:hover {! text-decoration: underline;! }!}!
Scss CSS
a {! font-weight: bold;!}!a:hover {! text-decoration: underline;!}!
![Page 16: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/16.jpg)
Арифметика
height: 20px + 2;!height: 20px - 2;!height: 20px * 2;!height: (20px / 2);!!
Scss CSS
height: 22px;!height: 18px;!height: 40px;!height: 10px;!
![Page 17: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/17.jpg)
Цвета
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;!
![Page 18: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/18.jpg)
Submit
![Page 19: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/19.jpg)
Submit#6ee16c
Mixins
#ffffff
#83e581 (:hover)
![Page 20: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/20.jpg)
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; }!
![Page 21: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/21.jpg)
Button
#6ee16c
Button
#cccccc
Button
#6cb1e1
Разные цвета
![Page 22: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/22.jpg)
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; }!
![Page 23: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/23.jpg)
Button
#ffffff
Button
#000000
Button
#ffffff
Цвет текста
![Page 24: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/24.jpg)
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; }!
![Page 25: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/25.jpg)
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;!}
![Page 26: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/26.jpg)
В одну строку
@function color-check( $color ) {! @return if( lightness($color) > lightness(#aaaaaa), #000, #fff );!}!!.foo {! color: color-check( #6ee16c );!}!
Scss CSS
.foo {! color: white;!}
![Page 27: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/27.jpg)
@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; }!
![Page 28: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/28.jpg)
Button
#6ee16c
Button
#cccccc
Button
#6cb1e1
Много кнопок сразу
![Page 29: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/29.jpg)
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; }!
![Page 30: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/30.jpg)
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; }!
![Page 31: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/31.jpg)
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
![Page 32: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/32.jpg)
@extend
input[type="submit"] {! @extend %btn-green;!}!
Scss CSS
input[type="submit"] {! background: #6ee16c;! color: white;!}!input[type="submit"]:hover {! background: #83e581;!}!
![Page 33: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/33.jpg)
@extend vs @include
input[type="submit"] {! @include btn( #6ee16c );!}!
Scss CSS
input[type="submit"] {! background: #6ee16c;! color: white;!}!input[type="submit"]:hover {! background: #83e581;!}!
![Page 34: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/34.jpg)
@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;!}!
![Page 35: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/35.jpg)
@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;!}!
![Page 36: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/36.jpg)
@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;!}!
![Page 37: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/37.jpg)
Установка
![Page 38: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/38.jpg)
Command Line
![Page 39: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/39.jpg)
Установка Sass на Mac
1. Открываем Terminal
2. Запускаем команду:
gem install sass
![Page 40: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/40.jpg)
Установка Sass на PC
1. Устанавливаем Ruby ( http://rubyinstaller.org/ )
2. Открываем Command Prompt
3. Запускаем команду:
gem install sass
![Page 41: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/41.jpg)
Компиляция Sass
1. Идем в директорию где лежит нужный файл
cd /Users/Username/Desktop/!
2. Запускаем команду:
sass style.scss style.css
![Page 42: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/42.jpg)
Автоматическая Компиляция Sass
1. Идем в директорию где лежит нужный файл
cd /Users/Username/Desktop/!
2. Запускаем команду:
sass --watch style.scss:style.css
![Page 43: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/43.jpg)
Software
![Page 44: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/44.jpg)
compass.kkbox.com
![Page 45: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/45.jpg)
mhs.github.io/scout-app
![Page 46: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/46.jpg)
koala-app.com
![Page 47: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/47.jpg)
alphapixels.com/prepros
![Page 48: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/48.jpg)
incident57.com/codekit/index.html
![Page 49: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/49.jpg)
Frameworks, Mixin Libraries and Tools
![Page 50: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/50.jpg)
getbootstrap.com
lesselements.com
lesshat.madebysource.com
LESS
![Page 51: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/51.jpg)
compass-style.org/
bourbon.io
foundation.zurb.com
Sass
![Page 52: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/52.jpg)
bourbon.io
foundation.zurb.com
Sass
compass-style.org/
![Page 53: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/53.jpg)
compass-style.org
![Page 54: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/54.jpg)
Большая библиотекаполезных mixins и функций
![Page 55: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/55.jpg)
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;!}!
![Page 56: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/56.jpg)
headings()
#{headings()} {! font-weight: bold;!}!
Scss CSS
h1, h2, h3, h4, h5, h6 {! font-weight: bold;!}!
![Page 57: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/57.jpg)
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;!}!
![Page 58: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/58.jpg)
URL helpers
![Page 59: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/59.jpg)
config.rbhttp_path = "/"!css_dir = "stylesheets"!sass_dir = "sass"!images_dir = "img"!javascripts_dir = "javascripts"!!output_style = :expanded!!# relative_assets = true!!line_comments = false!
![Page 60: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/60.jpg)
image-url()
.selector {! background: image-url("background.jpg");!}!
Scss CSS
.selector {! background: url('/img/background.jpg');!}!
![Page 61: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/61.jpg)
config.rbhttp_path = "/"!css_dir = "stylesheets"!sass_dir = "sass"!images_dir = "img"!javascripts_dir = "javascripts"!!output_style = :expanded!!relative_assets = true!!line_comments = false!
![Page 62: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/62.jpg)
image-url()
.selector {! background: image-url("background.jpg");!}!
Scss CSS
.selector {! background: url('../img/background.jpg');!}!
![Page 63: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/63.jpg)
Встроенные компоненты
![Page 64: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/64.jpg)
Reset
@import "compass/reset";
![Page 65: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/65.jpg)
Расширения
1. Susy (susy.oddbird.net) Больше чем просто Grid Framework
2. Sass Modular Scale (github.com/Team-Sass/modular-scale) Инструмент для создания модульных сеток
3. Breakpoint (breakpoint-sass.com/)Инструмент для работы с медиа-выражениями
![Page 66: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/66.jpg)
compass-style.org
![Page 67: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/67.jpg)
Чего следует избегать
![Page 68: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/68.jpg)
Редактирование компилированного CSS
![Page 69: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/69.jpg)
! style.scss
" Magic
! style.css
! vars.scss
! other.scss
! mixins.scss
![Page 70: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/70.jpg)
Редактирование файла style.css в темах
WordPress
![Page 71: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/71.jpg)
Как вносить изменения в темы
1. Child Themes
2. Модуль Сustom CSS плагина Jetpack
![Page 72: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/72.jpg)
Тяжелые CSS файлы
![Page 73: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/73.jpg)
// 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";!
![Page 74: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/74.jpg)
Излишние уровни вложенности
![Page 75: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/75.jpg)
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;!}!
![Page 76: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/76.jpg)
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;!}!
![Page 77: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/77.jpg)
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
![Page 78: Основы CSS препроцессоров и их использование в WordPress](https://reader034.vdocument.in/reader034/viewer/2022050904/547de7835906b5ab718b4605/html5/thumbnails/78.jpg)
Спасибо за внимание