Починаємо розбиратися з Myth - препроцесором майбутнього

Чому Myth?

За допомогою Myth ви можете повноцінно використовувати навіть ті CSS властивості, які все ще знаходяться на етапі розробки W3C і не підтримуються абсолютною більшістю браузерів. Але основною його перевагою перед іншими препроцесорами є, то що вам не доведеться вивчати нову мову розмітки, як це відбувається з SASS або LESS, - в Myth використовується стандартна розмітка CSS.

Тому вам не доведеться нічого переписувати, коли підтримка тих чи інших властивостей з'явиться в браузерах, а потрібно буде всього лише перекомпілювати вже наявні стилі, що зазвичай займає буквально кілька секунд, - всю іншу роботу за вас зробить Myth.
Ось кілька можливостей CSS, які доступні в Myth на даний момент:
- СSS змінні
- користувальницькіMedia queries
- функція color()
- функція calc() без динамічних розрахунків під час виконання - автоматичне додавання вендорних префіксів

Приклад

Ось невеликий приклад CSS з використанням Myth, що містить властивості, які поки ще не підтримуються більшістю браузерів:

:root {
  --bgcolor: #0072bc;
  --textcolor: color(var(--bgcolor) lightness(85%));
}

.button {
  display: block;
  width: 90%;
  max-width: 220px;
  padding: 10px;
  background: var(--bgcolor);
  color: var(--textcolor);
  border-radius: 6px;
  transition: background-color 0.4s ease-out,
              color 0.3s ease-out;
}

Після компіляції Myth перетворює цей приклад в такий, щоб його правильно зрозуміла більшість браузерів:

.button {
  display: block;
  width: 90%;
  max-width: 220px;
  padding: 10px;
  background: #0072bc;
  color: rgb(179, 224, 255);
  border-radius: 6px;
  -webkit-transition: background-color 0.4s ease-out,
                      color 0.3s ease-out;
  transition: background-color 0.4s ease-out,
              color 0.3s ease-out;
}

Встановлення Myth

Для початку вам необхідно встановити node.js за допомогою інсталятора. Після цього запустіть командний рядок Node.js:

Щоб встановити Myth, скористаємося npm (стандартний менеджер пакетів Node.js). Виконаємо наступну команду:

npm install -g myth 

Якщо установка Myth завершилася коректно, то ми повинні побачити щось, на зразок цього:

Створення чуйного дизайну за допомогою Myth

Давайте створимо просту чуйну розмітку, використовуючи Myth:

Демо Сирцевий код

Пояснення

Ось так виглядає структура папок цього демо:

/demo/
|-- /css/
  |-- dev.css
  |-- styles.css
  |-- styles.min.css
|-- /images/
|-- index.html

• Папка /css/ містить файли зі стилями нашого проекту
• dev.css - вхідний файл стилів, з яким ми працюємо
• styles.css - перекомпільований Myth, вихідний файл стилів, який сайт буде підсовувати браузеру
• styles.min.css - мініфікована версія styles.css
• /images/ - графіка, яка використовується в нашому проекті.
• index.html - і звичайно ж сторінка, над якою ми працюємо

Зв'язування вхідного і вихідного файлів

Скористаємося наступною командою Node.js, щоб перейти в місце, де розташовуються наші стилі: cd /path/to/your/folder/css Де /path/to/your/folder/css - власне шлях до файлів стилів на локальній машині або сервері. Наступний крок - вказати Myth, що dev.css - це файл, з яким будемо працювати ми, а styles.css - кінцевий файл, в який Myth буде автоматично компілювати наші стилі при кожній зміні: myth --watch dev.css styles.css Якщо ж ви хочете компілювати самостійно, то позбавтеся від --watch: myth dev.css styles.css Врахуйте те, що dev.css вже повинен існувати в той час, як styles.css створиться автоматично, якщо не буде знайдений. Звісно, ви можете використовувати будь-які назви для ваших файлів, а не тільки ті, що розглядаються в даному прикладі.

Додавання CSS Myth

Для того, щоб побачити розмітку нашого прикладу, можете заглянути в вихідні коди. Нижче подано вміст dev.css. Як ви бачите, в ньому використовуються експериментальні функції, такі як змінні, користувальницькі media queries і функція color():

:root {
  --max-width: 960px;
  --gutter: 2%;
  --base-size: 17px;
  --small-size: 14px;
  --base-lineheight: 1.4;
  --default-color: #464646;
  --default-bgcolor: #fff;
  --link-color: #0072bc;
  --dark-bgcolor: #759ea1;
  --dark-bgcolor-text-color: color(var(--dark-bgcolor) lightness(85%));
  --highlight-color: firebrick;
}

@custom-media --small-devices (max-width: 400px);
@custom-media --medium-devices (min-width: 401px) and (max-width: 750px);

* { 
  margin: 0;
  padding: 0;
}

body {
  background: var(--default-bgcolor);
  color: var(--default-color);
  font: normal var(--base-size)/var(--base-lineheight) "Roboto", sans-serif;
  text-align: center;
}

img {
  width: 100%;
  height: auto;
}

