При верстке HTML-шаблонов часто ловил себя на мысли, что редактору Sublime Text не хватает одной удобной вещи - инструмента для выбора цвета в процессе кодинга.

Допустим, есть блок

1
div
и мне необходимо сделать для него произвольную фоновую заливку через CSS-свойство
1
background-color
. Откуда мне взять значение нужного цвета в HEX-формате (про RGBA уже молчу)? Если скажете, что держать в голове значения этих цветов, то насмешите (можно помнить 5-10 значений, не больше). Хранить в виде таблицы цвета и их значения в HEX\RGBA? Этот список вечно куда-то девается и в нужный момент его постоянно нет под рукой.

В ходе своей деятельности я постоянно пробую новые HTML-редакторы, платные и бесплатные. Платные редакторы, конечно, более “отшлифованные” и удобные в работе. Так вот, в таких редакторах, как JetBrains WebStorm, Adobe Dreamweaver, EmEditor есть функция автоматического перехвата события, когда в процессе кодинга я пытаюсь добавить цвет для элемента:

Функция выбора цвета в редакторе JetBrains WebStorm

Классная и удобная штучка, не правда ли? Почему бы и для редактора Sublime Text не прикрутить подобную (ведь изначально в нем нет такой надстройки)? Совсем недавно я зарегистрировался на сервисе Toster.ru, который является детищем Харба и сделан аналогом известного StackOverflow.

Незаменимая вещь для кодера - там можно найти ответы на все вопросы, причем вопросы практического характера, что особенно ценно. То есть, другими словами, Toster.ru - это русский StackOverflow. И вот, один из вопросов на этом сервисе был посвящен возможности выбора цвета в редакторе Sublime Text. Ответили там кратко, но точно - это плагин “ColorPicker”.

Ставится “ColorPicker” быстро и стандартно для Sublime Text - через менеджер пакетов. Кстати, есть достаточно интересный адрес - https://sublime.wbond.net/, который является online-репозиторием для редактора Sublime Text. Чем удобен этот адрес - можно найти и почитать о любом из плагинов под этот редактор.

Если интересно почитать более подробно об плагине “ColorPicker”, можно зайти на страницу этого проекта на GitHub - https://github.com/weslly/ColorPicker. После установки плагин “ColorPicker” не слышно и не видно в редакторе Sublime Text.

Чтобы вызвать его для выбора цвета, нужно нажать сочетание клавиш:

  • для Windows: Ctrl+Shift+C
  • для OS X: Cmd+Shift+C
  • для Linux: Ctrl+Shift+C

Появится стандартное окно выбора цвета под операционную систему Windows (на Mac OS X я еще не заработал):

Окно плагина ColorPicker в редакторе Sublime Text

Выбираем и вставляем нужный цвет. На странице проекта на GitHub https://github.com/weslly/ColorPicker можно увидеть скриншоты окна плагина под другие операционные системы - OS X, Linux OS, так как этот плагин можно установить и под эти платформы.

Все прекрасно. Только один момент - вызывать этот плагин придется все же “вручную”, через сочетание клавиш.

Наверное, как-то и можно “повесить” плагин “ColorPicker” на определенное событие в редакторе Sublime Text, как это сделано в том же JetBrains WebStorm. Но как это сделать - я пока не знаю. Наверное, наподобие создания сниппетов в Sublime Text?

На этом все.


В очередной раз возвращаюсь к видеокурсу от TutsPlus под названием “TutsPlus - PSD To WordPress Minimal Portfolio”, для себя нашел там много нового и интересного.

На этот раз вопрос будем касаться свойства

1
-webkit-font-smoothing
. При создании и стилизации HTML-шаблона автор курса Adi Purdila “употребил” это свойство и вкратце сказал, что с ним шрифт будет смотреться лучше.

Конечно, это не объяснение свойства

1
-webkit-font-smoothing
, поэтому я выкроил специально для этого вопроса время, чтобы разобраться подробнее. Первым делом отправился на htmlbook.ru - незаменимый источник знаний для html-верстальщика.

Естественно, там нашлась подробная информация по поводу сглаживания шрифтов и управлению данным процессом через CSS. Статья называется “Сглаживание шрифтов в Safari” и она послужила основой для моей собственной статейки.

