Это обновленная версия статьи, впервые опубликованной 5 марта 2015 года.
Давным-давно, в густом тумане прошлого Интернета, бесстрашные искатели приключений боролись с опасностью практически одинаково: перебирали фиксированный макет размером 960 пикселей, сражались в сетке с сетками и запускали свою типографику в пикселях, чтобы отразить зло.
С тех пор адаптивный веб-дизайн изменил все это, выведя нас из этого густого тумана в эпоху просвещения. И все же, использование типографики в Интернете порой все еще является проблемой. С переходом от пикселей или точек к процентам и ems, я постоянно сталкиваюсь с тем, что Google «диаграмма преобразования пикселов в процент» Google или что-то подобное в начале каждого проекта, и часто даже во всем.
В отчаянии я наконец-то обратился к силе Sass в создании новой, всеобъемлющей функции в своем стремлении победить эти проблемы, и сегодня вы собираетесь создать эту функцию вместе со мной.
Это позволит вам свободно конвертировать пиксели, em и значения в процентах, не обращаясь к диаграмме каждый раз, и, надеюсь, избавит вас от головной боли в процессе.
Настройка вещей для преобразования типографских единиц в Sass
Во-первых, очень важно иметь font-size Большинство браузеров по умолчанию используют 16px Кроме того, большинство шаблонов поставляются с 16px
Затем вам нужно решить, какие подразделения вы собираетесь поддерживать. Так как это может быть полезно для печати в веб-среде или даже просто для проекта, который начинается в Photoshop и заканчивается в браузере, вы будете смотреть на пиксели, точки, ems и проценты.
Вы также хотите дать себе возможность свободно конвертировать между ними, так что вы уже можете сказать, что вашей функции нужно как минимум три аргумента:
@function convert($value, $currentUnit, $convertUnit) {}
Первый аргумент — это номер font-size Так, например, если вы хотите преобразовать 16 пикселей в процентное значение, вы должны сделать это:
.foo{
font-size: convert(16, px, percent);
}
Который даст вам:
.foo{
font-size: 100%;
}
Давай Говорим Это
Теперь пришло время заняться битом между скобками.
Во-первых, вы хотите иметь возможность работать с пикселями, ems, точками и процентами, поэтому вам потребуется четыре оператора, чтобы позаботиться обо всех них.
Если вы используете полноценный язык программирования, вы можете использовать оператор switch . Так как это Sass, вы будете придерживаться операторов if :
@function convert($value, $currentUnit, $convertUnit){
@if $currentUnit == px{
// stuff for pixels
}@else if $currentUnit == ems{
// stuff for ems
}@else if $currentUnit == percent{
// stuff for percentage
}@else if $currentUnit == pts{
// stuff for points
}
}
Теперь у вас есть оператор if для каждой возможной единицы ввода (хотите ли вы, чтобы пиксели, ems, точки или проценты начинались с). Так что это около 50% пути. Все, что вам нужно сделать сейчас, это добавить что-то удивительное в эти операторы if!
Бросать в математике для преобразования Sass типографских единиц
Итак, все становится довольно математически на этом этапе. Предполагая, что вы работаете с 16px в качестве font-size
@if $currentUnit == px{
@if $convertUnit == ems{
@return $value / 16 + 0em;
}
@else if $convertUnit == percent{
@return percentage($value / 16);
}
}
Опять же, вы используете один оператор if на конверсию (один на ems, один на процент), а затем выполняете небольшую математическую операцию, чтобы получить желаемый результат. Я не собираюсь останавливаться на значениях точек, так как они все равно работают только с печатным CSS.
С ems (и размером по умолчанию 16px) вы просто делите на 16 и добавляете единицу «em» ( + 0em
Процент с Sass немного сложнее. Вы не можете просто выбросить «%» в конце оператора, как вы сделали с ems, так как Sass вернет ошибку обратно (что-то вроде «что вы делаете, помещая это туда!»). Поэтому здесь вам нужно включить функцию процента Sass, чтобы получить действительную процентную единицу.
И с этим у вас есть функция, которая преобразует пиксели в ems или проценты! Этого обычно достаточно для многих разработчиков, но давайте посмотрим, как вы можете расширить эту функцию, чтобы охватить преобразование ems в пиксели и преобразование процента в пиксель:
@else if $currentUnit == ems{
@if $convertUnit == px{
@return $value * 16 + 0px;
}
@else if $convertUnit == percent{
@return percentage($value);
}
}
Математика должна меняться здесь для каждого утверждения, но это будет сортировать ems.
Далее, вот как вы можете конвертировать проценты в пиксели и в ems:
@else if $currentUnit == percent{
@if $convertUnit == px{
@return $value * 16 / 100 + 0px;
}
@else if $convertUnit == ems{
@return $value / 100 + 0em;
}
}
И, наконец, поворот в пикселях, в эмс и в процентах:
@else if $currentUnit == pts{
@if $convertUnit == px{
@return $value * 1.3333 + 0px;
}
@else if $convertUnit == ems{
@return $value / 12 + 0em;
}
@else if $convertUnit == percent{
@return percentage($value / 12)
}
}
И вы сделали! Вы создали функцию, которая позволяет вам свободно конвертировать любое значение между любыми единицами измерения.
Подводить итоги
Последняя функция преобразования типографских единиц в Sass выглядит следующим образом:
@function convert($value, $currentUnit, $convertUnit){
@if $currentUnit == px{
@if $convertUnit == ems{
@return $value / 16 + 0em;
}
@else if $convertUnit == percent{
@return percentage($value / 16);
}
}@else if $currentUnit == ems{
@if $convertUnit == px{
@return $value * 16 + 0px;
}
@else if $convertUnit == percent{
@return percentage($value);
}
}@else if $currentUnit == percent{
@if $convertUnit == px{
@return $value * 16 / 100 + 0px;
}
@else if $convertUnit == ems{
@return $value / 100 + 0em;
}
}@else if $currentUnit == pts{
@if $convertUnit == px{
@return $value * 1.3333 +0px;
}
@else if $convertUnit == ems{
@return $value / 12 + 0em;
}
@else if $convertUnit == percent{
@return percentage($value / 12)
}
}
}
Это выглядит немного устрашающе, но все, что он на самом деле делает, это берет начальный размер, затем преобразует его из первого модуля во второй и возвращает результат. Единственная сложная задача — отслеживать, какие расчеты делать.
Если вы хотите поиграть с этой функцией, вы можете сделать это в этой демонстрации Sassmeister .
Как всегда, не стесняйтесь красть, калечить, переставлять и иным образом использовать это во всем, что вам больше всего помогает при работе с типографикой в Интернете.
Вы можете легко расширить существующую функцию, например, включить преобразование единиц измерения rem, обработку ошибок для входных данных, которые не будут работать, или установить единицы измерения по умолчанию, которые вы используете постоянно.
Если у вас есть другие замечательные идеи для этой функции преобразования единиц Sass, сообщите нам об этом в разделе комментариев ниже.