/* Typography */
h1, h2, h3, p {
  margin: 5px auto 20px auto;
}

h1 {
  font-size: calc(var(--base-size) * 3);
  line-height: calc((var(--base-size) * 3) * var(--base-lineheight));
}

h2 {
  font-size: calc(var(--base-size) * 2);
  font-weight: 400;
  line-height: calc((var(--base-size) * 2) * var(--base-lineheight));
  color: color(var(--highlight-color) saturation(-20%));
}

h3 {
  font-size: calc(var(--base-size) * 1.2);
  font-weight: 400;
  line-height: calc((var(--base-size) * 1.2) * var(--base-lineheight));
  color: color(var(--highlight-color) saturation(+50%));
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s ease-in;
}

a:hover {
  color: color(var(--link-color) lightness(-10%));
  transition: color 0.4s ease-out;
}

/* Layout */
header {
  display: block;
  width: 100%;
  min-height: 500px;
  padding-top: 100px;
  background: var(--dark-bgcolor)
              url(header-bg.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  color: var(--dark-bgcolor-text-color);  
}

.container {
  position: relative;
  width: 96%;
  max-width: var(--max-width);
  margin: 0 auto;
}

.fullcol, .halfcol, .fourthcol {
  float: left;
  box-sizing: border-box;
  margin-left: var(--gutter); 
}

.container .fullcol,
.container .halfcol:first-child,
.container .fourthcol:first-child  {
  margin-left: 0;
}

.fullcol {
  width: 100%;
  text-align: center;
}

.halfcol {
  width: calc((100% - var(--gutter)) / 2);
}

.fourthcol {
  width: calc(((100% - (var(--gutter) * 3)) / 4));
}

section {
  float: left;
  width: 100%;
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Special */
.logo {
  margin-top: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px;
}

.tagline {
  text-transform: uppercase;
}

.button {
  display: block;
  width: 90%;
  max-width: 220px;
  margin: 30px auto 50px auto;
  background: var(--link-color);
  color: var(--dark-bgcolor-text-color);
  border-radius: 6px;
  padding: 10px;
  transition: background-color 0.4s ease-out, color 0.3s ease-out;
}

.button:hover {
  background: color(var(--link-color) tint(50%));
  color: color(var(--dark-bgcolor-text-color) whiteness(100%));
  transition: background-color 0.3s ease-in, color 0.2s ease-in;
}

.credits {
  margin: 80px auto 20px auto;
  font-size: calc(var(--base-size) * 0.75);
  color: color(var(--dark-bgcolor-text-color) hue(+120%));
}

#work {
  background: color(var(--dark-bgcolor) lightness(+30%));
}

#contact {
  background: color(var(--highlight-color) saturation(-30%));
  color: var(--dark-bgcolor-text-color);
}

#contact h2 {
  color: color(var(--dark-bgcolor-text-color) saturation(+20%));
}

/* Media Queries */
@media (--small-devices) {
  .fullcol, .halfcol, .fourthcol {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }

  .button, .tagline {
    font-size: var(--small-size);
  }

  .logo {
    margin-top: 0;
    font-size: calc(var(--base-size) * 1.8);
    line-height: calc((var(--base-size) * 1.8) * var(--base-lineheight));
  }
}

@media (--medium-devices) {
  .fourthcol {
    width: calc((100% - var(--gutter)) / 2);
    margin-left: var(--gutter);
    margin-bottom: 20px;
  }

  .container .fourthcol:nth-child(odd) {
    margin-left: 0;
    clear: left;
  }
}

Налагоджування

Під час роботи з Myth, в разі виникнення помилок, інформація про них буде відображатися в командному рядку Node.js, тому її можна розглядати, як інструмент для налагоджування. Наприклад, якщо користувацький media query не був оголошений, ви побачите наступну картину:

Також у разі, якщо щось піде не так, налагоджувач Myth побалує вас наступною інформацією:

• що саме трапилося;
• на якому рядку це сталося;
• що Myth зробив у відповідь на помилку;
• пропоновані варіанти вирішення проблеми;

Оптимізація CSS для кращої продуктивності

Ще дещо, що ви можете зробити для поліпшення продуктивності, перед тим, як розмістити сайт на веб-сервері, - мініфікувати ваш файл стилів (записати в один рядок). У Myth цей процес автоматизований і втілюється в життя за допомогою функції --compress: myth --compress dev.css styles.css У нашому прикладі це призвело до зменшення розміру файлу на 20%.

Ще дещо про команди Myth

Команди також можуть бути записані в скороченому варіанті. Наприклад, ви можете писати: myth -c -w dev.css styles.css замість: myth --compress --watch dev.css styles.css Більш докладно про це можете прочитати у списку команд на офіційному сайті.

Висновки

Myth - чудовий препроцесор, що ідеально підходить для розробників, яким кортить почати використовувати всі експериментальний функції CSS. До того ж для роботи з Myth вам не знадобиться вивчати додаткові мови розмітки, що теж, безумовно, є великим плюсом.

Демо та вихідні коди проекту, який розглядався в якості прикладу в даній статті: Демо Сирцевий код