Первое - что такое сглаживание шрифтов и зачем оно нужно. Для чего нужно, можно догадаться и так, без всяких ресурсов и статей, ибо само название говорит за себя. Сглаживание шрифтов - это чтобы сделать их начертание на устройстве вывода (монитор и любой другой экран) более плавным. То есть, границы шрифтов становятся гладкими и четкими. Конечно, текст созданный таким шрифтом, читать приятнее и глаза не так устают от подобного процесса.

А вот способ (и это второй момент), с помощью которого достигается такое улучшение начертания шрифтов, не так очевиден. Можно даже сказать больше - он совсем неожиданный. Раньше я случайно пару раз наблюдал такую картину, но мне тогда казалось, что это “глюк” монитора, его неспособность правильно “отрисовать” буквы шрифта.

Теперь-то я знаю, что такое отображение шрифта сделано намеренно, с помощью окрашивания пикселей, расположенных на краях букв, в разные цвета. То есть, получается, что цвет пикселей для всей буквы шрифта неоднородный (допустим - черный), а составлен из нескольких цветов.

Но вот парадокс - человеческий глаз не замечает данного факта, а как раз наоборот - такое отображение букв шрифта ему кажется более четким и плавным. Чтобы дальше не расписывать, что к чему и почем, приведу картинку, которую я нагло “свистнул” с сайта htmlbook.ru, ибо самому не получилось создать подобную:

Увеличенная буква шрифта с эффектом сглаживания

В популярных операционных системах такая технология используется достаточно давно под разными названиями, например в Windows она имеет запатентованное имя ClearType. Однако, с помощью свойства CSS

1
-webkit-font-smoothing
можно управлять способом отображения шрифтов по этой технологии в браузерах.

Как видно из браузерного префикса, данное свойство будет работать только под движком WebKit (Chrome, Safari и с недавнего времени - Opera). Но, чтобы свойство

1
-webkit-font-smoothing
заработало в браузере, в его настройках нужно выставить отображение шрифтов, отличное от стандартов операционной системы Windows.

Поэтому, в браузере Firefox такую настройку можно не искать - ее там просто нет. А вот в Safari такая настроечка есть (в Chrome мои попытки также оказались безуспешными):

Настройка Safari для управления сглаживанием шрифта

Ну, хватит про браузеры - перейдем к CSS и свойству

1
-webkit-font-smoothing
, ради которого и затеялась данная статья. Это свойство может принимать три значения:

  • 1
    
    none
    - сглаживание вообще отключено;
  • 1
    
    antialiased
    - средняя степень сглаживания;
  • 1
    
    subpixel-antialiased
    - сильная степень сглаживания.

И ниже приведу все три примера отображения текста в браузере Safari для каждого из значений свойства

1
-webkit-font-smoothing
. Но сначала установлю настройку сглаживания шрифта в этом браузере на “Среднее - оптимально для плоских экранов”:

Три примера отображения -webkit-font-smoothing в Safari

Для первого случая

1
-webkit-font-smoothing: none
это вообще жуть - ничего не читается совсем, поэтому отбрасываем и забываем о нем (в браузерах Firefox, Chrome и других все будет отображаться правильно, ибо они не имеют подобной настройки, как Safari).

Второй случай

1
-webkit-font-smoothing: antialiased
выглядит очень привлекательно - начертание сглаженное и четкое одновременно, приятно читать.

Третий случай

1
-webkit-font-smoothing: subpixel-antialiased
похож на второй, но текст выглядит немного жирным, что не так приятно, как в предыдущем случае.

Вывод:

1
-webkit-font-smoothing: antialiased
- это наш выбор. Другое дело, что применение этого свойства ограничено только браузерами на движке WebKit. И помимо этого, мало кто из пользователей знает о возможности управления отображением сглаженного шрифта в браузерах такого типа.

Из браузерного префикса

