Перейти к содержимому

Пример запуска легкого локально сайта на фреймворке Bootstrap

Команда для запуска

C:\Users\****\AppData\Local\Programs\Python\Python38\python.exe -m pydoc -b

скрипт находиться тут

C:\Users\***\AppData\Local\Programs\Python\Python38\Tools\scripts

Bootstrap — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется веб-разработчиками для быстрой вёрстки адаптивных дизайнов сайтов и веб-приложений.

Bootstrap  это библиотека посредством которой писать CSS стили гораздо проще ?

Bootstrap  написан на JavaScript, CSS, HTML и Sass

Sass в свою очередь упрощает CSS.

В Sass есть

  1. Переменные-константы.

2. Более минималистичное написание при вложенных Селекторах.

3. Можно использовать вложенные стили.

4. Компиляцию из формата Sass в CSS можно организовать автоматически.

1. Переменные-константы. 

$color: red;

ul {
    font-size: 14px;
    color: $color;
}

ol {
    font-size: 18px;
    color: $color;
}

2. Более минималистичное написание при вложенных Селекторах. 

div {
    font-size: 18px;

    p {
        color: blue;
    }

    ul {
        color: green;
    }
}

Після компіляції в CSS ми отримаємо файл, який виглядатиме так:

div {
    font-size: 18px;
}

div p {
    color: blue;
}

div ul {
    color: green;
}

3. Можно использовать вложенные стили. 

%message {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    border: 1px solid black;
    padding: 20px;
    margin: 20px;
}

.success {
    @extend %message;
    background-color: green;
}

.warning {
    @extend %message;
    background-color: orange;
}

.error {
    @extend %message;
    background-color: red;
}

4. Компиляцию из формата Sass в CSS можно организовать автоматически.

  • Тепер, щоб пов’язати цей стиль із нашим файлом HTML, ми не зможемо просто пов’язати файл .scss, оскільки більшість веббраузерів розпізнають лише файли .css. Для розв’язку цієї задачі ми повинні завантажити програму під назвою Sass на наші комп’ютери. Потім у нашому терміналі ми пишемо sass variables.scss:variables.css Ця команда скомпілює файл .scss з назвою variables.scss у файл .css з назвою variables.css, tдо якого ви можете надати посилання на своїй HTML-сторінці.
  • Щоб пришвидшити цей процес, ми можемо використовувати команду sass --watch variables.scss:variables.css, яка автоматично змінює файл .css щоразу, коли у файлі .scss виявляється зміна.

о нем рассказывается в Видео CS50

Метки: