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

Я очень хорошо знаю CSS, но меня смущает Sass. Чем SCSS отличается от CSS, и если я использую SCSS вместо CSS, он будет работать так же?

В дополнение к ответу Идрисс :

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

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

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

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

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

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

И это меньше

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

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

Правильные определения переменных:

$      => SCSS, SASS
--     => CSS
@      => LESS

Все ответы хороши, но вопрос немного отличается от ответов

«о Sass. Чем SCSS отличается от CSS» : scss - это хорошо сформированный синтаксис CSS3 . использует препроцессор sass для его создания.

и если я использую SCSS вместо CSS, будет ли он работать так же? да. если ваш ide поддерживает препроцессор sass. чем он будет работать так же.

У Sass есть два синтаксиса. Наиболее часто используемый синтаксис известен как «SCSS» (от «Sassy CSS») и является надмножеством синтаксиса CSS3. Это означает, что каждая допустимая таблица стилей CSS3 также является действительной SCSS. Файлы SCSS имеют расширение .scss.

Второй, более старый синтаксис известен как синтаксис с отступом (или просто «.sass»). Вдохновленный лаконичностью Хамла, он предназначен для людей, которые предпочитают лаконичность подобию CSS. Вместо скобок и точек с запятой он использует отступ строк для указания блоков. Файлы с отступом синтаксиса используют расширение .sass.

• Дополнительная информация о:

Что такое препроцессор CSS?

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

Препроцессор CSS - это инструмент, используемый для расширения базовых функций стандартного CSS по умолчанию с помощью его собственного языка сценариев. Это помогает нам использовать сложный логический синтаксис, такой как - переменные, функции, миксины, вложение кода и наследование, и это лишь некоторые из них, дополняя ваш ванильный CSS. Используя препроцессоры CSS, вы можете легко автоматизировать второстепенные задачи, создавать повторно используемые фрагменты кода, избегать повторения и раздувания кода, а также писать вложенные блоки кода, которые хорошо организованы и легко читаются. Однако браузеры могут понимать только собственный ванильный код CSS и не могут интерпретировать синтаксис препроцессора CSS. Следовательно, сложный и продвинутый синтаксис препроцессора необходимо сначала скомпилировать в собственный синтаксис CSS, который затем может быть интерпретирован браузерами, чтобы избежать проблем совместимости между браузерами.

Двигаясь дальше в статье, мы рассмотрим 3 самых популярных препроцессора CSS, которые в настоящее время используются разработчиками по всему миру, то есть Sass, LESS и Stylus. Прежде чем вы определите победителя между Sass, LESS и Stylus, дайте нам сначала познакомиться с ними подробнее.

Sass - синтаксически отличные таблицы стилей

Sass - это аббревиатура от «Syntactically Awesome Style Sheets». Sass - не только самый популярный препроцессор CSS в мире, но и один из старейших, запущенный в 2006 году Хэмптоном Кэтлином, а затем разработанный Натали Вайценбаум. Хотя Sass написан на языке Ruby, прекомпилятор LibSass позволяет анализировать Sass на других языках и отделять его от Ruby. Sass имеет огромное активное сообщество и обширные обучающие ресурсы, доступные в сети для начинающих. Благодаря своей зрелости, стабильности и мощному логическому мастерству Sass зарекомендовал себя в авангарде препроцессоров CSS, опередив своих конкурентов.

Sass может быть написан в двух синтаксисах с использованием Sass или SCSS. Какая разница между двумя? Давайте разберемся.

Объявление синтаксиса: Sass против SCSS

• SCSS означает Sassy CSS. В отличие от Sass, SCSS не основан на отступах.
• Расширение .sass используется в качестве исходного синтаксиса для Sass, а SCSS предлагает более новый синтаксис с расширением .scss.
• В отличие от Sass, SCSS имеет фигурные скобки и точки с запятой, как и CSS.
• В отличие от SCSS, Sass трудно читать, так как он сильно отличается от CSS. Вот почему SCSS - это более рекомендуемый синтаксис Sass, поскольку его легче читать и он очень похож на собственный CSS, но в то же время обладает мощью Sass.

Рассмотрим приведенный ниже пример с синтаксисом Sass vs SCSS вместе со скомпилированным кодом CSS.

