Задать вопрос
semyonfedoseev

Семён Федосеев

Могу загуглить вместо тебя
Ответы пользователя по тегу Вёрстка

  • Как подключить SCSS к html?

    semyonfedoseev
    @semyonfedoseev
    Могу загуглить вместо тебя
    Прибегайте к сборщикам в случае крайней необходимости.
    Вот так может выглядеть реализация в HTML:

    <!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.12/sass.sync.min.js"></script>
        <style type="scss">
@mixin l2d($color,$strength){
    background:linear-gradient(lighten($color,$strength),darken($color,$strength));
    &:active{
        background:linear-gradient(darken($color,$strength),lighten($color,$strength));
    }
}
body{
    @include l2d(#aa2424,10%);
    min-height:100vh;
}
#hello{
    margin:auto auto auto auto;
    width:96vw;
    user-select:none;
    &:after{
        content:" ";
    }
}
        </style>
        
        <script>
            Sass.compile(document.querySelector("style[type=scss]").innerHTML,function(res){
    var s=document.createElement("style");
    s.innerHTML=res.text;
    res.formatted&&console.error(res.formatted); //if error console.error it.
    res.text&&document.head.appendChild(s);// append style element only if no error.
});
        </script>
    </head>
    <body>
        <h1 id="hello">Hello, this is styled using SCSS.</h1>
    </body>
</html>


    Вы можете вынести стили в отдельный файл:
    <link rel="stylesheet" type="scss" href="style.scss">


    Источник: https://github.com/sreegithub19/programming_langua...
    Ответ написан
    3 комментария
    3 комментария

  • Стоит ли подключать 1 css файл со всеми стилями для разных HTML документов? Или лучше разделять?

    semyonfedoseev
    @semyonfedoseev
    Могу загуглить вместо тебя
    Вероятно, Вам следует узнать о том, что такое Gulp или Parcel, хотя бы издалека, если уже не познакомились. Это поможет автоматизировать минификацию. Самостоятельный разбор и просмотр видео в YouTube помогут ответить на множество вопросов.

    Предполагаю то, что ключом к ответу на вопрос является шаблонизатор. Шаблонизаторы бывают разные, выберите любой на вкус и цвет.

    Мне нравится широко общие стили и стили для сброса стилей подключать в корне, там же хранить основной файл стилей с импортом, а остальные стили, которые необходимы конкретным областям, хранить рядом с кусками кода, к которым эти стили относятся. Предпочитаю максимально разделывать код на куски и раскладывать по отдельным папочкам, создавая рядом файл стилей для выбранной области. Все куски импортирую в один файл через сборщик, либо через импорт или другие дополнения, если сборщика нет.

    Вобщем, для того, чтобы переиспользовать некоторые элементы интерфейса, по-моему мнению, лучше импортировать все стили в один файл, если это не противоречит принятым принципам реализация веб-ресурса. Некоторые сборщики умеют переносить только выбранные части стилей и даже хранить их в head, без подгрузки файла стилей, вообще. Моя рекомендация относится к частой практике, Вы можете найти оптимальный вариант решения под конкретный проект. Универсальную пилюлю, пока что, не смог найти.

    Вероятно, на скорость загрузки более влияет место сборки и отрисовка страницы веб-ресурса, чем расположение стилей, если речь о бизнес проекте.

    Возможно, Вас может заинтересовать следующая статья: https://ru.bem.info/methodology/filestructure
    Ответ написан
    Комментировать
    Комментировать