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

Подробнее по ссылке https://sass-scss.ru/documentation/

Директивы Sass

Импорт файлов или фрагментов (директива @import)

Директива @import позволяет импортировать .scss и .sass файлы (или фрагменты, при этом все импортированные .scss и .sass файлы могут объединяться в одном результирующем .css файле без компиляции каждого из них в отдельный CSS-файл).

Любые переменные или миксины, объявленные в импортированном файле, могут использоваться в главном файле.

Компилятор ищет другие файлы sass в текущей папке, и в каталоге файлов sass при использовании в Rack, Rails или Merb. Дополнительные каталоги поиска могут задаваться с помощью опции :load_paths или ключом --load-path в командной строке.

Директива @import использует название файла для импорта:

@import "foo.scss"; 
// или
@import "foo";

@import "foo.scss";

// или

@import "foo";

При этом будет импортирован файл foo.scss (или фрагмент _foo.scss, без компиляции в отдельный файл, нижнее подчеркивание в начале имени файла сообщит Sass о том, что этот фрагмент не нужно компилировать напрямую в CSS).

Также возможно импортирование нескольких файлов через одну директиву:

@import "rounded-corners", "text-shadow";

1	@import "rounded-corners", "text-shadow";

Обратите внимание, файл colors.scss не может сосуществовать с фрагментом _colors.scss.

С Sass директиву @import можно использовать как в css-свойствах, так и в медиа-условиях: импортированные правила будут вложены в том же месте, где и вызывалась директива @import.

Невозможно вкладывать @import в миксин или директиву управления.

[свернуть]

Поддержка различных устройств (директива @media)

Директива @media работает так же, как и стандартное правило CSS, но дополнительно может вкладываться в правила CSS.

Если директива вложена в css-правило, то при компиляции она будет поднята наверх таблицы стилей, а все селекторы в которых была директива переместятся внутрь @media, что позволяет легко добавлять правила в @media без повторения селекторов или нарушения потока таблицы стилей. Например:

// Sass

.sidebar
  width: 300px

  @media screen and (orientation: landscape)
    width: 500px

// Sass

.sidebar

width: 300px

@media screen and (orientation: landscape)

width: 500px

После компиляции:

// css

.sidebar { 
  width: 300px;
} 

@media screen and (orientation: landscape) { 
 .sidebar { 
   width: 500px; 
 } 
}

// css

.sidebar {

width: 300px;

}

