Οδηγός SASS

Δωρεάν

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

Variables

$primary: #1d6f42;

Declare a variable

$radius: 4px !default;

Set only if not already defined

$theme: dark !global;

Assign to the global scope from inside a block

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

Local variable, scoped to the block

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

String / list value

$gap: 8px * 2;

Variables can hold computed values

color: $primary;

Use a variable as a property value

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

A comma-separated list variable

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

A map variable (key/value pairs)

$on: true;

Boolean variable for control flow

Nesting

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

Nest a selector inside its parent

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

& refers to the parent selector

.btn { &.is-active {} }

Compound parent selector with &

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

Adjacent-sibling rule using &

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

Place & last to prepend a context

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

Nested properties for a namespace (font-*)

.grid { > .col {} }

Nested child combinator

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

Nest media queries inside a rule too

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

Reorder context by moving &

Partials & modules

_base.scss

Partial file (leading underscore, not compiled alone)

@use 'base';

Load a module (namespaced by file name)

base.$primary;

Access a member through its namespace

@use 'base' as b;

Load a module under a custom namespace

@use 'base' as *;

Load into the global namespace (no prefix)

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

Configure a module's !default variables on load

@forward 'buttons';

Re-export a module from an entrypoint

@forward 'buttons' as btn-*;

Forward members with a prefix

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

Forward but hide specific members

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

Forward and set configurable defaults

Mixins

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

Define a reusable block of declarations

@include reset;

Apply a mixin

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

Mixin with an argument

@include pad(8px);

Pass an argument when including

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

Argument with a default value

@include pad($x: 12px);

Pass an argument by keyword

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

Arbitrary (variable) arguments

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

Accept a @content block

@include card { color: red; }

Pass a block into the mixin's @content

@mixin on-dark { @content; }

Wrap arbitrary rules passed via @content

Functions

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

Define a function that returns a value

width: double(8px);

Call a custom function

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

Function with a default argument

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

Multiple arguments

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

Functions may contain control flow

@use 'sass:math';

Import a built-in module for use in functions

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

Use module functions inside your own

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

Functions can wrap built-ins

margin: sum(4px, 8px);

Use the returned value as a property value

Operators & math

@use 'sass:math';

Load the math module for division

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

Division (math.div, not the deprecated /)

width: 100% - 20px;

Subtraction

margin: 4px + 4px;

Addition

width: 2 * 8px;

Multiplication

$r: 10 % 3;

Modulo (remainder)

@if $a == $b {}

Equality comparison

@if $a >= 768px {}

Greater-than-or-equal comparison

@if $a and $b {}

Logical and

@if not $disabled {}

Logical negation

Control flow

@if $on { display: block; }

Conditional block

@else if $alt { display: flex; }

Additional condition

@else { display: none; }

Fallback branch

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

Iterate over a list

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

Iterate over a map's keys and values

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

Generate rules from a map

@for $i from 1 through 3 {}

Loop inclusive of the end value

@for $i from 0 to 3 {}

Loop exclusive of the end value

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

Loop while a condition holds

Built-in modules

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

Round down to the nearest integer

math.ceil(4.1)

Round up to the nearest integer

math.round(4.5)

Round to the nearest integer

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

Convert a unitless ratio to a percentage

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

Uppercase a string

string.quote(hello)

Wrap a value in quotes

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

Adjust a colour channel by an amount

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

Scale a colour channel fluidly

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

Blend two colours

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

Number of items in a list

list.nth($l, 1)

Get the nth item (1-based)

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

Read a value from a map by key

map.merge($a, $b)

Merge two maps

map.keys($m)

Get a list of a map's keys

Placeholders & inheritance

%card { border: 1px solid; }

Placeholder selector (not output on its own)

.box { @extend %card; }

Inherit a placeholder's styles

.alert { color: red; }

A normal selector to extend

.error { @extend .alert; }

Extend a real selector

.note { @extend .alert !optional; }

!optional: do not error if the target is missing

%btn-base { padding: 8px; }

Share a base across many buttons

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

Multiple selectors share one rule via @extend

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

Each extension is grouped in the output

@include card;

Prefer mixins over @extend for parameterised reuse

Interpolation & misc

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

Interpolate a variable into a selector

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

Interpolate a Sass value inside calc()

content: '#{$count} items';

Interpolate inside a string

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

Build CSS custom properties dynamically

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

Define a map of key/value pairs

map.get($map, 'md')

Read a map value (via sass:map)

@debug $value;

Print a value to the console while compiling

@warn 'deprecated';

Emit a compile-time warning

@error 'invalid input';

Abort compilation with an error

// inline comment

Silent comment (stripped from output)

/* block comment */