1
-webkit-
ясно, что основное свойство
1
font-smoothing
только в проекте. Конечно, статья “Сглаживание шрифтов в Safari” была написана в далеком 2011 году, за это время может все измениться. Но как обстоят дела на сегодняшний день, я сказать не могу, ибо времени выяснить такой вопрос у меня пока нет. Но, судя по тому, как добавлял свойство
1
-webkit-font-smoothing
в HTML-шаблон автор Adi Purdila:

-webkit-font-smoothing: antialiased;

… дела ушли не намного вперед.

На этом все.


Продолжение темы препроцессоров для CSS, которая для меня намного интереснее всех остальных.

На этот раз остановимся на препроцессоре LESS, ибо было бы странно рассказать о SASS (SCSS) и не упомянуть о не менее популярном его аналоге. Преимуществ у LESS столько же, сколько и недостатков.

Эта статья является моей попыткой на личном опыте познакомиться с LESS Hat и сравнить ее с Compass. Про сам LESS и его синтаксис я рассказывать не буду - это глупо, ибо документация для этого препроцессора прекрасно оформлена и переведена на русский язык на оф. сайте проекта.

Плюсы - этот препроцессор развивается более динамично, это более молодой проект. Синтаксис LESS интуитивно понятный и максимально приближен к CSS, поэтому новички могут освоить его совсем без труда. Документация для LESS гораздо более подробная, с примерами и переведена на множество языков, что облегчает его изучение (для SASS это серьезный недостаток, я сам с этим сталкиваюсь постоянно, когда изучаю Compass).

Ну и последний немаловажный момент, который оказывает существенное влияние на распространенность LESS, это тот факт, что он включен в состав модного и известного фреймворка Bootstrap. То есть, все компоненты этого фреймворка созданы с использованием данного препроцессора. А если учесть, что один из трех китов CMS - Joomla 3 - создана на Bootstrap, то можно только гадать, куда заведет этот процесс.

К недостаткам LESS лично я могу отнести такой факт, как большое время для компиляции (хотя на оф. сайте один из создателей Bootstrap отвечал на вопрос, что им выбран препроцессор LESS как раз из-за высокой скорости компиляции, ибо он написан на языке Javascript). Еще один момент в минус LESS - файл с расширением .less компилируется каждый раз при обращении к нему браузера.

В SASS производится создание файла

1
.css
из
1
.scss
“раз и навсегда”, там не нужно что-то собирать на лету, а он уже готовый подключается в HTML-документ. И последнее - LESS не имеет на сегодня такой продвинутой библиотеки миксинов, как Compass для SASS (SCSS). Точнее - подобная библиотека уже есть и ее название LESS Hat (глупо было бы, если бы такая библиотека не появилась). Однако она уступает по своим возможностям Compass.

Итак, мы уже выяснили, что LESS Hat - аналог Compass под SASS (SCSS). Библиотека LESS Hat была создана командой, которая разработала плагин под Adobe Photoshop с названием CSS Hat. Этот плагин выполняет автоматизированные операции по переводу свойств любого элемента на psd-макете в свойства CSS.

То есть, он старается упростить и ускорить задачу верстальщика, которую тот обычно выполняет вручную. Плагин CSS Hat не бесплатный, цену его я не знаю (это нетрудно узнать) и сам им не пользовался ни разу, поэтому ничего не могу сказать по этому поводу.

Проект LESS Hat на сегодняшний момент является самой большой и популярной библиотекой готовых миксинов под препроцессор LESS. В отличие от плагина CSS Hat, библиотека LESS Hat бесплатная для использования. На момент написания статьи самая свежая версия этой библиотеки - v2.0.7, которую я и забираю со страницы проекта для своих собственных экспериментов. Архивчик .zip весит около 200Kb, что прилично для подобной библиотеки. Но пугаться не стоит - из всего архива нам потребуется только один файлик, а все остальное - это сопутствующая информация. Если распаковать архив, то увидим следующий список файлов и папок:

build\
  mixins\
  .gitignore
  .travis.yml
  bower.json
  Gruntfile.js
  LICENSE
  package.json
  README.md
  README-template.md

Первая папка

1
build
- самая нужная, там находятся два файла
1
lesshat.less
и
1
lesshat-prefixed.less
(не успел разобраться, для чего нужен этот файл), которые являются готовыми к использованию коллекциями LESS-миксинов.

