Написание CSS с мифом для веб-дизайнеров

В CSS появилось множество новых функций, таких как CSS Gradients, Shadows, Border Radius и Animation, которые могут быть реализованы исключительно с помощью CSS. Есть также несколько функций, которые еще не реализованы из-за поддержки браузером переменных CSS и функций CSS calc (). Но если вы не можете ждать будущего, давайте проверим Миф,

Мифв отличие от других препроцессоров, которые изобретают свой собственный синтаксис, использует тот же синтаксис, что и стандартная спецификация. Вы можете использовать переменные, выполнять математические или цветовые операции и писать новые свойства CSS в официальном виде. Его цель — позволить разработчикам писать чистый CSS, а также использовать синтаксис будущего стандарта прямо сейчас.

Читайте также: 5 причин, почему CSS может быть самым сложным языком из всех

Начиная
Для начала нам нужно установить двоичный файл Myth, чтобы иметь возможность скомпилировать его в соответствии с текущим стандартом CSS. Не существует такого приложения с графическим интерфейсом, как Codekit или Koala, которое поддерживает Myth на момент написания, поэтому это единственный способ скомпилировать Myth в формат CSS, совместимый с браузером.

В Терминале введите следующую команду:

npm установить -g миф

Затем вы можете использовать эту команду ниже, например, чтобы скомпилировать source.css в output.css.

Миф source.css output.css

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

миф — часы исходный.css output.css

Миф не вводит новое расширение. Он работает с .css, как показано выше.

Написание CSS с мифом

Myth также не вводит проприетарные функции и правила, как другие препроцессоры CSS, поэтому вы сможете почти сразу привыкнуть к Myth. Это как обычный CSS.

переменные

Давайте начнем с переменных. В CSS переменная объявляется так:

root {
переменная длина: 10 пикселей;
var-color: # 000;
}
.учебный класс {
background-color: var (цвет);
ширина: var (длина);
}

Myth компилирует этот код в совместимый с браузером формат:

.учебный класс {
цвет фона: # 000;
ширина: 20 пикселей;
}

Вы можете обратиться к нашей предыдущей статье об использовании CSS-переменных для получения более подробной информации.
Математические операции
Как уже упоминалось, мы также можем выполнять математические операции с новой функцией CSS3 calc (). Мы также рассмотрели эту функцию в нашей предыдущей статье: Использование CSS3 Calc Function.

Давайте продолжим наш первый пример с этим:

root {
переменная длина: 10 пикселей;
var-color: # 000;
}
.учебный класс {
background-color: var (цвет);
ширина: calc (var (длина) / 2);
}

Миф компилирует вышеуказанные коды в:

.учебный класс {
цвет фона: # 000;
ширина: 10 пикселей;
}

Регулировка цвета
Myth также поддерживает некоторые цветовые операции или настройки, такие как LESS или Sass. Новая стандартная функция для него предлагается включить в спецификацию CSS с именем color (), включая набор функций настройки цвета, таких как tint (), shade () и blend (), и это лишь некоторые из них.

Ниже приведен один пример: мы увеличиваем яркость цвета фона на 80% и уменьшаем цвет рамки на 50%.

root {
переменная длина: 20 пикселей;
вар-черный: # 000;
var-white: #fff;
}
.учебный класс {
background-color: color (var (black) lightness (+ 80%));
бордюр: var (border-width) однотонный (var (белый) яркость (- 50%));
ширина: calc (var (длина) / 2);
}

Этот код будет производить:

.учебный класс {
цвет фона: RGB (204, 204, 204);
граница: 2px solid rgb (128, 128, 128);
ширина: 10 пикселей;
}

Autoprefixer
Myth также автоматически добавит префикс вендора в свойства CSS. Мы можем просто написать, например, CSS Box Shadow, следующим образом:

.учебный класс {
box-shadow: 2px 1px 0px var (чёрный);
}

Выход:

.учебный класс {
-webkit-box-shadow: 2px 1px 0px # 000;
тень от коробки: 2px 1px 0px # 000;
}

Последняя мысль
Мне нравится идея Мифа. С его помощью мы можем написать чистый CSS будущего сегодня, не беспокоясь о поддержке браузера. А поскольку он использует стандартный синтаксис, позже, когда все браузеры его реализовали (как стандарт), нам не нужно будет переписывать весь код. Я думаю, что я собираюсь начать использовать его в каждом из моих будущих проектов. А как насчет вас? Примешь ли ты то же самое?