Stylus - самый выразительный css препроцессор

Stylus - самый выразительный css препроцессор

Всем привет, сегодня мы поговорим о такой вещи как Stylus (Стайлус). Вообще препроцессоры css - довольно интересная тема. У них есть как и противники, так и защитники. В данной статье я постараюсь заинтересовать Вас этой технологией.

В этой статье мы сравним несколько препроцессоров, а так же сделаем мини проект, с автоматической сборкой стилей.



Содержание статьи:




Препроцессоры? Что это и зачем?

Итак, css препроцессор - это инструмент, который генерирует код, написанный на специальном языке препроцессора в валидный CSS код.

Наглядно это выглядит примерно так:

stylus
1
2
3
4
5
6
7
8
input-height = 40px // Это переменная
main
  display block
  margin 0
  padding 0
  input
    height input-height
    font-size 1.2em

превратится вот в такой код:

css
1
2
3
4
5
6
7
8
9
main {
  display: block;
  margin: 0;
  padding: 0;
}
main input {
  height: 40px;
  font-size: 1.2em;
}

Все основные примеры кода в этой статье я буду писать в синтаксисе Stylus.


Сразу видно насколько меньше писать в Stylus символов. Emmet так же умеет разворачивать Stylus из своих сокращений.

Вообще препроцессоры призваны структурировать проект разбитием css кода на части. Например, можно держать стили для шапки футера медиазапросов в отдельных файлах и подключать их одной строчкой в основной файл. Выглядит это примерно так:

stylus
1
2
3
4
5
6
7
8
@import 'inc/header'
input-height = 40px
main
  display block
  margin 0
  padding 0
@import 'inc/footer'
@import 'inc/media'

При этом расширение файла можно не писать, парсер сам все прекрасно поймет.

Так же препроцессоры ускоряют написание и чтение стилей за счет вложенности.

И даже если Вы допустите ошибку при написании стилей, то точно её не пропустите и будете знать на какой строчке она была!

Это все в купе дает хороший прирост личной производительности, а так же упрощает разбиение стилей на модули (например, при использовании методологии БЭМ), но об этом чуть ниже.

Так же в арсенале любого препроцессора есть много интересных фич:

  • Переменные
  • Наследование
  • Миксины
  • Миксины с параметрами
  • Функции
  • Условия
  • Тернарный оператор
  • Хеши
  • Итераторы (циклы)

Использование которых выведет Ваш код на новый уровень. Приведу маленький пример:

stylus
1
2
3
4
5
6
7
8
9
reset(display = block)
  display display
  margin 0
  padding 0
div
 reset()
span
  reset(inline)

Как Вы могли догадаться, это миксин с параметрами или функция(в разных препроцессорах называется по разному). В этом примере я сбрасываю отступы для div и span.

Возможно Вы спросите:

А почему бы не использовать файл сброса стилей?

А я спрошу в ответ:

А что будет если Ваш готовый блок попадет в новый проект, где reset.css отсутствует или настроен по другому?

И тут уже действительно стоит призадуматься, а правда ли reset.css так удобен, как кажется на первый взгляд.

Если хотите попробовать какой-либо препроцессор на практике не думая о настройках окружения, то есть прекрасный Codepen, а так же онлайн транслятор BeautifyTools. Который позволяет компилировать различные препроцессоры и не только.

Какие существуют препроцессоры?

Stylus

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

Препроцессор Stylus написан на JavaScript. Имеется библиотека удобных миксинов Nib, изучив которую, можно писать стили еще лаконичнее.

Пример кода с использованием Nib:

stylus
1
2
3
@import 'nib'
#back-to-top
  fixed: bottom right

развернется в:

css
1
2
3
4
5
#back-to-top {
  position: fixed;
  bottom: 0;
  right: 0;
}

При написании стилей можно пользоваться Emmet.

Sass

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

Теперь и на русском

Препроцессор Sass написан на Ruby. Имеет 2 варианта синтаксиса:

sass
1
2
3
4
5
6
7
8
$input-height: 40px
main
  display: block
  margin: 0
  padding: 0
  input
    height: $input-height
    font-size: 1.2em
scss
1
2
3
4
5
6
7
8
9
10
$input-height: 40px;
main {
  display: block;
  margin: 0;
  padding: 0;
  input {
    height: $input-height;
    font-size: 1.2em;
  }
}

Как видно SCSS очень похож на традиционный CSS, но так же в нем присутствуют все фишки Sass.

Так же присутствует библиотека миксинов Compass, которая позволяет писать код еще интереснее.

При написании стилей можно пользоваться Emmet.

Less

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

Препроцессор Less написан на JavaScript. Он оправдывает своё название минималистичным интерфейсом, но не стоит его недооценивать. Некоторые именитые разработчики его используют в проектах и всем довольны. Например, Bootstrap 3 написан на less.