Вторая папка

1
mixins
- также содержит всю коллекцию миксинов, но предназначена для разработчиков. Другими словами, если у вас есть соответствующая квалификация и желание что-то подправить в любом из миксинов, то вам сюда. Все остальные файлы можно смело пропустить, они для работы не нужны.

Теперь создаю шаблон для будущей площадки экспериментов под LESS и LESS Hat. Все как обычно - подключаю файл стилей в формате

1
.less
и файл для автоматической компиляции в CSS на лету -
1
less-1.3.3.min.js
.

Затем вытаскиваю из папки файлик lesshat.less и кидаю его в папочку

1
css
, где также расположен файл
1
style.less
(все до кучи). Кстати, сразу оговорюсь, что все файлы и пример в целом (для этой статьи) у меня крутился под управлением локального сервера XAMPP. С ним у меня отношения сложились с первого раза, в отличие от других популярных серверов, таких как OpenServer, Endels(Denwer), WAMP.

Файл

1
lesshat.less
подключаю к
1
style.less
через директиву
1
@import
. Как говориться в оф. документации к LESS, расширение
1
.less
можно и не указывать, но оставлю “как есть”:

...

/* Imports
------------------*/
@import "lesshat.less";

...

Все готово для того, чтобы опробовать библиотеку LESS Hat. Применю оттуда готовый миксин

1
.border-radius(10)
для создания скругленных углов у блока с помощью CSS-свойства
1
border-radius
. В документации к этому миксину говориться, что он может принимать значения без указания единиц измерения, так как допишет их сам (
1
px
по умолчанию).

Также вспомним функции для работы с цветами в LESS. И воспользуемся еще двумя миксинами из LESS Hat:

1
.background-image()
для создания градиентов у блока и
1
.box-shadow()
для придания внешней тени.

Рабочий файлик

1
style.less
получиться следующим:

/* Imports
  ------------------*/
  @import "lesshat.less";

  /* Variables
  ------------------*/
  @width: 200px;
  @color: #778899;

  /* Block
  ------------------*/
  div{
    float: left;
    margin: 10px;
    text-align: center;
    width: @width;
    height: @width/2;
    .border-radius(10);
  }

  /* Colors
  ------------------*/
  .color{
    background-color: @color;
  }
  .lighten{
    background-color: lighten(@color, 20%);
  }
  .darken{
    background-color: darken(@color, 20%);
  }
  .saturate{
    background-color: saturate(@color, 20%);
  }
  .desaturate{
    background-color: desaturate(@color, 20%);
  }
  .fadein{
    background-color: fadein(@color, 20%);
  }
  .fadeout{
    background-color: fadeout(@color, 20%);
  }
  .spin-plus{
    background-color: spin(@color, 20);
  }
  .spin-minus{
    background-color: spin(@color, -20);
  }
  .gradient{
    .background-image(linear-gradient(to bottom, lighten(@color, 20%) 0%, darken(@color, 20%) 100%));
    .box-shadow(2, 2, 3, lighten(@color, 10%));
  }

Результат работы препроцессора LESS и его библиотеки миксинов LESS Hat показан ниже. Вот это да - работает!

LESS Hat - миксин .border-radius()

Список всех миксинов, доступных в этой библиотеке, представлен в начале файла

1
lesshat.less
, в разделе “TABLE OF MIXINS”. Количество mixin’ов немаленькое (86 штук), но мне кажется, что у Compass оно будет намного больше.

Подробное описание и примеры использования каждого из миксинов библиотеки LESS Hat доступно на GitHub в файле

1
README.md
. Добро пожаловать ознакомиться - там все хорошо описано.

В принципе - больше и сказать нечего. Подключайте и используйте LESS Hat - только так можно освоить и оценить эту библиотеку. Для себя я сделал вывод, что мне пока удобнее работать с SASS/Compass и возможностей у последнего больше, чем у LESS/LESS Hat.

На этом все.


Достаточно интересный способ организации обычного маркированного списка в две колонки.

Имеется определенное количество элементов

1
li
списка
1
ul
. Нужно организовать все
1
li
в две колонки. Первое, что приходит на ум - это воспользоваться новыми правилами CSS3.

