Movatterモバイル変換

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

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

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

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

Основные возможностина примере 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 CSSbody {!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 CSSa {!font-weight: bold;!}!a:hover {!text-decoration: underline;!}!

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

Цветаcolor: lighten(#dd4141, 50%);!color: darken(#dd4141, 30%);!color: saturate(#dd4141, 75%);!color: desaturate(#dd4141, 25%);!Scss CSScolor: white;!color: #711414;!color: #ff1f1f;!color: #c15d5d;!

Submit#6ee16cMixins#ffffff#83e581 (:hover)

Mixins@mixin btn() {!background: #6ee16c:!color: #ffffff; !&:hover {!background: #83e581;!}!}!!input[type="submit"] {!@include btn();!}!Scss CSSinput[type="submit"] {!background: #6ee16c;!color: white; }!! input[type="submit"]:hover {!! background: #83e581; }!

Button#6ee16cButton#ccccccButton#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 CSSinput[type="submit"] {!background: #6ee16c;!color: white; }!! input[type="submit"]:hover {!! background: #83e581; }!

Button#ffffffButton#000000Button#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 CSSinput[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 FunctionScss CSSinput[type="submit"] {!background: #6ee16c;!color: white; }!! input[type="submit"]:hover {!!background: #83e581; }!

Button#6ee16cButton#ccccccButton#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

@extendinput[type="submit"] {!@extend %btn-green;!}!Scss CSSinput[type="submit"] {!background: #6ee16c;!color: white;!}!input[type="submit"]:hover {!background: #83e581;!}!

@extend vs @includeinput[type="submit"] {!@include btn( #6ee16c );!}!Scss CSSinput[type="submit"] {!background: #6ee16c;!color: white;!}!input[type="submit"]:hover {!background: #83e581;!}!

@extend vs @includeinput[type="submit"] {!@include btn( #6ee16c );!}!!button {!@include btn( #6ee16c );!}!Scss CSSinput[type="submit"] {!background: #6ee16c;!color: white;!}!input[type="submit"]:hover {!background: #83e581;!}!button {!background: #6ee16c;!color: white;!}!button:hover {!background: #83e581;!}!

@extend vs @includeinput[type="submit"] {!@extend %btn-green;!}!!button {!@extend %btn-green;!}!Scss CSSinput[type="submit"], button {!background: #6ee16c;!color: white;!}!input[type="submit"]:hover, button:hover {!background: #83e581;!}!

@extend vs @includeinput[type="submit"] {!@extend %btn-green;!}!!// Много других стилей!!button {!@extend %btn-green;!}!Scss CSSinput[type="submit"], button {!background: #6ee16c;!color: white;!}!input[type="submit"]:hover, button:hover {!background: #83e581;!}!

Установка Sass на Mac1. Открываем Terminal2. Запускаем команду:gem install sass

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

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

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

incident57.com/codekit/index.html

Frameworks, Mixin Librariesand Tools

getbootstrap.comlesselements.comlesshat.madebysource.comLESS

compass-style.org/bourbon.iofoundation.zurb.comSass

bourbon.iofoundation.zurb.comSasscompass-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 CSSh1, 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;!}!

conﬁg.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');!}!

conﬁg.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');!}!

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

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

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

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

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

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

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

// 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 next1. Документация Sass - sass-lang.com2. Документация LESS - lesscss.org3. CSS-TRICKS - css-tricks.com4. Tuts+ - tutsplus.com5. The Sass Way - thesassway.com6. Hugo Giraudel - hugogiraudel.com7. Sass For Web Designers - www.abookapart.com

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

Movatterモバイル変換

Change Language

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

Embed presentation

Recommended

More Related Content

Featured

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