Правда Bootstrap 4 уже написана на Sass

Но это уже совсем другая история

Леонид Каневский

При написании стилей можно пользоваться Emmet.

Почему именно Stylus?

Ответ очень прост - он наиболее лаконичен.

  • Нет никаких лишних символов:
stylus
1
2
.main
  margin 0
css
1
2
3
.main {
  margin: 0;
}
sass
1
2
.main
  margin: 0
scss
1
2
3
.main {
  margin: 0;
}
less
1
2
3
.main {
  margin: 0;
}
  • Наиболее привычно объявляются переменные:
stylus
1
var = 1rem
sass
1
$var: 1rem
scss
1
$var: 1rem;
less
1
@var: 1rem;

Так же Stylus поддерживает несколько видов синтаксиса в одном файле. Это конечно имеет свои особенности при использовании Emmet, но если держать код в едином стиле, то никаких проблем не будет.

Так что код из интернета можно копировать и он будет работать, только следите, чтобы отступы были одинаковыми во всем документе (неважно, 2 это пробела или таб идентичный 3 пробелам. Главное, чтобы они были везде одинаковыми).

Сборка Stylus

Настройка проекта для работы со Stylus занимает несколько минут. Однако сперва нужно установить Node.js и Gulp. Если это уже стоит у Вас - отлично, переходите сразу к настройке проекта.

Установка Node.js

Лучший способ установить Node.js - это nvm.

cURL
1
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
Wget
1
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

После установки nvm запустите терминал и выполните следующую команду для установки Node.js.

1
$ nvm install stable

Или скачать и установить установщик.

Установка Gulp

  • Установим Gulp глобально:

Если у Вас уже стоит Gulp, то запустите

1
npm rm --global gulp

для того, чтобы исключить конфликт версий. Затем выполните команду глобальной установки gulp:

1
$ npm install --global gulp-cli

Настройка проекта

  • В любой удобной папке создайте новую папку. Название папки напишите латиницей. Я создам папку под названием test-stylus.

Так же зайдите в эту папку из консоли. Надеюсь Вы знаете как это сделать =))

Создайте в нашей папке с проектом вот такую структуру:

1
2
3
4
5
6
7
8
9
10
11
12
.
├── index.html
└── style
    ├── stylus
    |   ├── inc
    |   |   ├── mixins.styl
    |   |   ├── layout.styl
    |   |   ├── header.styl
    |   |   ├── index.styl
    |   |   └── footer.styl
    |   └── main.styl
    └── css
  • Инициализируйте новый проект следующей командой в консоли:
1
$ npm init

Установщик задаст Вам несколько вопросов, ответив на которые, в Вашем проекте появится файл package.json.

  • Поставьте gulp локально, следующей командой:
1
$ npm install --save-dev gulp
  • Поставим все пакеты, которые необходимы нам для проекта:

Gulp-stylus

1
$ npm install --save-dev gulp-stylus

Nib

1
$ npm install --save-dev gulp-stylus

Gulp-autoprefixer

1
$ npm install --save-dev gulp-autoprefixer

Gulp-cssmin

1
$ npm install --save-dev gulp-cssmin

Gulp-plumber

1
$ npm install --save-dev gulp-plumber

Gulp-notify

1
$ npm install --save-dev gulp-notify

  • Создаём файл инструкций для Gulp

В корне проекта создадим файл gulpfile.js вот с таким содержимым:



gulpfile.js


Показать



javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// Подключаем плагины
var gulp = require('gulp'),
  nib = require('nib'),
  stylus = require('gulp-stylus'),
  autoprefixer = require('gulp-autoprefixer'),
  notify = require("gulp-notify"),
  plumber = require('gulp-plumber'),
  cssmin = require('gulp-cssmin');
// Объявляем наш таск для сборки стилей
gulp.task('stylus', function() {
  // Говорим Gulp откуда взять наши Stylus файлы
  return gulp.src(['./style/stylus/*.styl'])
    // Заменяем текущий поток на кастомный, чтобы избежать умирания вотчера при ошибках в коде
    // В настройках плагина указываем, что нужно вызвать метод onError() у плагина notify
    // (Это выведет сообщение об ошибке во всплывающем окне)
    .pipe(plumber({
      errorHandler: notify.onError()
    }))
    // Подключаем плагин Stylus
    // В нем указываем, что нам необходим Nib, а так же указываем, что нам не нужно минифицировать код
    // Мы отключили минификацию для того, чтобы ошибки синтаксиса показывались с точностью до строки.
    // Ведь если мы будем минифицировать стили средствами плагина Stylus,
    // то ошибка всегда будет показываться в первой строчке, а это не очень удобно.
    .pipe(stylus({
      use: nib(),
      compress: false,
    }))
    // Добавляем префиксы для броузеров
    .pipe(autoprefixer({
      browsers: ['last 15 versions'],
    }))
    // Минифицируем стили
    .pipe(cssmin())
    // Указываем куда нужно положить стили, которые получились в итоге
    .pipe(gulp.dest('./style/css'))
    // Показываем уведомление о том, что стили успешно собраны
    .pipe(notify('Stylus SUCCESS'));
});
// Задаем таск вотчера, чтобы стили собирались автоматически, при сохранении stylus файлов
gulp.task('watch', function() {
  gulp.watch(['./style/stylus/*.styl', './style/stylus/inc/*.styl'], ['stylus']);
});