Но проблема в том, они новые и не всеми браузерами поддерживаются. Тогда смысл их применять? Но можно воспользоваться CSS2 и этот способ был случайно мною “подсмотрен” на сайте Loco.ru у автора dIrm. Мною этот способ был немного доработан и помещен у себя в качестве копилки.

Итак, имеется обычный маркированный список в виде HTML-разметки. Количество элементов

1
li
я специально сделал нечетным:

<ul>
  <li>Колонка 1</li>
  <li>Колонка 2</li>
  <li>Колонка 3</li>
  <li>Колонка 4</li>
  <li>Колонка 5</li>
  <li>Колонка 6</li>
  <li>Колонка 7</li>
  <li>Колонка 8</li>
  <li>Колонка 9</li>
  <li>Колонка 10</li>
  <li>Колонка 11</li>
</ul>

Сделаем CSS-стилизацию списка, ничем не примечательную. Класс

1
.clearfix
добавим в HTML-разметку для элемента
1
ul
- это классическая очистка потока для плавающих потомков внутри блока-родителя. Элементы
1
li
у нас будут плавать внутри
1
ul
:

ul{
  list-style-type: none;
  width: 398px;
  margin: 100px auto;
  border: 1px solid #000;
  font: bold italic 16px/30px Georgia, serif;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,.8);
}

.clearfix:before,
.clearfix:after{
  content: "";
  display: table;
}

.clearfix:after{
  clear: both;
}

Вот теперь немного интереснее, когда приступим к элементу

1
li
. Вся “фишка” в организации их в два столбца благодаря двум CSS-правилам -
1
display: block
и
1
width: 45%
.

Все элементы сделаем плавающими влево

1
float: left
, поэтому CSS-правило
1
display: block
можно опустить за ненадобностью, но оставим его для наглядности примера. Получается, что каждый из элементов
1
li
является блочным, с фиксированной шириной и плавает влево.

В результате все эти элементы располагаются “по порядку”. “Колонка 1” в левом верхнем углу, следом за ним - “Колонка 2”. “Колонка 3” не вмещается по ширине в область блока-родителя, поэтому располагается под “Колонка 1”. Далее - опять все по порядку. Три правила

1
padding-bottom: 10px
,
1
text-align: center
,
1
background-color: #556677
- для красоты добавляем:

ul li{
  display: block;
  float: left;
  width: 45%;
  padding-bottom: 10px;
  text-align: center;
  background-color: #556677;
}

Ну и в конце еще несколько штрихов для придания полной иллюзии двухколоночного текста. Здесь воспользуемся правилом

1
nth-child
с аргументом
1
even
, чтобы избежать дополнительной нагрузки на разметку в виде классов, которые придется добавлять в противном случае:

li:nth-child(even){
  margin-left: 10%;
  background-color: #667788;
}

На этом все.


Статья написана в далеком 2011 году одним товарищем по имени Jonathan Snook.

Статейка мне понравилась и пришлась в пору - мне как раз нужно было ознакомиться с вопросом масштабируемого размера шрифта и возможности единообразного задания его размера для всего документа.

Материальчик понравился и я решил, что я лучше не смогу его написать, чем как просто перевести. Вопрос хорошо освещен - кратко и по делу, с необходимыми примерами.

Думаю, в следующих своих верстках я буду применять именно тот подход, который описан здесь. Ниже - мой вольный перевод.

Размер шрифта в rem

Определение единиц измерения текста всегда было темой горячих споров, даже в наши дни. К сожалению, на сегодняшний день все еще существуют многочисленные “за” и “против” для каждого из методов определения универсальной единицы измерения шрифта. Вопрос заключается в том, чтобы выбрать наиболее приемлемую из всех приемлемых.

Наиболее популярны два метода определения размера шрифта:

  • размер шрифта в пикселях
    1
    
    px
  • размер шрифта в
    1
    
    em

Давайте сделаем краткий обзор обоих методов, прежде чем я представлю еще один - волшебный третий способ.

Размер шрифта в
1
px

