>WikiSysop: /* См. также */

2017-01-26T14:49:32Z

См. также

Нова сторінка

SMACSS — это методология организации кода Sass. Официальный сайт: https://smacss.com/

SMACSS можно использовать вместе с методологией Яндекса [https://ru.bem.info/ БЭМ].

Видеообзор обеих методологий и пример совместного использования: [https://www.youtube.com/watch?v=vXW7w3ym8hg BEM (БЭМ) & SMACSS]

== Структура папок и файлов Sass проекта ==

Содержимое директории <code>src/sсss</code>:

<source lang="bash">
├── base
│   ├── _base.scss
│   ├── _bootstrap.scss
│   └── _custom.scss
├── layout
│   ├── _home.scss
│   └── _second.scss
├── modules
│   ├── _footer.scss
│   ├── _header.scss
│   └── _navbar.scss
├── utilities
│   ├── _atomic.scss
│   └── _tech.scss
└── style.scss
</source>

В корне директории <code>src/sсss</code> находится файл <code>style.scss</code>, в котором подключаются файлы в требуемой последовательности:

<source lang="javascript">
// Base
@import "base/bootstrap"; // Bootstrap
@import "base/custom"; // Main variables of project
@import "base/base"; // Override main HTML styles

// Utilities
@import "utilities/atomic"; // Atomic CSS elements such as .center, .red, .margin-top-5 etc.
@import "utilities/tech"; // Technical styles for webmaster use only

// Modules — reusable, modular parts of our design:
@import "modules/header";
@import "modules/navbar";
@import "modules/footer";

// Layout
@import "layout/home";
@import "layout/second";
</source>

== См. также ==

* [[Sass]]

[[Категория:CSS]]
[[Категория:Sass]]

SMACSS - Історія редагувань

>WikiSysop: /* См. также */