Для того, чтобы gulp-notify показывал сообщения пользователям Windows необходимо поставить программу Growl.


Теперь займемся созданием проекта.

  • Откроем наш index.html и запишем в него такой код:


index.html


Показать



html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="ru">
  <head>
    <link rel="style/css/main.css">
    <title>Наша компания</title>
  </head>
  <body>
    <div class="wrapper">
      <header class="header">
        <a class="logo" href="#">Наша компания</a>
        <nav>
          <a href="#">О нас</a>
          <a href="#">Контакты</a>
        </nav>
      </header>
      <main class="main">
        <section>
          <h1>О нас</h1>
          <p>Описание нашей компании.</p>
        </section>
        <section>
          <h2>Контакты</h2>
          <p>Контакты нашей фирмы</p>
        </section>
      </main>
      <footer class="footer">
        <small>&copy; Наша компания - 2016</small>
      </footer>
    </div>
  </body>
</html>


Как видите, в html мы подключаем только один файл стилей main.css. Это именно тот файл, который получится при сборке проекта.

  • Откроем наш main.styl и запишем в него такой код:
stylus
1
2
3
4
5
6
@import 'nib'
@import 'inc/mixins'
@import 'inc/layout'
@import 'inc/header'
@import 'inc/index'
@import 'inc/footer'
  • Файл inc/mixins.styl :
stylus
1
2
3
4
5
6
7
8
reset(display = block)
  display display
  margin 0
  padding 0
offset-lr(n = 10px)
  padding-left n
  padding-right n
  • Файл inc/layout.styl :
stylus
1
2
3
4
5
6
7
8
9
10
11
12
13
html
body
  reset()
  min-width 360px
  font-size 16px
  color #000
.wrapper
  reset()
  offset-lr()
  max-width 1200px
  min-width 360px
  margin auto
  • Файл inc/header.styl :
stylus
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.header
  reset()
  clearfix()
  offset-lr()
  background #ccc
  margin-bottom 10px
  padding-top 20px
  padding-bottom 20px
  .logo
    reset()
    float left
  nav
    float right
    a
      reset(inline-block)
      margin-left 10px
  • Файл inc/index.styl :
stylus
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.main
  reset()
  section
    reset()
    offset-lr()
  h1
    reset()
    font-size 2.5rem
    margin-bottom 10px
  h2
    reset()
    font-size 1.7rem
    margin-bottom 10px
  p
    reset()
  • Файл inc/footer.styl :
stylus
1
2
3
4
5
6
7
8
9
.footer
  reset()
  offset-lr()
  background #333
  margin-top 30px
  padding-top 15px
  padding-bottom 15px
  small
    color #FFF

Файл main.styl представляет из себя так называемую точку входа, то есть в него подключаются все остальные стили. Такое разбиение делает код читаемым и поддерживать такой проект в дальнейшем проще, чем проект, где все стили написаны в одном файле. Ведь в реальном проекте число строк стилей достигает нескольких сотен, а то и тысяч.

Сборка проекта

Перейдем в терминале в папку с проектом и напишем вот такую команду:

1
gulp stylus

После чего наш проект начнет собираться и если сборка будет успешна, то покажется всплывающее сообщение Stylus SUCCESS. Если же произойдет ошибка, то покажется сообщение об ошибке и в терминале мы сможем посмотреть детали этой ошибки.

Так же после сборки в папке style/css появится файл main.css который мы уже подключили в проект.

Теперь уже можно запустить вотчер и заняться улучшением стилей проекта:

1
gulp watch

Демо проекта прилагаю:

See the Pen yVZNpP by Alexandr (@login2030) on CodePen.

Заключение

В этой статье мы быстро пробежались по препроцессорам и собрали свой мини сайт с использованием Gulp и Stylus.

Важно помнить, что код в этой статье не претендует быть самым оптимальным и самым лучшим. Главное, чтобы у читателя выстроилась в голове четкая схема настройки проекта.