Вопрос: В чем разница между SCSS и Sass?


Из того, что я читал, Sass - это язык, который делает CSS более мощным с переменной и математической поддержкой.

В чем разница с SCSS? Предполагается, что это тот же язык? Аналогичный? Другой?


1297


источник


Ответы:


Sass - предварительный процессор CSS с синтаксическими улучшениями. Таблицы стилей в расширенном синтаксисе обрабатываются программой и превращаются в обычные таблицы стилей CSS. Однако они делают не расширение стандарта CSS.

Основной причиной этого является добавление функций, которые не хватает Богу (например, переменные).

Разница между SCSS и Sass, этот текст на Страница документации Sass должен ответить на вопрос:

Для Sass доступны два синтаксиса. Первый, известный как SCSS (Sassy CSS) и используемый во всей этой ссылке, является расширением синтаксиса CSS. Это означает, что каждая допустимая таблица стилей CSS является допустимым файлом SCSS с тем же значением. Этот синтаксис расширен с помощью функций Sass, описанных ниже. Файлы, использующие этот синтаксис, имеют .scss расширение.

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

Однако все это работает только с предварительным компилятором Sass, который в итоге создает CSS. Это не расширение стандарта CSS.


1334



Я один из разработчиков, которые помогли создать Sass.

Разница заключается в пользовательском интерфейсе. Под текстовой внешностью они идентичны. Вот почему sass и scss-файлы могут импортировать друг друга. Собственно, у Sass четыре синтаксических анализатора: scss, sass, CSS и меньше. Все они преобразуют другой синтаксис в Абстрактное дерево синтаксиса который далее обрабатывается в выход CSS или даже в один из других форматов с помощью инструмента sass-convert.

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


472



Сасс .sassфайл визуально отличается от .scssфайл, например.

example.sass

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

example.scss

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

Любой допустимый документ CSS можно преобразовать в Sassy CSS (SCSS), просто изменив расширение с .cssв .scss,


255



Its syntax is different, and that's the main pro (or con, depending on your perspective).

I'll try not to repeat much of what others said, you can easily google that but instead, I'd like to say a couple of things from my experience using both, sometimes even in the same project.

SASS pro

  • cleaner - if you are coming from Python, Ruby (you can even write props with symbol-like syntax) or even the CoffeeScript world, it will come very natural to you - writing mixins, functions and generally any reusable stuff in .sass is much 'easier' and readable than in .scss (subjective).

SASS cons

  • whitespace sensitive (subjective), I don't mind it in other languages but here in CSS it just bothers me (issues: copying, tab vs space war, etc).
  • no inline rules (this was game breaking for me), you can't do body color: red like you can in .scss body {color: red}
  • importing other vendor stuff, copying vanilla CSS snippets - not impossible but very boring after some time. The solution is to either have .scss files (alongside with .sass files) in your project or to convert them to .sass.

Other than this - they do the same job.

Now, what I like to do is to write mixins and variables in .sass and code that will actually compile to CSS in .scss if possible (ie Visual studio doesn't have support for .sass but whenever I work on Rails projects I usually combine two of them, not in one file ofc).

Lately, I'm considering giving Stylus a chance (for a full-time CSS preprocessor) because it allows you to combine two syntaxes in one file (among some other features). That may not be a good direction for a team to take but when you are maintaining it alone - it's ok. The stylus is actually most flexible when syntax is in question.

And finaly mixin for .scss vs .sass syntax comparison:

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover

55



From the homepage of the language

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

SASS is an interpreted language that spits out CSS. The structure of Sass looks like CSS (remotely), but it seems to me that the description is a bit misleading; it's not a replacement for CSS, or an extension. It's an interpreter which spits out CSS in the end, so Sass still has the limitations of normal CSS, but it masks them with simple code.


44



Sass (Syntactically Awesome StyleSheets) have two syntaxes:

  • a newer: SCSS (Sassy CSS)
  • and an older, original: indent syntax, wich is the original Sass and is also called Sass.

So they are both part of Sass preprocessor with two different possible syntaxes.

The most important differents between SCSS and original Sass:

SCSS:

  • It syntax is similar to CSS.
  • Use braces {}.
  • Use semi-colons ;.
  • Variable sign in SCSS is $.
  • Aassignment sign in SCSS is :.
  • Files using this syntax have the .scss extension.

Original Sass:

  • It syntax is similar to Ruby.
  • Here no uses of braces.
  • No strict indentation.
  • No semi-colons.
  • Variable sign in Sass is ! instead of $.
  • Assignment sign in Sass is = instead of :.
  • Files using this syntax have the .sass extension.

These are two syntaxes available for Sass.

Some prefer Sass, the original syntax - while others prefer SCSS. Either way, but it is worth noting that Sass’s indented syntax has not been and will never be deprecated.

Conversions with sass-convert:

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

SASS REFERENCE


36



The basic difference is the syntax. While SASS has a loose syntax with white space and no semicolons, the SCSS resembles more to CSS.


17



Original sass is ruby syntax-like, similar to ruby, jade etc...

In those syntaxes, we don't use {}, instead we go with white spaces, also no usage of ;...

In scss syntaxes are more like CSS, but with getting more options like: nesting, declaring, etc, similar to less and other pre-processing CSS ...

They basically do the same thing, but I put couple of lines of each to see the syntax difference, look at the {}, ;, and spaces:

SASS:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

8



Sass was the first one, and The syntax is a bit diffrent. For example, including a mixin:

Sass: +mixinname()
Scss: @include mixinname()

Sass ignores curly brackets and semi colons and lay on nesting, which I found more useful.


7



Difference between SASS and SCSS article explains the difference in details. Don’t be confused by the SASS and SCSS options, although I also was initially, .scss is Sassy CSS and is the next generation of .sass.

If that didn’t make sense you can see the difference in code below.

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

In the code above we use ; to separate the declarations. I’ve even added all the declarations for .border onto a single line to illustrate this point further. In contrast, the SASS code below must be on different lines with indentation and there is no use of the ;.

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

You can see from the CSS below that the SCSS style is a lot more similar to regular CSS than the older SASS approach.

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

I think most of the time these days if someone mentions that they are working with Sass they are referring to authoring in .scss rather than the traditional .sass way.


3