@media screen and (orientation: landscape) {

.sidebar {

width: 500px;

}

@media-запросы могут:

вкладываться друг в друга (после компиляции эти @media будут объединены оператором and;
содержать в себе все возможности SassScript (включая переменные, функции и операторы) в именах компонентов и различных значений (пример).

[свернуть]

Наследование (расширение) стилей (директива @extend)

Директива @extend сообщает Sass, что один селектор должен наследовать стили другого. Например:

.error
  border: 1px #f00
  background-color: #fdd

.seriousError
  @extend .error // наследуем
  border-width: 3px

.error

border: 1px #f00

background-color: #fdd

.seriousError

@extend .error // наследуем

border-width: 3px

Это означает, что все объявляемые стили для .error будут применяться и к .seriousError, в дополнение к индивидуальным для .seriousError (все элементы с классом .seriousError также будут иметь класс .error). Другие правила, используемые .error, будут также применяться и для .seriousError.

Особенности расширения стилей в Sass:

Одиночный селектор может быть расширен больше, чем одним селектором, при этом он наследует все стили всех расширяющих селекторов.
Если вы используете @extend в @media (или в других директивах), то вы можете расширить только те селекторы, которые находятся в том же блоке директивы.

Например:

// будет работать

@media print 
 .error 
   border: 1px #f00 
   background-color: #fdd 
 .seriousError 
   @extend .error 
   border-width: 3px

// не будет работать

.error
  border: 1px #f00
  background-color: #fdd
@media print
  .seriousError
    @extend .error
    border-width: 3px

// будет работать

@media print

.error

border: 1px #f00

background-color: #fdd

.seriousError

@extend .error

border-width: 3px

// не будет работать

.error

border: 1px #f00

background-color: #fdd

@media print

.seriousError

@extend .error

border-width: 3px

[свернуть]

Перенос вложенных селекторов в корень дoкумента (директива @at-root)

Директива @at-root изымает одно или несколько правил из родительского селектора и переносит их в корневой уровень документа.

Такой способ можно использовать с селекторами первого уровня вложения:

// Sass
.parent
  ...
  @at-root .child ... 

// css
.parent { ... }
.child { ... }

// Sass

.parent

...

@at-root .child ...

// css

.parent { ... }

.child { ... }

Также этот способ может быть использован с несколькими селекторами:

// Sass
.parent
  ...
  @at-root
    .child1 ...
    .child2 ...
  .step-child ... 

// css
.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }

// Sass

.parent

...

@at-root

.child1 ...

.child2 ...

.step-child ...

// css

.parent { ... }

.child1 { ... }

.child2 { ... }

.parent .step-child { ... }

@at-root можно использовать и для изъятия селекторов, вложенных в директивы (например, в таких как @media). Например:

// Sass
@media print
 .page
   width: 8in
 @at-root (without: media)
   color: red

// css
@media print {
 .page {
   width: 8in;
 }
}
.page {
  color: red;
}

// Sass

@media print

.page

width: 8in

@at-root (without: media)

color: red

// css

@media print {

.page {

width: 8in;

}

.page {

color: red;

}

Вы можете использовать @at-root (without: ...) для изъятия из любой директивы. Также вы можете изымать селекторы сразу из нескольких директив, просто разделив их пробелами: @at-root (without: media supports) - изымет элементы из запросов @media и @supports.

Специальные значения @at-root:

Команда @at-root (without: rule) имеет такое же значение, как и @at-root без запросов.
Команда @at-root (without: all) обозначает, что стили должны быть изъяты из всех директив и правил CSS.

Если вы хотите указать какие директивы или правила включать, а не список тех, которые должны быть изъяты, то вы можете использовать with вместо without. Например, команда @at-root (with: rule) означает, что необходимо изъять элементы из всех директив, но не затрагивать вложенные правила CSS.

[свернуть]

Миксины

Миксины (примеси) позволяют определить стили, которые могут быть использованы повторно в любом месте документа (это повторяющиеся участки кода, которые можно включать в различные селекторы).

Миксины могут:

содержать CSS правила или что-либо другое, разрешённое в Sass документе;
принимать аргументы.

Объявление и использование миксина

Объявление миксина

Миксины объявляются директивой @mixin, после которой должно стоять имя миксина (и, опционально, его параметры), а также блок, содержащий тело миксина. Например:

@mixin reset {
  margin: 0;
  padding: 0;
}

// или Sass
@mixin colors($color: blue) // с параметром и переменной $color
  background-color: $color
  @content
  border-color: $color

@mixin reset {

margin: 0;

padding: 0;

}

// или Sass

@mixin colors($color: blue) // с параметром и переменной $color

background-color: $color

@content

border-color: $color

Миксины могут содержать селекторы со свойствами, а селекторы могут содержать ссылки на родителя. Например:

@mixin clearfix {
  display: inline-block;

  &:after {
    content: ".";
    display: block;
  }
  * html & { 
    height: 1px 
  }
}

@mixin clearfix {

display: inline-block;

&:after {

content: ".";

display: block;

}

* html & {

height: 1px

}

Имена миксинов (и всех других идентификаторов в Sass) могут содержать дефисы и символы подчёркивания как взаимозаменяемые символы. Например, если вы определяете миксин add-column, вы можете подключать его как add_column, и наоборот.

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

Для включения миксина в селектор используется директива @include, после которой указывается имя миксина, который мы хотим подключить. Например, сбросим отступы в маркированном списке:

// Sass
@mixin reset 
 margin: 0 
 padding: 0 

ul 
 @include reset 

// css
ul {
 margin: 0;
 padding: 0;
}

// Sass

@mixin reset

margin: 0

padding: 0

@include reset

// css

ul {

margin: 0;

padding: 0;

}

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

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

Миксины часто используются для свойств, которым необходима поддержка в старых браузерах. Для таких свойств указываются вендорные префиксы (подробнее).

[свернуть]

Функции в Sass

Существует возможность определить собственные функции в Sass и использовать их в любом значении или контексте скрипта.

Определение и использование функций в Sass

Функции имеют доступ к любым глобальным переменным, а также принимают параметры как и миксины (примеси). Функция может содержать несколько операторов, возвращаемое значение функции указывается с помощью @return:

// Sass

$grid-width: 40px
$gutter-width: 10px

@function grid-width($n)
  @return $n * $grid-width + ($n - 1) * $gutter-width

#sidebar
  width: grid-width(5)

// css (результат)

#sidebar {
  width: 240px;
}

// Sass

$grid-width: 40px

$gutter-width: 10px

@function grid-width($n)

@return $n * $grid-width + ($n - 1) * $gutter-width

#sidebar

width: grid-width(5)

// css (результат)

#sidebar {

width: 240px;

}

Также как и миксины, определённые в Sass функции могут быть вызваны с именованными аргументами:

// Sass

#sidebar
  width: grid-width($n: 5)

// Sass

#sidebar

width: grid-width($n: 5)

Рекомендуется использовать префиксы для функций во избежание конфликтов имён, а также для отграничения пользовательских функций от синтаксиса Sass или CSS. Например, если бы вы работали в компании myCompany, то функция выше могла бы быть названа вами как -myCompany-grid-width.

[свернуть]

Директивы Sass

Особенности расширения стилей в Sass:

Специальные значения @at-root:

Миксины

Объявление миксина

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

Функции в Sass

Добавить комментарий Отменить ответ