SASS не работает в Visual Studio Code 1.33.0

Начал использовать код Visual Studio для SASS. Создал простой HTML, как показано ниже.

<!DOCTYPE html>
   <html>
       <head>
        <title>SCSS Test</title>
        <link rel = "stylesheet" href = "./styles/main.scss">
       </head>
       <body>
           <header>
               <h1> Hello SCSS </h1>
               <button>Hello</button>
           </header>
           <div>
             <button>Submit</button>
             <div>
               <h1> Our Contact Info </h1>
               <p class = "">This is our info</p>
             </div>
           </div>
        </body>
    </html>

Добавлена папка с именем «styles», в которой я создал файл «main.scss», как показано ниже, и использовал расширение «Live Sass Compiler» для создания файла CSS и файла карты.

SCSS-файл:

$primaryHeaderBack : lightblue;

header {
    background: $primaryHeaderBack;
}

Ожидаемый результат:

Цвет фона заголовка не голубой, а белый. Что мне делать, чтобы увидеть желаемый результат? Пожалуйста помогите.

Я думаю, вы должны вызывать свой файл .css (который автоматически создается компилятором) в своем html, а не в файле .scss :-)

— 10.04.2019 14:51

Это означает, что мы используем обычный html css, но есть много преимуществ использования SCSS, таких как использование переменных, вложенность и т.д.

— 10.04.2019 14:54

Когда вы используете sass (с «живым компилятором sass»), это создает файл .css в той же папке (или где-то еще, в зависимости от того, как вы настроили плагин) для использования на вашем веб-сайте. Вы все еще используете sass для его создания, поэтому вы все равно сможете использовать переменную и вложенность.

— 10.04.2019 14:55

Привет, Coops... спасибо за совет... Это сработало... Вместо файла .scss мы должны использовать его .css. Позже я подумал по-вашему, я нашел смысл, мы напишем .scss, он сгенерирует .css, который мы должны использовать в качестве ссылки в нашем HTML. Большое спасибо !!

— 10.04.2019 18:54

css sass

10.04.2019 14:45

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

11 474

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

you cant use sass into html file directly, because it not works. But how you can use a sass file into html??

Файлы SCSS — это файлы, которые необходимо преобразовать в файлы CSS (чтобы браузер знал, как их использовать). Вы можете рассматривать SCSS как любой другой язык высокого уровня, такой как C#; вы компилируете / встраиваете его в язык для цели (в данном случае браузера).

Ответ: вы должны преобразовать файл sass в файл css. Вы можете сделать это с помощью cmd. Сначала откройте cmd и перейдите в папку проекта, затем напишите эту команду в cmd:

sass scss\your_scss_filename css\your_css_filename

После запуска этой команды вы можете увидеть ее вывод в папке. Удачи.

10.04.2019 15:11

Ответ принят как подходящий

@Moibabrata, @coops попросил вас связать ваш файл CSS с вашим HTML, потому что после запуска живого компилятора SASS файлы SASS преобразуются в файлы CSS, поскольку файл HTML не может понять .sass, вы должны использовать .css, но не волнуйтесь , Ваш файл .css будет содержать все, что вы вводите в файле .sass.

Вам не нужно когда-либо изменять файл .css. Все, что вы делаете в файле .sass, будет автоматически обновлено в файле .css.

Итак, вместо этого: <link rel = "stylesheet" href = "./styles/main.scss">

Использовать : <link rel = "stylesheet" href = "./styles/main.css">

Надеюсь, вы поняли.

10.04.2019 15:39

Ваша главная ошибка в том, что вы "связанный файл .scss" браузер не может читать файл .scss, он всегда читает файл .css. поэтому вы должны связать файл .css в своем HTML-файле.

затем начните просмотр вашего файла .scss для компиляции. введите описание изображения здесь

выполнив этот шаг, вы проверите свой браузер. Надеюсь, вы получите ожидаемый результат. Спасибо.

01.07.2020 09:29