С самого первого дня, когда зародился Интернет, мы (веб-мастера) использовали пиксели для задания размеров текста. Это надежный и понятный способ.

К сожалению, пользователи Internet Explorer - даже IE9 - не имеют возможности изменять размер текста, используя для этого встроенную функцию браузера.

Для веб-мастеров, которые озабочены такой возможностью, это большая проблема. Последние свежие версии браузера IE имеют встроенную функцию масштабирования, которая увеличивает размер ВСЕГО на странице - эта возможность присутствует во всех остальных браузерах, поддерживающих веб-стандарты. Это несколько сглаживает недостатки браузеров и данного метода, в частности.

Исходя из своего личного опыта, могу сказать, что использование пикселей предоставляет для меня надежную структуру будущего сайта. Пользователи браузеров имеют достаточно средств, чтобы подстроить сайт под свои предпочтения. Но я отвлекся от темы. Что еще у нас есть в наличии?

Размер шрифта в
1
em

Невозможность изменения размеров текста в браузере IE постоянно вызывало чувство разочарования у веб-разработчиков. Чтобы обойти эту проблему, можно использовать единицы измерения

1
em
.

Впервые об этом способе написал в далеком 2004-м году Richard Rutter в своей статье How to size text using ems.

Этот способ основан на задании основного размера шрифта для

1
body
в процентах. В этом случае
1
1em
равен
1
10px
, вместо
1
16px
по-умолчанию.

Теперь, чтобы установить размер шрифта для элемента страницы в единицах, эквивалентных

1
14px
, нужно установить его в
1
1.4em
:

body { font-size: 62.5%; }
  h1 { font-size: 2.4em; } /* =24px */
  p  { font-size: 1.4em; } /* =14px */
  li { font-size: 1.4em; } /* =14px? */

Проблема с размерами шрифта в

1
em
заключается в том, что такая система достаточно сложна при применении ее на практике. В примере, приведенном выше, размер шрифта элемента
1
li
равен не 14px, а 20px.

Если добавить еще один вложенный уровень, то размер шрифта будет 27px! Происходит это вследствие наследования свойств в CSS-таблицах.

Чтобы избежать такого эффекта, нужно явно прописать для каждого дочернего элемента размер шрифта в 1em:

body { font-size:62.5%; }
  h1 { font-size: 2.4em; } /* =24px */
  p  { font-size: 1.4em; } /* =14px */
  li { font-size: 1.4em; } /* =14px? */
  li li, li p /* etc */ { font-size: 1em; }

Проблема наследования при системе задания размеров шрифта в em достаточно неудобна. Что же можно еще предложить для решения проблемы?

Размер шрифта в
1
rem

Стандарт CSS3 вводит в обиход несколько новых единиц измерения, одной из которых является

1
rem
, что является сокращением от “root em”. Давайте немного разберемся, что из себя представляет эта единица измерения.

Единица измерения

1
em
является относительной к размеру шрифта элемента родителя, что приводит к эффекту наследования. Единица измерения
1
rem
является относительной к основному корневому элементу, то есть к html.

Это означает, что можно установить размер шрифта только один раз, для элемента html. Для всех остальных элементов, которые являются потомками этого элемента, достаточно установить размер шрифта в процентах (

1
rem
) относительно корневого элемента:

html { font-size: 62.5%; }
  body { font-size: 1.4rem; } /* =14px */
  h1   { font-size: 2.4rem; } /* =24px */

В примере, показанном выше, базовый размер шрифта установлен в процентах

1
62,5%
, что очень похоже, как мы поступали с единицами
1
em
. Другими словами, единица измерения
1
rem
лишена недостатков
1
em
с ее каскадностью и наследованием правил.

Но как насчет скудной поддержки этой единицы измерения в браузерах?

Вы будете сильно удивлены, но поддержка

1
rem
в браузерах достойная: Safari 5, Chrome, Firefox 3.6+ и даже Internet Explorer 9. Хорошая новость заключается в том, что в IE9 поддерживается изменение размера текста, установленного в единицах измерения
1
rem
. Увы, бедная Opera (вплоть до версии 11.10, по крайней мере), не имеет поддержки единиц измерения
1
rem
.

