Процессинг CSS

Рыбалка Екатерина, Завьялов Александр

О наболевшем


.menu {
    display: inline-block;
}

.menu__item {
    background: #d0881d;
}

.menu__item:hover {
    background: #ebb96f;
}

.menu__arrow {
    background: #d0881d;
}

Препроцессоры

Код

↓

Препроцессор

↓

CSS


.menu {
    display: inline-block;
}

.menu__item {
    background: #d0881d;
}

.menu__item:hover {
    background: #ebb96f;
}

.menu__arrow {
    background: #d0881d;
}


            

$bg_color = #d0881d;

.menu {
    display: inline-block;
}

menu__item {
    background: $bg_color;
}

.menu__item:hover {
    background: lighten($bg_color, 40%);
}

.menu__arrow {
    background: $bg_color;
}
            

.menu {
    display: inline-block;
}

.menu__item {
    background: #d0881d;
}

.menu__item:hover {
    background: #ebb96f;
}

.menu__arrow {
    background: #d0881d;
}


            


$bg_color = #d0881d;

.menu {
    display: inline-block;
}

menu__item {
    background: $bg_color;
}

.menu__item:hover {
    background: lighten($bg_color, 40%);
}

.menu__arrow {
    background: $bg_color;
}
 
            

.menu {
    display: inline-block;
}

.menu__item {
    background: #d0881d;
}

.menu__item:hover {
    background: #ebb96f;
}

.menu__arrow {
    background: #d0881d;
}
            


$bg_color = #d0881d;

.menu {
    display: inline-block;

    &__item {
        background: $bg_color;

        &:hover {
            background: lighten($bg_color, 40%);
        }
    }

    &__arrow {
        background: $bg_color;
    }
}
                
            

.menu {
    display: inline-block;
}

.menu__item {
    background: #d0881d;
}

.menu__item:hover {
    background: #ebb96f;
}

.menu__arrow {
    background: #d0881d;
}
            


$bg_color = #d0881d;

.menu {
    display: inline-block;

    &__item {
        background: $bg_color;

        &:hover {
            background: lighten($bg_color, 40%);
        }
    }

    &__arrow {
        background: $bg_color;
    }
}

Препроцессоры

Less

Sass

Stylus

Установка


npm install stylus

Компиляция


stylus index.styl --out ./css/index.css
        

stylus --watch index.styl

Переменные


$font = 14px Helvetica, sans-serif;
box_width = 30%;
box_height = 300px;

.block {
    font: $font;
    width: box_width;
    height: box_height;
}
            

.block {
    font: 14px Helvetica, sans-serif;
    width: 30%;
    height: 300px;
}

Операторы


$box_width = 300px;
$box_height = $box_width * 2;

.box {
    width: $box_width;
    height: $box_height;
}
            

.box {
    width: 300px;
    height: 600px;
}

Вложенность


.header {
    .title {
        font-size: 20px;
    }

    .link {
        color: green;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}
            

.header .title {
    font-size: 20px;
}

.header .link {
    color: #008000;
    text-decoration: none;
}

.header .link:hover {
    text-decoration: underline;
}

Вложенность


.header {
    &__title {
        font-size: 20px;
    }

    &__link {
        color: green;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}
            

.header__title {
    font-size: 20px;
}

.header__link {
    color: #008000;
    text-decoration: none;
}

.header__link:hover {
    text-decoration: underline;
}

Массивы и циклы


$col_list = 1 2 3 4;
            for $col in $col_list {
    td:nth-child({$col}) {
        width: 10% * $col;
    }
}
            for $col in (1..4) {...}
                            

td:nth-child(1) {
    width: 10%;
}

td:nth-child(2) {
    width: 20%;
}

td:nth-child(3) {
    width: 30%;
}

td:nth-child(4) {
    width: 40%;
}

Hashes


$cats = {
    cat_1: './images/cat1.jpg',
    cat_2: './images/cat2.jpg'
}
            
$cats.cat_1 = './images/cat1_new.jpg';
$cats['cat_3'] = './images/cat3.jpg';
            
for $name, $bg_img in $cats {
    #img-{$name} {
        background: url($bg_img);
    }
}
            

#img-cat1 {
    background: url("./images/cat1_new.jpg");
}

#img-cat2 {
    background: url("./images/cat2.jpg");
}

#img-cat3 {
    background: url("./images/cat3.jpg");
}

Условные операторы


$theme = 'day';

.sky {
    if $theme == 'day' {
        background: blue;
        background-image: url(sun.png);
    } else {
        background: black;
        background-image: url(stars.png);
    }
}
            

.sky {
    background: #00f;
    background-image: url(sun.png);
}

import


@import 'theme'
        

// theme_day.styl

$bg_color = blue;
$bg_img = sun.png;
            

// main.styl

@import 'theme_day'

.sky {
    background: $bg_color;
    background-image: url($bg_img);
}
            

/* main.css */

.sky {
    background: #00f;
    background-image: url(sun.png);
}

Миксины


set_bg_color($theme) {
    if $theme == 'day' {
        background: blue;
        background-image: url(sun.png);
    } else {
        background: black;
        background-image: url(stars.png);
    }
}

.sky {
    set_bg_color('night');
}
            

.sky {
    background: #000;
    background-image: url(stars.png);
}

nib


npm install nib
        
@import 'nib'
        
@import 'nib/gradients'
@import 'nib/buttons'

Gradient


body {
    background linear-gradient(bottom left, 80% white, blue, red)
}
            

