Вивчаємо sass. Основи.

У цій статті ми продовжимо розбиратися з препроцесором Sass і поговоримо про основи: як використовувати змінні, задавати властивості і т.д.

створіть файл _variables.scss і помістіть його в папку base в папці styles. Тут ми будемо зберігати всі потрібні нам змінні.

Відео: SASS: основи препроцесора

Давайте відразу і поставимо кілька

/ * GLOBAL * / 
$ body-bg-color:# edeff0- 
$ body-text-color:# 222- 
$ body-font-family:"Open Sans", sans-serif- 
$ body-font-size:100% - 
$ body-line-height:150$- 
 
$ link-color:# 000- 
$ link-weight:600-

Як задавати змінні, думаю, тут зрозуміло, особливо тим, хто працює з php :)

Тепер давайте створимо папку framework і файл _global.scss в ній. Тут ми будемо ставити глобальні стилі.

body { 
 font-family: $ body-font-family- 
 font-size: $ body-font-size- 
 background-color: $ body-bg-color- 
 color: $ body-text-color- 
 line-height: $ body-line-height- 
 margin:0- 
} 
 
a { 
 color: $ link-color- 
 font-weight: $ link-weight- 
}

Отже, тепер у нас є файл зі змінними і файл з глобальними стилями. Нам потрібно їх підключити до нашого головного файлу - app.scss

Відео: Sass. Вчимо основи Sass - швидко і просто

@import`Base / variables`- 
@import`Framework / global`-

Тепер скомпілюємо файли

sass --watch assets/styles/app.scss:public/css/app.css

Якщо ви хочете, щоб ваш файл також був стиснутий, то пропишіть наступне:

Відео: Sass: основи препроцесора [Початок роботи] [2]

sass --watch --style compressed assets/styles/app.scss:public/css/app.css

В кінці створимо файл _layout.scss в папці framework, в якому будуть міститися базові стилі для нашої розмітки сторінки.

.wrapper { 
 width:100% - 
 max-width:100% - 
 padding:020px- 
}

Не забудьте додати його в файлі app.scss

@import`Framework / layout`-

І створіть div з класом wrapper у файлі index.html

Відео: Основи SASS. синтаксис препроцесора

class="Wrapper"gt;Content

Ну, що ж, на цьому все. Побачимося в наступній статті! Успіхів!

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

Схожі