В чем разница между CSS и SCSS?

Ответ 1

В дополнение к Idriss ответ:

CSS

В CSS мы пишем код, как показано ниже, в полном объеме.

body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

SCSS

В SCSS мы можем сократить этот код с помощью @mixin поэтому нам не придется писать свойства color и width снова и снова. Мы можем определить это через функцию, аналогично PHP или другим языкам.

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

SASS

В SASS, однако, вся структура визуально быстрее и чище, чем SCSS.

• Он чувствителен к пробелу при использовании копирования и вставки,

• Кажется, что он не поддерживает встроенный CSS в настоящее время.

  $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif
  
  body
    width: $width
    color: $color
    font: 100% $stack
  
    content
      width: $width
      background:$color
  

Ответ 2

CSS - это стиль, который любой браузер понимает для стилей веб-страниц.

SCSS - это особый тип файла для SASS, программа, написанная на Ruby, которая собирает таблицы стилей CSS для браузера, а для информации SASS добавляет множество дополнительных функций для CSS, таких как переменные, вложенность и многое другое, что упрощает и ускоряет написание CSS. Файлы SCSS обрабатываются сервером, на котором запущено веб-приложение, для вывода традиционного CSS, который ваш браузер может понять.

Ответ 3

css есть переменные. Вы можете использовать их так:

--primaryColor: #ffffff;
--width: 800px;

body {
    width: var(--width);
    color: var(--primaryColor);
}
.content{
    width: var(--width);
    background: var(--primaryColor);
}

Ответ 4

И это меньше

@primarycolor: #ffffff;
@width: 800px;

body{
 width: @width;
 color: @primarycolor;
 .content{
  width: @width;
  background:@primarycolor;
 }
}