Изучаем Sass. Математические операции.
Всем привет! В этой статье мы рассмотрим, как использовать математические операции в Sass.
Язык стилей Sass позволяет нам не только писать фиксированные значения для свойств, но и высчитывать их, можно сказать, на лету.
Это очень удобная возможность, к которой вы быстро привыкнете, и, думаю, вряд ли захотите от нее отказаться.
Вы можете использовать такие стандартные операторы, как сложение(+), вычитание(-), умножение(*), деление(/) и проценты(%).
Давайте рассмотрим пример.
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}
В этом примере мы высчитываем ширину для aside и article.
Мы создали гибкую сетку на 960px, которая в скомпилированном CSS будет выглядеть так:
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 31.25%;
}
Думаю, вы поняли, как удобно использовать математические операции прямо в стилях. В Sass такая возможность имеется давно, а в чистом CSS3 появилась только недавно. Например, существует функция calc(), которая тоже позволяет что-нибудь высчитать без препроцессора. Если вы хотите узнать про эту и другие возможности чистого CSS3, то советую присмотреться к курсу HTML5 и CSS3 с Нуля до Гуру.
А у меня на этом все. Спасибо за внимание!
-
Создано 01.04.2016 20:00:00
-
Михаил Русаков
Комментарии (1):
"Думаю, вы поняли, как удобно использовать математические операции прямо в стилях" Ничего мы не поняли. 2 абзаца и никакой конкретики.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.