Всем привет! В этом материале рассмотрим, как использовать математические операции в Sass .

Изучаем 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%;
}

А у меня на этом все. Спасибо за внимание!