- 1996 CSS
- 2006 Sass
- 2009 Less
- 2010 Stylus
- 2013 PostCSS
Синтаксис
@include mq($from:lap, $until:desk) {
@include layout($layout:6) {
&__logo {
@include span(2 at 1);
}
&__menu {
@include span(4 at 3);
Синтаксис
.ui-Link
&-Content
@supports (background-position: 0 calc(50% + 0.75em))
^[0][href] &
background-image: linear-gradient($Colors.Link…)
^[0][href]:hover &
background-image: linear-gradient($Colors.Link…)
CoffeeScript
isEqual: (other) ->
if @scopes.length isnt other.scopes.length
return false
for scope, i in @scopes
if scope isnt other.scopes[i]
return false
true
- Переменные
- Миксины
- Вложенность
You might not need
a CSS preprocessor
(да)
Мечталки
a {
--red: #d33;
&:hover {
color: color(var(--red) a(54%));
}
}
Черновик CSS Color L4 и салфетка CSS Nesting.
Упрощалки
@svg-load nav url(img/nav.svg) {
fill: #cfc;
}
.nav {
background: svg-inline(nav);
}
Плагин postcss-inline-svg.
Ленивки
.foo {
position: absolute 10px 0;
}
.foo {
position: absolute;
top: 10px; right: 0; bottom: 10px; left: 0;
}
Сладости
a
color: blue
.multiline,
.selector
box-shadow:
1px 0 9px rgba(0, 0, 0, .4)
1px 0 3px rgba(0, 0, 0, .6)
Это — FSS
Fantasy Style Sheets
- Переменные
- Миксины
- Вложенность
With?
with (element.style) {
position = 'relative';
top = left = '5px';
}
Пожалуйста, не надо.
Переменные
:root {
--shower-ratio: 1.6;
--shower-width: 1024px;
--shower-height: calc(
var(--shower-width) /
var(--shower-ratio));
}
Шлюзы
@media (min-width: 320px) {
.page__body {
font-size: calc(
1rem + ((2 - 1) * 16)
* (100vw - 320px) / (848 - 320));
}
}
index.html
<!DOCTYPE html>
<head>
<link href="/screen.css" rel="stylesheet">
</head>
<header block="header">
<h1 elem="logo" mod="index">
<span elem="type">Dev.Opera</span>
index.html
<!DOCTYPE html>
<head>
<link href="screen.css" rel="stylesheet">
</head>
<header class="header">
<h1 class="header__logo header__logo--index">
<span class="type">HTML Academy</span>
style.css
@import 'styles/fonts.css';
@import 'styles/page.css';
@import 'styles/title.css';
@import 'styles/banner.css';
@import 'styles/content.css';
@import 'styles/form.css';
@import 'styles/footer.css';
жжжать
HTML
return gulp.src('index.html')
.pipe(posthtml([
require('posthtml-minifier')({
collapseWhitespace: true
})
]))
И другие полезные плагины для PostHTML.
CSS
return gulp.src('screen.css')
.pipe(postcss([
require('postcss-import')(),
require('postcss-url')(),
require('autoprefixer')(),
require('postcss-csso')()
]))
- Работает сразу
- Хороший потом
Караван идёт
