Оператори дозволяють виробляти базові математичні операції в CSS: додавання, віднімання, множення і ділення.

Додавання  віднімання

See the Pen sccs arifmetic by kravets (@raisa69) on CodePen.

p {
    font-size: 10px + 2em;  // ПОМИЛКА!Різні одиниці виміру
    font-size: 10px + 6px;  // 16px
    font-size: 10px + 2;    // 12px
}

div {
    height: 12% - 2%;
    margin: 4rem - 1;
}

Множення

Виконується точно так, як в CSS, за допомогою calc (a * b), але без calc і круглих дужок. 

Крім того, можна ще відокремлювати знак множення пробілами від чисел (5 * 6 == 5 * 6). 

Виняток: можна множити пікселі між собою. Тобто, 10px * 10px! = 100px. 10px * 10 == 100px.

p {
    width: 10px * 10px;           // Помилка!
    width: 10px * 10;             // 100px
    width: 1px * 5 + 5px;         // 10px
    width: 5 * (5px + 5px);       // 50px
    width: 5px + (10px / 2) * 3;  // 20px
}

Ділення

See the Pen scss division by kravets (@raisa69) on CodePen.

В стандартному CSS коса лінія (слеш) зарезервована для використання короткої форми запису властивостей.

Наприклад:

/* коротка форма запису властивостей*/
font: italic bold .8em/1.2 Arial, sans-serif;

/* стандартна форма запису властивостей*/
font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

Приклади застосування ділення:

$var1: 20;
$var2: 4;

p {
    top: 16px / 24px;          // Відображається без змін в стандартному CSS
    top: (20px / 5px);         // Виконується ділення (але тілько при використанні дужок)
    top: #{$var1} / #{$var2};  // Виводиться як звичайний CSS-код, делення не виконується
    top: $var1 / $var2;        // Делення  виконується
    top: random(4) / 5;        


// Делення виконується (якщо використовувати в парі з функцією)
    top: 2px / 4px + 3px;      // Делення виконується, якщо додано ще одна арифметична дія

Оператори порівняння

See the Pen if-else-scss by kravets (@raisa69) on CodePen.

See the Pen scss-if-else by kravets (@raisa69) on CodePen.

Директива @if приймає вираз SassScript і використовує вкладені в неї стилі в разі, якщо вираз повертає будь-яке значення, крім false або null.

Після директиви @if може слідувати кілька виразів @else if і один вислів @else. Якщо вираз @if поверне false, то будуть проводитися спроби обчислення виразів @else if, поки одне з них не поверне істину або до досягнення виразу @else

p {
  @if 1 + 1 == 2 { 
    border: 1px solid;  
  }
  @if 5 < 3 { 
    border: 2px dotted;
  }
  @if null { 
    border: 3px double; 
  }
}

Використання логічних операторів Sass для створення кнопки, у якій буде змінюватися фон в залежності від її ширини:

@mixin button-color ($height, $width) {
    @if (($height < $width) and ($width >= 35px)) {
        background-color: blue;    
    } @else {
        background-color: green;
    }
}

.button {
    @include button-color(20px, 30px)
}