Написание CSS с мифом для веб-дизайнеров
В CSS появилось множество новых функций, таких как CSS Gradients, Shadows, Border Radius и Animation, которые могут быть реализованы исключительно с помощью CSS. Есть также несколько функций, которые еще не реализованы из-за поддержки браузером переменных CSS и функций CSS calc (). Но если вы не можете ждать будущего, давайте проверим Миф,
Мифв отличие от других препроцессоров, которые изобретают свой собственный синтаксис, использует тот же синтаксис, что и стандартная спецификация. Вы можете использовать переменные, выполнять математические или цветовые операции и писать новые свойства CSS в официальном виде. Его цель — позволить разработчикам писать чистый CSS, а также использовать синтаксис будущего стандарта прямо сейчас.
Читайте также: 5 причин, почему CSS может быть самым сложным языком из всех
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Начиная
Для начала нам нужно установить двоичный файл 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 будущего сегодня, не беспокоясь о поддержке браузера. А поскольку он использует стандартный синтаксис, позже, когда все браузеры его реализовали (как стандарт), нам не нужно будет переписывать весь код. Я думаю, что я собираюсь начать использовать его в каждом из моих будущих проектов. А как насчет вас? Примешь ли ты то же самое?
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)