---
title: "SCSS"
description: "SCSS to nowoczesna składnia preprocesora Sass rozszerzająca CSS o zmienne, zagnieżdżanie i mixiny. Poznaj różnice wobec CSS oraz zasadę kompilacji."
url: "https://nodea.pl/pl/slownik-pojec/scss"
lang: "pl"
updated: "2026-07-13"
---

# SCSS

> SCSS to główna, zgodna z CSS składnia preprocesora Sass, która rozszerza arkusze stylów o zmienne, zagnieżdżanie reguł, mixiny i funkcje, a następnie kompiluje kod do zwykłego CSS.

**SCSS** (Sassy CSS) to główna składnia preprocesora **Sass**, która rozszerza język [CSS](https://nodea.pl/pl/slownik-pojec/css) o możliwości znane z języków programowania. Kod SCSS nie jest bezpośrednio rozumiany przez przeglądarki — najpierw przechodzi przez proces [kompilacji](https://nodea.pl/pl/slownik-pojec/kompilacja) do zwykłego CSS, który dopiero trafia do użytkownika. Kluczową cechą SCSS jest pełna zgodność z CSS: każdy poprawny arkusz CSS jest zarazem poprawnym plikiem SCSS.

## Na czym polega SCSS

SCSS dodaje do stylów mechanizmy, których brakuje w czystym CSS. Najważniejsze to:

- **Zmienne** — wartości takie jak kolory czy odstępy zapisuje się raz (np. *$primary: #0d6efd;*) i używa w wielu miejscach;
- **Zagnieżdżanie** — reguły dla elementów potomnych umieszcza się wewnątrz reguły rodzica, co odzwierciedla strukturę HTML i skraca zapis;
- **Mixiny** — nazwane bloki deklaracji przyjmujące argumenty, wstawiane w dowolnym miejscu dyrektywą *@include*;
- **Częściowe pliki i import** — style dzieli się na moduły (*@use*, *@import*) i składa w jeden arkusz;
- **Funkcje i operatory** — obliczenia, np. przekształcanie kolorów czy działania matematyczne na wymiarach.

Kompilację uruchamia się narzędziami takimi jak Dart Sass, zwykle zintegrowanymi z bundlerem (Vite, Webpack) w procesie budowania [frontendu](https://nodea.pl/pl/slownik-pojec/frontend).

## Zastosowanie w praktyce

SCSS jest standardem w większych projektach frontendowych, gdzie surowy CSS staje się trudny w utrzymaniu. Dzięki zmiennym i mixinom łatwo buduje się spójne systemy designu, motywy jasny/ciemny czy responsywne breakpointy. Popularny framework [Bootstrap](https://nodea.pl/pl/slownik-pojec/bootstrap) udostępnia źródła w SCSS, co pozwala dostosować kolory i rozmiary przez nadpisanie zmiennych zamiast walki ze specyficznością reguł. Dodatkowo mechanizm częściowych plików pozwala rozbić style na logiczne moduły — osobno przyciski, formularze, siatkę — i utrzymywać porządek w dużym projekcie. Konkurencyjnym preprocesorem o zbliżonych możliwościach jest [LESS](https://nodea.pl/pl/slownik-pojec/less), jednak ekosystem Sass/SCSS pozostaje dziś dominującym wyborem, wspieranym przez większość narzędzi budujących frontend.

### Czym różni się SCSS od Sass?

Sass to preprocesor, a SCSS to jedna z jego dwóch składni. SCSS (rozszerzenie .scss) jest w pełni zgodne z CSS i używa klamer oraz średników. Starsza składnia Sass (.sass) opiera się na wcięciach i pomija nawiasy. Obie kompilują się do tego samego CSS, ale SCSS jest dziś zdecydowanie popularniejsze.

## Powiązane

- [CSS](https://nodea.pl/pl/slownik-pojec/css)
- [LESS](https://nodea.pl/pl/slownik-pojec/less)
- [Kompilacja](https://nodea.pl/pl/slownik-pojec/kompilacja)
- [Frontend](https://nodea.pl/pl/slownik-pojec/frontend)
- [Bootstrap](https://nodea.pl/pl/slownik-pojec/bootstrap)

---

Wersje językowe: [en](https://nodea.io/en/glossary/scss.md)  
Spis treści witryny: [llms.txt](https://nodea.pl/pl/llms.txt)