Oleg Alexandrov

SASS / SCSS

← Назад к перечню шпаргалок

Правила и директивы

@import

@media

1

.sidebar {
  width: 300px;

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

.sidebar {
  width: 300px; 
}

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

2

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

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

3

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; 
  } 
}

@extend

Типы данных

Строки

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");

body.firefox .header:before {
  content: "Hi, Firefox users!";
}

Списки

// Узнаем значение элемента списка по индексу:
nth(10px 20px 30px, 1)
nth((Helvetica, Arial, sans-serif), 3)
nth((width: 10px, length: 20px), 2)

// Объединяем списки в один:
join(10px 20px, 30px 40px)
join((blue, red), (#abc, #def))
join(10px, 20px)

// Добавляем в список элементы:
append(10px 20px, 30px)
append((blue, red), green)
append(10px 20px, 30px 40px)

/* Узнаем значение элемента списка по индексу: */
10px
sans-serif
length, 20px

/* Объединяем списки в один: */
10px 20px 30px 40px
blue, red, #abc, #def
10px 20px

/* Добавляем в список элементы: */
10px 20px 30px
blue, red, green

Мапы (Ассоциативные массивы)

$status-colors: (
  primary: #000,
  success: #27BA6C,
  info: #03a9f4,
  warning: #FF8833,
  danger: #ff1a1a
);

.message {
  @each $status, $color in $status-colors {
    &--#{$status} {
      background: $color;
    }
  }
}

.message--primary {
  background: #000;
}

.message--success {
  background: #27ba6c;
}

.message--info {
  background: #03a9f4;
}

.message--warning {
  background: #f83;
}

.message--danger {
  background: #ff1a1a;
}

Операции

Интерполяция

1

$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}

p.foo {
border-color: blue;
}

2

p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}

p {
font: 12px/30px;
}

Оператор “&”

@mixin does-parent-exist {
    @if & {
        &:hover {
            color: red;
        }
    } @else {
        a {
            color: red;
        }
    }
}

Переменные по умолчанию

Вы можете присваивать значение по-умолчанию переменным, у которых еще нет значения, добавив метку !default в конце значения. В таком случае, если переменная уже имела значение, то оно не изменится; если же переменная пуста, ей будет присвоено новое указанное значение.

$content: "Тестовый текст";
$content: "Новый тестовый текст?" !default;
$new_content: "Как пройти в библиотеку?" !default;

#main {
  content: $content;
  new-content: $new_content;
}

#main {
  content: "Тестовый текст";
  new-content: "Как пройти в библиотеку?"; 
}

Переменные, имеющие значение null, рассматриваются меткой !default как не имеющие значения:

$content: null;
$content: "НЕ-null контент" !default;

#main {
  content: $content;
}

#main {
  content: "НЕ-null контент"; 
}

← Назад к перечню шпаргалок

This site is open source. Improve this page.