Как же нам поступить с браузерами, которые не поддерживают единицы измерения

1
rem
? Для них мы можем выполнить откат
1
fallback
в виде пикселей
1
px
. То есть, мы одновременно будем задавать размер шрифта в
1
px
и в
1
rem
:

html { font-size: 62.5%; } 
  body { font-size: 14px; font-size: 1.4rem; } /* =14px */
  h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

И пожалуйста, теперь мы имеем прочную и предсказуемую структуру во всех браузерах.

Декабрь 13 2011 - Opera 11.60 теперь поддерживает единицы измерения

1
rem
.


Конец статьи и перевода. В дополнение я могу сказать, что на сайте CSS Tricks также есть интересный материал по поводу

1
rem
.

В частности, на нем приведены удобные

1
mixin
‘ы для SASS, с помощью которых можно быстро задать размер шрифта в
1
rem
1
fallback
в
1
px
):

html{
  font-size: 62,5%;
}

@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}

Пример использования этого SASS-mixin’а:

p{
  @include font-size(1.8);
}

… что при компиляции в CSS будет выглядеть следующим образом:

p{
  font-size: 18px;
  font-size: 1.8rem;
}

И еще несколько разновидностей SASS-mixin’ов, которые могут пригодиться. Подмешивания используются для задания размера шрифта и интерлиньяжа (высоты строки):

@mixin fontSize($sizeValue: 12 ){
    font-size: $sizeValue + px; //fallback for old browsers
    font-size: (0.125 * $sizeValue) + rem;
  }

  /* Как подключать
  --------------------*/
  p{
    @mixin fontSize(20);
  }

  /* Результат компиляции в CSS
  -------------------------------*/
  p{
    font-size: 20px;
    font-size: 2.5rem;
  }
@mixin lineHeight($heightValue: 12 ){
    line-height: $heightValue + px; //fallback for old browsers
    line-height: (0.125 * $heightValue) + rem;
  }

  /* Как подключить
  -------------------*/
  p{
    @mixin lineHeight(18);
  }

  /* Результат компиляции в CSS
  --------------------------------*/
  p{
    line-height: 18px;
    line-height: 2.25rem;
  }

А здесь представлен “полный”

1
mixin
, с помощью которого можно одновременно задать кегль и
1
line-height
. Удобная штучка - можно задать только размер шрифта и получить на выходе интерлиньяж и кегль в пикселях (и
1
rem
‘ах):

@mixin fontsize($size:1.6, $line: $size * 1.5){
    font-size:   ($size * 10) + px;
    line-height: ($line * 10) + px;
    font-size:   $size + rem;
    line-height: $line + rem;
  }

  /* Как подключить
  -------------------*/
  p{
    @mixin fontsize(1.8);
  }

  /* Результат компиляции в CSS
  -------------------------------*/
  p{
    font-size: 18px;
    line-height: 27px;
    font-size: 1.8rem;
    line-height: 2.7rem;
  }

P.S.

Постепенно изучаю вопрос создания тем под WordPress. Скачал версию 3.7.1, установил под локальный сервер XAMPP и открыл файл

1
style.css
стандартной темы “Twenty Twelve”. И в заголовке этого файла сразу же наткнулся на следующие интересные строки:

/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     14;
$line-height: 24;

---------- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
	padding: 5px 0;
	padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
	font-size: 16px
	font-size: 1.142857143rem; (16 / $rembase)
	line-height: 1.5; ($line-height / 16)

---------- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
	margin: 24px 0;
	margin: 1.714285714rem 0; ( 24 / $rembase )
}

---------- Further reading
http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

То есть, что нам сообщают разработчики WordPress в этих строках? Что данный файл стилевых правил использует для построения дизайна сайта два значения в качестве переменных:

$rembase:     14;
$line-height: 24;

… в единицах измерения

1
rem
с откатом
1
fallback
в пиксели
1
px
. И далее приводятся примеры того, как применяются обе эти переменные для построения стилевых правил и как производится вычисление нужных величин, являющихся производными от этих переменных.

В самом конце две ссылки по тематике

1
rem
для любознательных, первой из которых является вольный перевод, который вы читаете! Значит, я на правильном пути.