Приклад використання вкладених властивостей у файлі SCSS

22

Від автора: за допомогою вкладених властивостей можна уникнути повтору CSS. Наприклад, використовуйте font як простору імен, в якому є властивості font-family, font-size, font-weight і font-variant. У звичайному CSS ці властивості необхідно писати кожен раз в просторі імен. З допомогою Sass ці властивості можна вкласти і писати простір імен лише один раз.

Приклад

Наступний приклад показує, як використовує вкладеність файл SCSS –

Nested Properties

Example using Nested Properties

SASS stands for Syntactically Awesome Stylesheet

Тепер створіть файл style.css.

Style.scss

.line {
font: {
family: Lucida Sans Unicode;
size:20px;
weight: bold;
variant: small-caps;
}
}

Sass можна вказати, щоб він стежив за файлом і оновлював його при будь-яких змінах в Sass файлі. Для цього використовуйте команду нижче –

sass —watch C:\ruby\lib\sass\style.scss:style.css

Виконайте команду вище, вона створить файл style.css з наступним кодом –

Style.css

.line {
font-family: Lucida Sans Unicode;
font-size: 20px;
font-weight: bold;
font-variant: small-caps;
}

Висновок на екран

Давайте виконаємо наступні кроки, щоб побачити все на екрані –

Збережіть HTML вище в файл nested_properties.html.

Відкрийте цей файл у браузері, сторінка буде, як на скріншоті нижче.

Приклад використання вкладених властивостей у файлі SCSS