مقالات طراحی سایت

Sass دو سینتکس scss و sass دارد. هرکدام میتوانند دیگری را لود کنند، بنابراین به شما بستگی دارد که کدام سینتکس را انتخاب کنید.

مطالعه بیشتر: آموزش Sass

SCSS

سینتکس SCSS با پسوند scss ذخیره میشود. SCSS از همه کدهای CSS پشتیبانی میکند. بخاطر شباهتهای SCSS به CSS یادگیری آن به مراتب راحت تر است.

@mixin button-base() {
  @include typography(button);
  @include ripple-surface;
  @include ripple-radius-bounded;
  display: inline-flex;
  position: relative;
  height: $button-height;
  border: none;
  vertical-align: middle;
  &:hover { cursor: pointer; }
  &:disabled {
    color: $mdc-button-disabled-ink-color;
    cursor: default;
    pointer-events: none;
  }
}

SASS (Indented Syntax)

indented syntax سینتکس اصلی Sass است. indented syntax با فورمت sass ذخیره میشود و به همین علت به آن Sass میگویند. Sass نیز همانند SCSS از همه کدهای CSS پشتیبانی میکند، با این تفاوت که بجای براکت و سمی‌کالن از فاصله استفاده میکند.

بطور کلی، در indented syntax فاصله نقش براکت در CSS یا SCSS را دارد. همچنین فاصله انتهای لاین نقش سمی‌کالن را دارد.

@mixin button-base()
  @include typography(button)
  @include ripple-surface
  @include ripple-radius-bounded
  display: inline-flex
  position: relative
  height: $button-height
  border: none
  vertical-align: middle
  &:hover
    cursor: pointer
  &:disabled
    color: $mdc-button-disabled-ink-color
    cursor: default
    pointer-events: none

به نقل از: Sass