Operatory w Sass

Sass umożliwia używanie różnych operatorów matematycznych, takich jak dodawanie, odejmowanie, mnożenie, dzielenie i modulo. Te operatory mogą być bardzo przydatne, szczególnie podczas pracy ze zmiennymi i obliczeń na wielkościach.

Dodawanie (+) i Odejmowanie (-)

Dodawanie i odejmowanie działają tak, jak można się spodziewać. Na przykład:

1.container {
2  width: 800px + 200px; // Wynik: width: 1000px
3}

Odejmowanie działa podobnie:

1.container {
2  width: 1000px - 200px; // Wynik: width: 800px
3}

Mnożenie (*) i Dzielenie (/)

Mnożenie i dzielenie także działają tak, jak można się spodziewać:

1.container {
2  width: 300px * 2; // Wynik: width: 600px
3}

Podczas używania operatora dzielenia, musisz być jednak ostrożny. Sass interpretuje wartości z ułamkiem jako skróty dla wartości CSS, takich jak font: 16px/24px. Aby uniknąć nieporozumień, zaleca się umieszczanie operacji dzielenia w nawiasach:

1.container {
2  width: (800px / 2); // Wynik: width: 400px
3}

Modulo (%)

Operator modulo zwraca resztę z dzielenia:

1p {
2  margin: (10 % 3); // Wynik: margin: 1;
3}

Interpolacja #{}

Sass oferuje również interpolację, która jest używana do wstawiania wartości zmiennych do selektorów, nazw właściwości, wartości i innych miejsc, które normalnie nie akceptują zmiennych. Interpolacja jest zdefiniowana za pomocą #{}. Przykład:

1$name: foo;
2$attr: border;
3
4p.#{$name} {
5  #{$attr}-color: blue;
6}

Po skompilowaniu do CSS, otrzymamy:

1p.foo {
2  border-color: blue;
3}

Jak widać, operatory w Sass dają dużą elastyczność i są bardzo przydatne do tworzenia bardziej dynamicznego i konfigurowalnego CSS.

Zadanie: Kalkulator Stylów Sass

Twoim zadaniem jest stworzenie arkusza stylów przy użyciu Sass, który dynamicznie oblicza różne wartości CSS za pomocą operatorów matematycznych.

Krok 1: Utwórz plik Sass

Stwórz plik Sass o nazwie styles.scss.

Krok 2: Zdefiniuj zmienne

Zdefiniuj następujące zmienne:

1$base-width: 800px;
2$base-height: 600px;
3$padding: 20px;
4$multiplier: 1.5;
5$font-size: 16px;
6$spacing: 10px;
7$primary-color: blue;
8$danger-color: red;

Krok 3: Obliczenia

Użyj operatorów do dynamicznego obliczania wartości:

1. Dodaj 200px do $base-width dla klasy .container.
2. Odejmij 100px od $base-height dla klasy .header.
3. Pomnóż $font-size przez $multiplier dla klasy .text-large.
4. Podziel $base-width przez 2 dla klasy .sidebar.
5. Użyj modulo na $spacing przez 3 dla klasy .list-item (ustaw margin).

Krok 4: Interpolacja

Użyj interpolacji do zdefiniowania klasy przycisku z dynamicznym tłem:

1@mixin button($color) {
2  background-color: $color;
3  color: white;
4  padding: $padding;
5  &:hover {
6    background-color: darken($color, 10%);
7  }
8}
9
10.button-primary {
11  @include button($primary-color);
12}
13
14.button-danger {
15  @include button($danger-color);
16}

Krok 5: HTML

Dodaj odpowiedni HTML, aby przetestować swoje style:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Projekt Sass</title>
7  <link rel="stylesheet" href="css/main.css">
8</head>
9<body>
10  <div class="container">
11    <ul>
12      <li class="list-item">Element 1</li>
13      <li class="list-item">Element 2</li>
14      <li class="list-item">Element 3</li>
15    </ul>
16    <button class="button-primary">Przycisk Primary</button>
17    <button class="button-danger">Przycisk Danger</button>
18  </div>
19  <nav class="sidebar">
20    <ul>
21      <li>Link 1</li>
22      <li>Link 2</li>
23      <li>Link 3</li>
24    </ul>
25  </nav>
26</body>
27</html>

Krok 6: Kompilacja

Skompiluj plik Sass do CSS i upewnij się, że wszystkie obliczenia są poprawnie zastosowane.

Efekt końcowy

Upewnij się, że twój CSS wygląda podobnie do poniższego:

1.container {
2  width: 1000px; /* 800px + 200px */
3}
4
5.header {
6  height: 500px; /* 600px - 100px */
7}
8
9.text-large {
10  font-size: 24px; /* 16px * 1.5 */
11}
12
13.sidebar {
14  width: 400px; /* 800px / 2 */
15}
16
17.list-item {
18  margin: 1px; /* 10px % 3 */
19}
20
21.button-primary {
22  background-color: blue;
23  color: white;
24  padding: 20px;
25}
26.button-primary:hover {
27  background-color: darkblue;
28}
29
30.button-danger {
31  background-color: red;
32  color: white;
33  padding: 20px;
34}
35.button-danger:hover {
36  background-color: darkred;
37}

Powodzenia!

1<!DOCTYPE html>
2<html lang="pl">
3<head><title>Listy rozwijane</title></head>
4<body style="background:#d4a574;font-family:serif;padding:20px;color:#3d2914">
5<h1>Listy Rozwijane</h1>
6<select><option>Ramzes</option><option>Tutanchamon</option></select>
7</body>
8</html>