Fork me on GitHub

Saas - организация проекта, компиляция

Полезные ссылки

Организация CSS-файлов: шаблон "7-1"

Правила:

  • Все файлы с SCSS-фрагментами надо разместить в 7 разных папках.

  • Все эти файлы нужно импортировать в один файл, main.scss, расположенный в корневой директории, в которой лежат все эти папки.

Папки

  • base: в этой папке надо разместить весь, так сказать, «шаблонный» код. Под «шаблонным» кодом здесь понимается весь тот CSS-код, который приходится писать при создании нового проекта. Например: типографские правила, анимации, утилиты (то есть — классы вроде margin-right-large, text-center), и так далее.

  • components: название этой папки явно указывает на то, что в ней будет храниться. Речь идёт о стилях компонентов, используемых для сборки страниц. Это — кнопки, формы, всяческие слайдеры, всплывающие окна, и так далее.

  • layout: эта папка применяется для хранения стилей элементов макетов страниц. Это — шапка и подвал страницы, навигационная область, различные разделы страницы, сетка, и так далее.

  • pages: иногда в проекте нужны страницы, обладающие собственным специфическим стилем, который отличается от стиля остальных страниц. Описания стилей для таких вот особенных страниц и попадают в эту папку.

  • themes: если веб-проект предусматривает использование различных тем оформления (скажем, нечто вроде «dark mode», или «admin»), стили для них надо положить сюда.

  • abstracts: в эту папку попадают всяческие вспомогательные вещи — функции, переменные, миксины.

  • vendors: редкий сайт обходится без внешних зависимостей. В этой папке хранятся стили, которые созданы не тем, кто разрабатывает конкретный сайт. Сюда, например, можно сохранить файлы проекта Font Awesome, стили Bootstrap и прочее подобное.****

Для маленьких проектов

  • Если вы предпочитаете воспользоваться тем, что осталось от шаблона «7–1», то у вас сохраняются папки abstracts, components, layout и base.

  • Если вы решаете обойтись одной большой папкой, то все файлы с фрагментами стилей, вместе с файлом main.scss, попадают в эту папку.

Компиляция SCSS в CSS требования:  nodej.s  и менеджер пакетов npm (или yarn).

пакет node-sass:

node-sass <input> <output> [options]

опции:

  • -w  - организация наблюдение за папкой или файлом;

  • --output-style - определяет стиль выходного файла: nested, expanded, compact, compressed;

Создание проекта

  • mkdir my-app && cd my-app

  • Инициализируйте проект: npm init

  • npm install node-sass — save-dev

  • создать index.html? папки со стилями, файл main.scss

touch index.html
mkdir -p sass/{abstracts, base, components, layout} css
cd sass && touch main.scss
  • добавить в package.json:{
....
"scripts": {
"watch": "node-sass sass/main.scss css/style.css -w",
"build":  "node-sass sass/main.scss css/style.css --output-style compressed"
},
...
}
              ```



- Добавьте ссылку, ведущую к скомпилированному CSS-файлу, в тег head файла index.html

Когда вы занимаетесь работой над проектом:
npm run watch

и откройте в браузере файл index.html.
Минифицикация CSS:
npm run build

Интерактивная перезагрузка страницы

- npm install -g live-server

- npm install npm-run-all — save-dev

- Добавьте следующее в package.json:

```javascript
{
....
"scripts": {
"start": "npm-run-all --parallel liveserver watch" ,
"liveserver": "live-server",
"watch": "node-sass sass/main.scss css/style.css -w",
"build":  "node-sass sass/main.scss css/style.css --output-style compressed"
},
...
}*
  • Теперь, выполнив команду npm run start, вы, в процессе работы над проектом, мгновенно будете видеть изменения, вносимые в него, не перезагружая страницу вручную.

Пакет autoprefixer

инструмент (речь идёт о postcss-плагине), который парсит CSS-код и добавляет префиксы производителей браузеров к CSS-правилам, используя данные с Can I Use.

Завершающие действия

Добавьте в проект две зависимости — postcss-cli и autoprefixer:

npm install autoprefixer postcss-cli — save-dev

Добавьте в package.json следующий код и модифицируйте скрипт build:

{
....
"scripts": {
"start": "npm-run-all --parallel liveserver watch" ,
"liveserver": "live-server",
"watch": "node-sass sass/main.scss css/style.css -w",
"compile": "node-sass sass/main.scss css/style.css",
"prefix": "postcss css/style.css --use autoprefixer -o**** css/style.css",
"compress": "node-sass css/style.css css/style.css --output-style compressed ",
"build":  "npm-run-all compile prefix compress"
},
...
}

Шаблонный проект, построенных с использованием данных технологий.

Примеры одного  разработчика с учебными проектами

social