my-dev-notes/SASS.txt at main · ShevchenkoOl/my-dev-notes · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
Как включить SASS в свой проект
Если вы работаете без инструмента сборки (напрямую через HTML), вам нужен компилятор, который преобразует .scss в .css:
    1 Установите расширение Live Sass Compiler в VS Code.
    2 Создайте файл style.scss.
    3 Нажмите кнопку «Watch Sass» на нижней панели.
    4 Файл style.css будет сгенерирован автоматически.
    5 Добавьте CSS-файл в свой HTML-код:
        <link rel="stylesheet" href="css/style.css">

Файл style.css.map — это помощник для разработчиков и инструментов, который помогает находить ошибки и сопоставлять скомпилированный CSS с исходным SCSS. Он облегчает отладку, позволяя увидеть, откуда именно в исходниках взялись те или иные стили. и он не предназначен для работы на стороне пользователя.

style.css — развернутый формат, удобный для чтения.

style.min.css — минимизированный, уменьшенный по объему, облегчает загрузку и работу сайта.

После этого мы задаём следующую архитектуру нашего проекта:
project/
│
├── css/
│   └── style.css        ← итоговый скомпилированный файл
│
├── scss/
│   ├── style.scss       ← главный файл (точка входа)
│   ├── _base.scss       ← базовые стили (body, шрифты, теги)
│   └── _variable.scss   ← переменные (цвета, размеры и т.д.)
│
└── index.html           ← HTML-файл проекта


После того как мы начинаем добавлять какие-то стили, у нас заново создаються файлы style.css и style.css.map (минимизированый файл со стилями который служит для уменьшение нагрузки на браузер при загркзки страницы. После того как проект будет готов мы подключим <link rel="stylesheet" href="css/style.min.css"> и зальём на хостинг). Для того чтобы их ограничить в создании мы для VSCode должны написать опредеоёные правила, а именно:
    1. создаём папку .vscode — это служебная папка редактора Visual Studio Code, где хранятся настройки конкретного проекта. Она создаётся в корне проекта и не влияет на сам код, но управляет поведением VS Code и его расширений (вроде Live Sass Compiler). Файлы и папки, имя которых начинается с точки, считаются “скрытыми”.
    Служебные папки не обезательно отправлять на GitHub, поетому в корне нашего проекта создаём .gitignore и туда помещаем .vscode/ node_modules/ .env и другие
    2. после создаём файл: settings.json:

    {
        "liveSassCompile.settings.formats": [   // указывает, как компилировать SASS.
  {
    "format": "expanded",      // CSS будет отформатирован красиво (не минифицирован).
    "extensionName": ".css",   // у файлов будет расширение .css.
    "savePath": "/css"   // готовые CSS-файлы сохраняются в папку css в корне проекта.

  },
  {
    "format": "compressed",  // скомпилированный CSS-файл будет минимизирован — все лишние пробелы, переносы строк и комментарии будут удалены, и весь CSS будет записан в одну строку или максимально сжато.
    "extensionName": ".min.css",
    "savePath": "/css"
  }
    ],
  "liveSassCompile.settings.generateMap": false // если мы не хотим что-бы для нас генерировался файл css.map
    }