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

The — препроцесор CSS, що дозволяє вже зараз використовувати в ваших проектах нові й експериментальні можливості CSS.

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

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


Приклад
Ось невеликий приклад 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.4 s ease-out,
color 0.3 s 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.4 s ease-out,
color 0.3 s ease-out;
transition: background-color 0.4 s ease-out,
color 0.3 s ease-out;
}


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

image

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

npm install-g myth

image

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

image

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

image
Демо
Джерело

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

/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.2 s ease-in;
}

a:hover {
color: color(var(--link-color) lightness(-10%));
transition: color 0.4 s 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.4 s ease-out, color 0.3 s ease-out;
}

.button:hover {
background: color(var(--link-color) tint(50%));
color: color(var(--dark-bgcolor-text-color)whiteness(100%));
transition: background-color 0.3 s ease-in, color 0.2 s 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 не був оголошений, ви побачите таку картину:

image

Також у разі, якщо щось піде не так, відладчик 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 вам не потрібно вивчати інші мови розмітки, що теж, безумовно, є великим плюсом. І наостанок, продублюю посилання на демо і вихідні коди проекту, рассматривавшегося в якості прикладу в даній статті:

Демо
Джерело

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.