sass
SCSS против Sass

Основные отличия

Хотя люди часто говорят Sass как имя этого препроцессора CSS, они часто означают SCSS синтаксис. Sass использует расширение .sass , а SCSS - Sass использует расширение .scss . Они оба называются «Сасс».

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

Синтаксис

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

SCSS:

// nesting in SCSS
.parent {
  margin-top: 1rem;

  .child {
    float: left;
    background: blue;
  }
}

SASS:

// nesting in Sass
.parent
  margin-top: 1rem

  .child
    float: left
    background: blue

После компиляции оба будут создавать одинаковые CSS:

.parent {
  margin-top: 1rem;
}
.parent .child {
  float: left;
  background: blue;
}

Примеси

Sass имеет тенденцию быть более «ленивым» синтаксисом. Ничто не иллюстрирует это лучше, чем то, как вы определяете и включаете микшины.

Определение микширования

= как вы определяете mixin в Sass , @mixin в SCSS .

// SCSS
@mixin size($x: 10rem, $y: 20rem) {
  width: $x;
  height: $y;
}
  
// Sass
=size($x: 10rem, $y: 20rem)
  width: $x
  height: $y

Включая миксин

+ , как вы включаете в Sass , @include в SCSS .

// SCSS
.element {
  @include size(20rem);
}

// Sass
.element
  +size(20rem)

Карты

Когда дело доходит до карт, обычно SCSS является более легким синтаксисом. Поскольку Sass основан на отступе, ваши карты должны быть сохранены в одной строке.

// in Sass maps are "unreadable"
$white: ( white-50: rgba(255, 255, 255, .1), white-100: rgba(255, 255, 255, .2), white-200: rgba(255, 255, 255, .3), white-300: rgba(255, 255, 255, .4), white-400: rgba(255, 255, 255, .5), white-500: rgba(255, 255, 255, .6), white-600: rgba(255, 255, 255, .7), white-700: rgba(255, 255, 255, .8), white-800: rgba(255, 255, 255, .9), white-900: rgba(255, 255, 255, 1 )

Поскольку вы можете отформатировать код на нескольких строках с помощью SCSS , вы можете отформатировать карты, чтобы они были более читабельными.

// in SCSS maps are more readable
$white: (
  white-50: rgba(255, 255, 255, .1),
  white-100: rgba(255, 255, 255, .2),
  white-200: rgba(255, 255, 255, .3),
  white-300: rgba(255, 255, 255, .4),
  white-400: rgba(255, 255, 255, .5),
  white-500: rgba(255, 255, 255, .6),
  white-600: rgba(255, 255, 255, .7),
  white-700: rgba(255, 255, 255, .8),
  white-800: rgba(255, 255, 255, .9),
  white-900: rgba(255, 255, 255, 1)
);

Комментарии

Комментарии в Sass vs. Scss во многом схожи, за исключением случаев, когда речь идет о нескольких линиях. SASS multi-lines чувствительны к SCSS , в то время как SCSS использует терминаторы комментариев.

Однострочный комментарий

style.scss

// Just this line will be commented!
h1 { color: red; }

style.sass

// Exactly the same as the SCSS Syntax!
h1
  color: red

Многострочный комментарий

style.scss

Инициатор: /*

Терминатор: */

/* This comment takes up
 * two lines.
 */
h1 {
   color: red;
}

Это будет h1 элементы h1 с красным цветом.

style.sass

Теперь у SASS есть два инициатора, но нет соответствующих терминаторов. Многострочные комментарии в SASS чувствительны к уровням отступов .

Инициаторы: // и /*

// This is starts a comment,
   and will persist until you 
   return to the original indentaton level.
h1
  color: red

Это будет h1 элементы h1 с красным цветом.

То же самое можно сделать с инициатором /* :

/* This is starts a comment,
   and will persist until you 
   return to the original indentaton level.
h1
  color: red

Итак, у вас есть это! Основные различия между комментариями в SCSS и SASS !

Сравнение SCSS & SASS

• Синтаксис SCSS больше похож на синтаксис CSS но синтаксис SASS немного отличается от SCSS но оба дают точно такой же код CSS .
• В SASS мы не заканчиваем свойства стиля с помощью точки с запятой ( ; ), но в SCSS мы заканчиваем свойства стиля с помощью ( ; ).
• В SCSS мы использовали paranthesis {} чтобы закрыть свойства стиля, но в SASS мы не используем paranthesis .
• Indentation очень важны в SASS . Он определит вложенные свойства в class или id элемента.
• В scss мы можем определить несколько переменных в одной строке, но в SASS мы не можем сделать.

для синтаксиса цикла

С выпуском sass 3.3 и plus версии синтаксис @if и else стал таким же. теперь мы можем использовать выражения с не только scss, но и sass .

синтаксис sass

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

Составлено для

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

синтаксис scss

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

составлен

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}