CSS-препроцессоры

Стас Мельников

Наставник по HTML-верстке в "TeenCoder"

Современная верстка

2006

2009

2010

Вложенные каскады

.menu__link{ color: #000; }

.menu__link:hover{ color: #222; }

.menu_fixed .menu__label{ font-weight: bold; }

.menu__link{
    color: #000;
    &:hover{
       color: #222; 
    }
}

.menu_fixed{
    .menu__label{ font-weight: bold; }
}

LESS

CSS

Переменные

.logo__label{
    color: #222;
}

.footer{
    background-color: #222;
}

@color: #222;

.logo__label{
    color: @color;
}

.footer{
    background-color: @color;
}

LESS

CSS

Арифметические операции

.header{
  margin-top: 7px;
  margin-left: 10px;
  margin-bottom: 2.5px;
  margin-right: 3px;
}

@header-margin: 5px;

.header{
  margin-top: @header-margin + 2;
  margin-left: @header-margin * 2;
  margin-bottom: @header-margin / 2;
  margin-right: @header-margin - 2;
}

LESS

CSS

Миксины

.icon-twitter:before{
    background-image: url("../icons/twitter_w.svg");
}
.icon-fb:before{
    background-image: url("../icons/fb_w.svg");
}

.path(@name){
    @base-path: "../icons/";
    background-image: url("@{base-path}@{name}");	 
}
.icon-twitter{
    &:before{ .path("twitter_w.svg"); }
}
.icon-fb{
    &:before{ .path("fb_w.svg"); }
}

LESS

CSS

@import

@import (less) 'link.css';
@import 'p.less';

style.less

a{ color: #000; }

link.css

p { line-height: 1.5 }

p.less

a{ color: #000; }
p { line-height: 1.5 }

style.css

Компиляторы

— Gulp 

— Prepros

— Официальный сайт LESS

— Официальный сайт SASS

Почитать