Οδηγός SASS

Δωρεάν

Ένας οδηγός αναφοράς Sass / SCSS με δυνατότητα αναζήτησης και εκτύπωσης — μεταβλητές, ένθεση, @use modules, mixins, συναρτήσεις, ροή ελέγχου και ενσωματωμένες ενότητες. Δωρεάν.

Μεταβλητές

$primary: #1d6f42;

Δήλωση μεταβλητής

$radius: 4px !default;

Ορισμός μόνο αν δεν έχει ήδη οριστεί

$theme: dark !global;

Ανάθεση στο global scope μέσα από block

.box { $w: 10px; width: $w; }

Τοπική μεταβλητή, scoped στο block

$font-stack: 'Inter', sans-serif;

Τιμή string / list

$gap: 8px * 2;

Οι μεταβλητές κρατούν υπολογισμένες τιμές

color: $primary;

Χρήση μεταβλητής ως τιμή ιδιότητας

$sizes: 4px, 8px, 16px;

Μεταβλητή list χωρισμένη με κόμμα

$config: ('gap': 8px);

Μεταβλητή map (ζεύγη key/value)

$on: true;

Boolean μεταβλητή για ροή ελέγχου

Φώλιασμα

.card { .title { color: red; } }

Φώλιασμα selector μέσα στον γονέα του

.btn { &:hover { opacity: .8; } }

Το & αναφέρεται στον γονικό selector

.btn { &.is-active {} }

Σύνθετος γονικός selector με &

.list { & + & { margin-top: 8px; } }

Κανόνας adjacent-sibling με &