body {
    background: -webkit-linear-gradient(bottom left, #fff 80%, #00f, #f00);
    background: -moz-linear-gradient(bottom left, #fff 80%, #00f, #f00);
    background: -o-linear-gradient(bottom left, #fff 80%, #00f, #f00);
    background: -ms-linear-gradient(bottom left, #fff 80%, #00f, #f00);
    background: linear-gradient(to top right, #fff 80%, #00f, #f00);
}

Position


#back-to-top {
    fixed bottom 10px right 5px
}
        

#back-to-top {
    position: fixed;
    bottom: 10px;
    right: 5px;
}

Transparent Mixins


.animate-item {
    animation-delay 1s;
    animation-duration 1s;
}
        

.animate-item {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

Clearfix


.clearfix {
    clearfix()
}
        

.clearfix {
    zoom: 1;
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

Responsive Images


#logo {
    image '/images/logo.main.png'
}
        

#logo {
    background-image: url(/images/logo.main.png);
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
    #logo {
        background-image: url(/images/logo.main@2x.png);
        background-size: auto auto;
    }
}

Комментарии


// Очень содержательный комментарий
        

/*
Длинный содержательный комментарий
*/

DEMO

verstka-task-8

Debug

source maps

Создание


stylus index.styl -m
        

{
    "version": 3,
    "sources": ["index.styl"],
    "names": [],
    "mappings": "AA2BQ;EACI,YAAwB,kCAAxB;EACA,iBAAiB,KAAjB...
    "file": "index.css"
}

DevTools

WebStorm

Постпроцессоры

CSS

↓

Парсер

↓

АSТ

↓

Плагины

↓

toString

↓

CSS

PostCSS


npm install postcss
        

npm install autoprefixer

Запуск


postcss --use autoprefixer -c options.json -o main.css css/*.css

options.json


{
    "autoprefixer": {
        "browsers": "> 5%"
    }
}
        

{
    "autoprefixer": {
        "browsers": "Firefox > 20, last 2 Chrome versions"
    }
}

Webpack


module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },

    postcss: function () {
        return [require('autoprefixer'), require('precss')];
    }
}

Autoprefixer


.box {
    transition: transform 1s
}
        

.box {
    -webkit-transition: -webkit-transform 1s;
    transition: -ms-transform 1s;
    transition: transform 1s
}

Color short


.box {
    border-bottom: 1px solid rgb(200);
    background: #20;
    color: #f;
    box-shadow: 0 1px 5px rgba(0, 0.5);
}
            

.box {
    border-bottom: 1px solid rgb(200, 200, 200);
    background: #202020;
    color: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

Size


.one {
    size: 20px 10px;
}

.two {
    size: 10px;
}
        

.one {
    width: 20px;
    height: 10px;
}

.two {
    width: 10px;
    height: 10px;
}

postcss-sprites


.comment {
    background: url(images/sprite/ico-comment.png) no-repeat 0 0;
}

.bubble {
    background: url(images/sprite/ico-bubble.png) no-repeat 0 0;
}
        

.comment {
    background-image: url(images/sprite.png);
    background-position: 0 0;
}

.bubble {
    background-image: url(images/sprite.png);
    background-position: 0 -50px;
}

Font Magician


body {
    font-family: "Alice";
}
        

@font-face {
    font-family: "Alice";
    font-style: normal;
    font-weight: 400;
    src: local("Alice"), local("Alice-Regular"),
        url("http://fonts.gstatic.com/s/alice/v7/sZyKh5NKrCk1xkCk_F1S8A.eot?#") format("eot"),
        url("http://fonts.gstatic.com/s/alice/v7/l5RFQT5MQiajQkFxjDLySg.woff2") format("woff2"),
        url("http://fonts.gstatic.com/s/alice/v7/_H4kMcdhHr0B8RDaQcqpTA.woff")  format("woff"),
        url("http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf")   format("truetype")
}
body {
    font-family: "Alice";
}

PostCSS BEM


@b nav {
    @e item {
        display: inline-block;
    }
    @m placement_header {
        background-color: red;
    }
}
        

.nav__item {
    display: inline-block;
}

.nav_placement_header {
    background-color: red;
}

CSSNano


h1::before, h1:before {
    margin: 10px 20px 10px 20px;
    color: #ff0000;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    font-weight: normal;
    font-weight: normal;
}
/* invalid placement */
@charset "utf-8";
        

@charset "utf-8";h1:before{margin:10px 20px;
color:red;border-radius:1pc;font-weight:400}

CSSNext

Any-Link


nav :any-link > span {
    background-color: yellow;
}

        

nav :link > span,
nav :visited > span {
    background-color: yellow;
}

Matches


.rating-star:matches(:first-child, .special) {
    color: red;
}
        

.rating-star:first-child, .rating-star.special {
    color: red;
}

Поддержка IE8

postcss-color-rgba-fallback


.rgbaFallback {
    background: rgba(0,0,0,0.5);
}
        

.rgbaFallback {
    background: #000000;
    background: rgba(0,0,0,0.5);
}

postcss-opacity


.opacityFallback {
    opacity: 0.5;
}
        

.opacityFallback {
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

node-pixrem


body {
    font-size: 16px;
}

.remFallback {
    height: 10rem;
    font: 2rem Arial;
}
        

body {
    font-size: 16px;
}

.remFallback {
    height: 160px;
    height: 10rem;
    font: 32px Arial;
    font: 2rem Arial;
}

Во всем важна мера!

Полезные ссылки

Документация Stylus, nib

PostCSS, список плагинов

CSSNano

CSSNext

"Используем PostCSS правильно"

Вопросы?

Домашнее задание

webdev-tasks-4


Время на решение
7 дней