Sass SYNTAX
    $font-color: #fff
    $bg-color: #00f

    #box
      color: $font-color
      background: $bg-color

SCSS SYNTAX
    $font-color: #fff;
    $bg-color: #00f;

    #box{
      color: $font-color;
      background: $bg-color;
    }

В обоих случаях, будь то Sass или SCSS, скомпилированный код CSS будет одинаковым -

#box {
      color: #fff;
      background: #00f;

Использование Sass

Пожалуй, самый популярный интерфейсный фреймворк Bootstrap написан на Sass. До версии 3 Bootstrap был написан на LESS, но bootstrap 4 принял Sass и повысил его популярность. Несколько крупных компаний, использующих Sass: Zapier, Uber, Airbnb и Kickstarter.

МЕНЬШЕ - Таблицы стилей Leaner

LESS - это аббревиатура от «Leaner Stylesheets». Он был выпущен в 2009 году Алексисом Селье, через 3 года после первоначального запуска Sass в 2006 году. Хотя Sass написан на Ruby, LESS написан на JavaScript. Фактически, LESS - это библиотека JavaScript, которая расширяет функциональность собственного ванильного CSS с помощью миксинов, переменных, вложенности и цикла набора правил. Sass vs LESS - горячие споры. Неудивительно, что LESS является сильнейшим конкурентом Sass и имеет вторую по величине базу пользователей. Однако, когда бутстрап отказался от LESS в пользу Sass с запуском Bootstrap 4, популярность LESS упала. Одним из немногих недостатков LESS по сравнению с Sass является то, что он не поддерживает функции. В отличие от Sass, LESS использует @ для объявления переменных, которые могут вызвать путаницу с @media и @keyframes. Тем не мение, Одним из ключевых преимуществ LESS перед Sass и Stylus или любыми другими препроцессорами является простота добавления его в ваш проект. Вы можете сделать это либо с помощью NPM, либо путем включения файла Less.js. Объявление синтаксиса: LESS Использует расширение .less. Синтаксис LESS очень похож на SCSS, за исключением того, что для объявления переменных вместо знака $ LESS использует @.

@font-color: #fff;
    @bg-color: #00f

    #box{
      color: @font-color;
      background: @bg-color;
    }

COMPILED CSS
    #box {
        color: #fff;
        background: #00f;
      }

Использование LESS Популярный фреймворк Bootstrap до выпуска версии 4 был написан на LESS. Однако другой популярный фреймворк под названием SEMANTIC UI по-прежнему написан на LESS. Среди крупных компаний, использующих Sass, - Indiegogo, Patreon и WeChat.

стилус

Стилус был запущен в 2010 году бывшим разработчиком Node JS Т. Дж. Головайчуком, почти через 4 года после выпуска Sass и через 1 год после выпуска LESS. Стилус написан на Node JS и отлично сочетается со стеком JS. На перо сильно повлияли логическая мощь Sass и простота LESS. Несмотря на то, что Stylus по-прежнему популярен среди разработчиков Node JS, ему не удалось добиться значительной доли для себя. Одним из преимуществ Stylus перед Sass или LESS является то, что он оснащен чрезвычайно мощными встроенными функциями и способен справляться с тяжелыми вычислениями.

Объявление синтаксиса: Stylus использует расширение .styl. Stylus предлагает большую гибкость при написании синтаксиса, поддерживает собственный CSS, а также позволяет опускать скобки, двоеточия и точки с запятой. Также обратите внимание, что Stylus не использует символы @ или $ для определения переменных. Вместо этого Stylus использует операторы присваивания для обозначения объявления переменной.

STYLUS SYNTAX, НАПИСАННЫЙ КАК НАТИВНЫЙ CSS

font-color = #fff;
bg-color = #00f;

#box {
    color: font-color;
    background: bg-color;
}

ИЛИ

STYLUS SYNTAX БЕЗ КРЕПЛЕНИЙ

font-color = #fff;
bg-color = #00f;

#box 
    color: font-color;
    background: bg-color;

ИЛИ

STYLUS SYNTAX БЕЗ ОБОЛОЧКИ И ПОЛУБОЛОЧКИ

font-color = #fff
bg-color = #00f

#box 
    color font-color
    background bg-color