Основы CSS препроцессоров и их

использование в WordPressWordCamp 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: #fff;!}!

_sidebar.scss

@import “_sidebar”;!!body {! background: #fff;!}!

style.scss

Комментарии

// Silent comment!!/* CSS-style comment */!!/*!! Theme Name: Twenty Fourteen Child! Template: twentyfourteen!*/!

Scss CSS

/* CSS-style comment */!!/*!! Theme Name: Twenty Fourteen Child! Template: twentyfourteen!*/!!

Переменные

$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;!}!

Вложенные структуры

.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;!}!

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%;! }!}!

&

a {! font-weight: bold;! &:hover {! text-decoration: underline;! }!}!

Scss CSS

a {! font-weight: bold;!}!a:hover {! text-decoration: underline;!}!

Арифметика

height: 20px + 2;!height: 20px - 2;!height: 20px * 2;!height: (20px / 2);!!

Scss CSS

height: 22px;!height: 18px;!height: 40px;!height: 10px;!

Цвета

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;!

Submit

Submit#6ee16c

Mixins

#ffffff

#83e581 (:hover)

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; }!

Button

#6ee16c

Button

#cccccc

Button

#6cb1e1

Разные цвета

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; }!

Button

#ffffff

Button

#000000

Button

#ffffff

Цвет текста

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; }!

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;!}

В одну строку

@function color-check( $color ) {! @return if( lightness($color) > lightness(#aaaaaa), #000, #fff );!}!!.foo {! color: color-check( #6ee16c );!}!

Scss CSS

.foo {! color: white;!}

@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; }!

Button

#6ee16c

Button

#cccccc

Button

#6cb1e1

Много кнопок сразу

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; }!

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; }!

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

@extend

input[type="submit"] {! @extend %btn-green;!}!

Scss CSS

input[type="submit"] {! background: #6ee16c;! color: white;!}!input[type="submit"]:hover {! background: #83e581;!}!

@extend vs @include

input[type="submit"] {! @include btn( #6ee16c );!}!

Scss CSS

input[type="submit"] {! background: #6ee16c;! color: white;!}!input[type="submit"]:hover {! background: #83e581;!}!

@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;!}!

@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;!}!

@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;!}!

Установка

Command Line

Установка Sass на Mac

1. Открываем Terminal

2. Запускаем команду:

gem install sass

Установка Sass на PC

1. Устанавливаем Ruby ( http://rubyinstaller.org/ )

2. Открываем Command Prompt

3. Запускаем команду:

gem install sass

Компиляция Sass

1. Идем в директорию где лежит нужный файл

cd /Users/Username/Desktop/!

2. Запускаем команду:

sass style.scss style.css

Автоматическая Компиляция Sass

1. Идем в директорию где лежит нужный файл

cd /Users/Username/Desktop/!

2. Запускаем команду:

sass --watch style.scss:style.css

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($image);! height: image-height($image);!}!

Scss CSS

.selector {! background: url("testpattern.gif");! width: 640px;! height: 480px;!}!

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,!

.selector .col-2,!

.selector .col-3,!

.selector .col-4,!

.selector .col-5,!

.selector .col-6 {! margin: 0;! padding: 0;!}!

URL helpers

config.rbhttp_path = "/"!css_dir = "stylesheets"!sass_dir = "sass"!images_dir = "img"!javascripts_dir = "javascripts"!!output_style = :expanded!!# relative_assets = true!!line_comments = false!

image-url()

.selector {! background: image-url("background.jpg");!}!

Scss CSS

.selector {! background: url('/img/background.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!

image-url()

.selector {! background: image-url("background.jpg");!}!

Scss CSS

.selector {! background: url('../img/background.jpg');!}!

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

Reset

@import "compass/reset";

Расширения

1. Susy (susy.oddbird.net) Больше чем просто Grid Framework

2. Sass Modular Scale (github.com/Team-Sass/modular-scale) Инструмент для создания модульных сеток

3. Breakpoint (breakpoint-sass.com/)Инструмент для работы с медиа-выражениями

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 "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";!

Излишние уровни вложенности

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;!}!

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;!}!

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

Спасибо за внимание