Вивчаємо sass. Математичні операції.

Відео: Sass для самих маленьких - докладний посібник

Відео: Операції над числами в Compass / Sass

Всім привіт! У цій статті ми розглянемо, як використовувати математичні операції в Sass.

Мова стилів Sass дозволяє нам не тільки писати фіксовані значення для властивостей, але і вираховувати їх, можна сказати, на льоту.

Відео: 21. CSS з LESS і SASS. Використання операторів SASS

Це дуже зручна можливість, до якої ви швидко звикнете, і, думаю, навряд чи захочете від неї відмовитися.

Ви можете використовувати такі стандартні оператори, як додавання (+), Віднімання (-), Множення (*), Розподіл (/) І відсотки (%).

Відео: #Java Урок 23 Великі числа. арифметичні операції

Давайте розглянемо приклад.

.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 з Нулі до Гуру.

А у мене на цьому все. Дякую за увагу!

Поділися в соціальних мережах:

Схожі