.menu { .dark & { color: #fff; } }

Τοποθέτηση & στο τέλος για πρόθεμα context

.box { font: { size: 14px; weight: 700; } }

Φωλιασμένες ιδιότητες για namespace (font-*)

.grid { > .col {} }

Φωλιασμένος child combinator

@media (min-width: 768px) { .col { width: 50%; } }

Φώλιασμα media queries και μέσα σε κανόνα

.a { color: red; .b & { color: blue; } }

Αναδιάταξη context μετακινώντας το &

Partials & modules

_base.scss

Partial αρχείο (αρχικό underscore, δεν μεταγλωττίζεται μόνο)

@use 'base';

Φόρτωση module (namespaced από το όνομα αρχείου)

base.$primary;

Πρόσβαση μέλους μέσω του namespace του

@use 'base' as b;

Φόρτωση module με προσαρμοσμένο namespace

@use 'base' as *;

Φόρτωση στο global namespace (χωρίς πρόθεμα)

@use 'theme' with ($primary: #000);

Διαμόρφωση !default μεταβλητών module κατά τη φόρτωση

@forward 'buttons';

Επανεξαγωγή module από entrypoint

@forward 'buttons' as btn-*;

Forward μελών με πρόθεμα

@forward 'src/list' hide list-reset;

Forward με απόκρυψη συγκεκριμένων μελών

@forward 'config' with ($gap: 4px !default);

Forward και ορισμός παραμετροποιήσιμων defaults

Mixins

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

Ορισμός επαναχρησιμοποιήσιμου block δηλώσεων

@include reset;

Εφαρμογή mixin

@mixin pad($x) { padding: $x; }

Mixin με όρισμα

@include pad(8px);

Πέρασμα ορίσματος κατά το include

@mixin pad($x: 4px) { padding: $x; }

Όρισμα με προεπιλεγμένη τιμή

@include pad($x: 12px);

Πέρασμα ορίσματος με keyword

@mixin shadow($a...) { box-shadow: $a; }

Αυθαίρετα (variable) ορίσματα

@mixin card { border: 1px solid; @content; }

Αποδοχή @content block

@include card { color: red; }

Πέρασμα block στο @content του mixin

@mixin on-dark { @content; }

Τύλιγμα αυθαίρετων κανόνων μέσω @content

Συναρτήσεις

@function double($n) { @return $n * 2; }

Ορισμός συνάρτησης που επιστρέφει τιμή

width: double(8px);

Κλήση προσαρμοσμένης συνάρτησης

@function pad($x: 4px) { @return $x; }

Συνάρτηση με προεπιλεγμένο όρισμα

@function sum($a, $b) { @return $a + $b; }

Πολλαπλά ορίσματα

@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }

Οι συναρτήσεις μπορούν να έχουν ροή ελέγχου

@use 'sass:math';

Εισαγωγή built-in module για χρήση σε συναρτήσεις

@function half($n) { @return math.div($n, 2); }

Χρήση συναρτήσεων module μέσα στις δικές σου

@function list-len($l) { @return list.length($l); }

Οι συναρτήσεις μπορούν να τυλίγουν built-ins

margin: sum(4px, 8px);

Χρήση της επιστρεφόμενης τιμής ως τιμή ιδιότητας

Τελεστές & μαθηματικά

@use 'sass:math';

Φόρτωση module math για διαίρεση

width: math.div(100%, 3);

Διαίρεση (math.div, όχι το deprecated /)

width: 100% - 20px;

Αφαίρεση

margin: 4px + 4px;

Πρόσθεση

width: 2 * 8px;

Πολλαπλασιασμός

$r: 10 % 3;

Modulo (υπόλοιπο)

@if $a == $b {}

Σύγκριση ισότητας

@if $a >= 768px {}

Σύγκριση μεγαλύτερο-ή-ίσο

@if $a and $b {}

Λογικό and

@if not $disabled {}

Λογική άρνηση

Ροή ελέγχου

@if $on { display: block; }

Υπό συνθήκη block

@else if $alt { display: flex; }

Πρόσθετη συνθήκη

@else { display: none; }

Κλάδος fallback

@each $c in red, green, blue {}

Επανάληψη πάνω σε list

@each $name, $val in $map {}

Επανάληψη στα keys και values ενός map

@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }

Παραγωγή κανόνων από map

@for $i from 1 through 3 {}

Loop με συμπερίληψη της τελικής τιμής

@for $i from 0 to 3 {}

Loop χωρίς την τελική τιμή

@while $i > 0 { $i: $i - 1; }

Βρόχος όσο ισχύει συνθήκη

Built-in modules

@use 'sass:math'; math.floor(4.7)

Στρογγυλοποίηση προς τα κάτω στον πλησιέστερο ακέραιο

math.ceil(4.1)

Στρογγυλοποίηση προς τα πάνω στον πλησιέστερο ακέραιο

math.round(4.5)

Στρογγυλοποίηση στον πλησιέστερο ακέραιο

math.percentage(math.div(1, 4))

Μετατροπή λόγου χωρίς μονάδα σε ποσοστό

@use 'sass:string'; string.to-upper-case('hi')

Μετατροπή string σε κεφαλαία

string.quote(hello)

Τύλιγμα τιμής σε εισαγωγικά

@use 'sass:color'; color.adjust($c, $lightness: 10%)

Προσαρμογή καναλιού χρώματος κατά μια τιμή

color.scale($c, $lightness: 20%)

Ομαλή κλιμάκωση καναλιού χρώματος

color.mix($a, $b, 50%)

Ανάμειξη δύο χρωμάτων

@use 'sass:list'; list.length($l)

Πλήθος στοιχείων σε list

list.nth($l, 1)

Λήψη n-οστού στοιχείου (1-based)

@use 'sass:map'; map.get($m, 'gap')

Ανάγνωση τιμής από map με key

map.merge($a, $b)

Συγχώνευση δύο maps

map.keys($m)

Λήψη list με τα keys ενός map

Placeholders & κληρονομικότητα

%card { border: 1px solid; }

Placeholder selector (δεν εξάγεται μόνος του)

.box { @extend %card; }

Κληρονόμηση στυλ placeholder

.alert { color: red; }

Κανονικός selector για extend

.error { @extend .alert; }

Extend πραγματικού selector

.note { @extend .alert !optional; }

!optional: χωρίς σφάλμα αν λείπει ο στόχος

%btn-base { padding: 8px; }

Κοινή base για πολλά buttons

.btn-primary { @extend %btn-base; }

Πολλοί selectors μοιράζονται έναν κανόνα μέσω @extend

.btn-ghost { @extend %btn-base; }

Κάθε extension ομαδοποιείται στην έξοδο

@include card;

Προτιμήστε mixins αντί @extend για παραμετρική επαναχρήση

Interpolation & διάφορα

.icon-#{$name} { content: ''; }

Interpolation μεταβλητής σε selector

width: calc(100% - #{$gap});

Interpolation τιμής Sass μέσα σε calc()

content: '#{$count} items';

Interpolation μέσα σε string

--bs-#{$key}: #{$val};

Δυναμική δημιουργία CSS custom properties

$map: ('sm': 576px, 'md': 768px);

Ορισμός map με ζεύγη key/value

map.get($map, 'md')

Ανάγνωση τιμής map (μέσω sass:map)

@debug $value;

Εκτύπωση τιμής στην κονσόλα κατά τη μεταγλώττιση

@warn 'deprecated';

Έκδοση προειδοποίησης κατά τη μεταγλώττιση

@error 'invalid input';

Διακοπή μεταγλώττισης με σφάλμα

// inline comment

Silent σχόλιο (αφαιρείται από την έξοδο)

/* block comment */

CSS σχόλιο (διατηρείται σε compressed έξοδο αν /*! )

@import 'base';

Legacy import — deprecated, προτιμήστε @use / @forward

Καμία καταχώριση δεν ταιριάζει με «:q».

Χρειάζεστε βοήθεια;

Βρήκατε πρόβλημα με αυτό το εργαλείο; Ενημερώστε μας.

Αναφορά προβλήματος

Προσθέστε αυτό το δωρεάν εργαλείο στον δικό σας ιστότοπο — αντιγράψτε και επικολλήστε τον παρακάτω κώδικα.

<iframe src="https://tweakee.com/el/studio/dev/sass-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>