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;
}