CSS comment (kept in compressed output if /*! )

@import 'base';

Legacy import — deprecated, prefer @use / @forward

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

Σχετικά με το Οδηγός SASS

Αυτό το φύλλο εξαπάτησης για Sass / SCSS καλύπτει τον προεπεξεργαστή από τη σύνταξη έως την αρχιτεκτονική: μεταβλητές, ένθεση, partials και modules, mixins, συναρτήσεις, τελεστές και μαθηματικά, ροή ελέγχου, ενσωματωμένα modules, placeholders και κληρονομικότητα, και interpolation με λοιπά διάφορα.

Αντικατοπτρίζει το πώς γράφεται το σύγχρονο Sass — το σύστημα modules @use και τα ενσωματωμένα modules με namespace μαζί με τα κλασικά χαρακτηριστικά — οπότε είναι εξίσου χρήσιμο για τη συντήρηση μιας παλιότερης βάσης κώδικα με @import και για τη συγγραφή νέων stylesheets βασισμένων σε modules.

Το φύλλο είναι δωρεάν και αποδίδεται από την πλευρά του client. Φιλτράρετε κάθε απόσπασμα ζωντανά με το πλαίσιο αναζήτησης, μεταβείτε σε μια ενότητα από τον κολλημένο πίνακα περιεχομένων, κάντε κλικ σε οποιοδήποτε απόσπασμα για να το αντιγράψετε στο stylesheet σας και εκτυπώστε τη σελίδα για μια αναφορά SCSS σε χαρτί.

Πώς να χρησιμοποιήσετε το Οδηγός SASS

Εξετάστε τις ενότητες, από τις Μεταβλητές και την Ένθεση έως τα Mixins και τα Ενσωματωμένα modules.
Αναζητήστε ένα χαρακτηριστικό όπως mixin, @use ή map για ζωντανό φιλτράρισμα του φύλλου.
Μεταβείτε στη Ροή ελέγχου ή στα Placeholders & κληρονομικότητα μέσω της κολλημένης πλαϊνής μπάρας.
Κάντε κλικ σε ένα απόσπασμα ή στο εικονίδιο αντιγραφής του για να αντιγράψετε το SCSS στο stylesheet σας.
Εκτυπώστε το φύλλο αν προτιμάτε μια αναφορά σε χαρτί κατά την αναδιαμόρφωση στυλ.

Συχνές ερωτήσεις

Δέκα ενότητες: μεταβλητές, ένθεση, partials και modules, mixins, συναρτήσεις, τελεστές και μαθηματικά, ροή ελέγχου, ενσωματωμένα modules, placeholders και κληρονομικότητα, και interpolation συν διάφορα.

Ναι. Η ενότητα partials και modules δείχνει εισαγωγές βασισμένες σε @use και namespacing, και η ενότητα ενσωματωμένων modules απαριθμεί τις τυπικές συναρτήσεις με namespace που χρησιμοποιούνται στο σύγχρονο Sass.

Και τα δύο βρίσκονται στο φύλλο: τα mixins περιλαμβάνονται με @include και μπορούν να δέχονται ορίσματα, ενώ τα placeholders επεκτείνονται με @extend και μοιράζονται έναν ενιαίο παραγόμενο επιλογέα. Οι σχετικές ενότητες δείχνουν τη σύνταξη για καθένα.

Ναι. Κάντε κλικ σε οποιοδήποτε απόσπασμα SCSS ή στο εικονίδιο αντιγραφής κατά το πέρασμα του ποντικιού και αντιγράφεται στο πρόχειρό σας με μια σύντομη επιβεβαίωση.

Ναι, εντελώς δωρεάν — από την πλευρά του client, με δυνατότητα αναζήτησης και εκτυπώσιμη χωρίς λογαριασμό.

Δημοφιλείς αναζητήσεις

sass cheat sheet scss syntax reference sass mixins example sass variables sass nesting rules use vs import sass sass built-in modules sass each and for loops

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

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

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

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

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

Οδηγός SASS

Variables

Nesting

Partials & modules

Mixins

Functions

Operators & math

Control flow

Built-in modules

Placeholders & inheritance

Interpolation & misc

Σχετικά με το Οδηγός SASS

Πώς να χρησιμοποιήσετε το Οδηγός SASS

Συχνές ερωτήσεις

Τι καλύπτει το φύλλο εξαπάτησης για Sass;

Καλύπτει το σύστημα modules @use;

Ποια είναι η διαφορά μεταξύ ενός mixin και ενός placeholder;

Μπορώ να αντιγράψω αποσπάσματα με ένα κλικ;

Είναι δωρεάν η αναφορά SCSS;

Σχετικά Εργαλεία

Δημοφιλείς αναζητήσεις

Ενσωματώστε αυτό το εργαλείο