SASS Kopya Kağıdı

Ücretsiz

Aranabilir, yazdırılabilir Sass / SCSS başvurusu — değişkenler, iç içe yerleştirme, @use modülleri, mixin'ler, fonksiyonlar, denetim akışı ve yerleşik modüller. Ücretsiz.

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” ile eşleşen bir girdi yok.

SASS Kopya Kağıdı Hakkında

Bu Sass / SCSS hile sayfası, ön işlemciyi sözdiziminden mimariye kadar kapsar: değişkenler, iç içe geçirme, kısmi dosyalar ve modüller, mixinler, fonksiyonlar, operatörler ve matematik, kontrol akışı, yerleşik modüller, yer tutucular ve kalıtım, ve interpolasyon ile diğer çeşitli konular.

Modern Sass'ın nasıl yazıldığını yansıtır — klasik özelliklerin yanı sıra @use modül sistemi ve ad alanlı yerleşik modüller — bu yüzden hem eski bir @import kod tabanını sürdürmek hem de yeni modül tabanlı stil sayfaları yazmak için eşit derecede kullanışlıdır.

Sayfa ücretsizdir ve istemci tarafında oluşturulur. Arama kutusuyla her kod parçasını canlı filtreleyin, yapışkan içindekiler tablosundan bir bölüme atlayın, herhangi bir kod parçasına tıklayarak stil sayfanıza kopyalayın ve kağıt bir SCSS referansı için sayfayı yazdırın.

SASS Kopya Kağıdı Nasıl Kullanılır

Değişkenler ve İç içe geçirmeden Mixinler üzerinden Yerleşik modüllere kadar bölümleri gözden geçirin.
Sayfayı canlı filtrelemek için mixin, @use veya map gibi bir özellik arayın.
Yapışkan kenar çubuğu üzerinden Kontrol akışı veya Yer tutucular & kalıtıma atlayın.
SCSS'i stil sayfanıza kopyalamak için bir kod parçasına veya kopyalama simgesine tıklayın.
Stilleri yeniden düzenlerken kağıt bir referans tercih ediyorsanız sayfayı yazdırın.

Sıkça sorulan sorular

On bölüm: değişkenler, iç içe geçirme, kısmi dosyalar ve modüller, mixinler, fonksiyonlar, operatörler ve matematik, kontrol akışı, yerleşik modüller, yer tutucular ve kalıtım, ve interpolasyon ile çeşitli konular.

Evet. Kısmi dosyalar ve modüller bölümü @use tabanlı içe aktarmaları ve ad alanlarını gösterir, yerleşik modüller bölümü ise modern Sass'ta kullanılan ad alanlı standart fonksiyonları listeler.

İkisi de sayfada: mixinler @include ile dahil edilir ve argüman alabilir, yer tutucular ise @extend ile genişletilir ve tek bir üretilen seçiciyi paylaşır. İlgili bölümler her birinin sözdizimini gösterir.

Evet. Herhangi bir SCSS kod parçasına veya üzerine gelindiğinde çıkan kopyalama simgesine tıklayın, kısa bir onayla panonuza kopyalanır.

Evet, tamamen ücretsiz — istemci taraflı, aranabilir ve hesap olmadan yazdırılabilir.

Popüler aramalar

sass cheat sheet scss söz dizimi referansı sass mixin örneği sass değişkenleri sass iç içe yerleştirme kuralları sass use vs import sass yerleşik modülleri sass each ve for döngüleri

Yardıma mı ihtiyacınız var?

Bu araçta bir sorun mu buldunuz? Ekibimize bildirin.

Sorun bildir

Bu ücretsiz aracı kendi web sitenize ekleyin — aşağıdaki kodu kopyalayıp yapıştırın.

<iframe src="https://tweakee.com/tr/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 Kopya Kağıdı

Variables

Nesting

Partials & modules

Mixins

Functions

Operators & math

Control flow

Built-in modules

Placeholders & inheritance

Interpolation & misc

SASS Kopya Kağıdı Hakkında

SASS Kopya Kağıdı Nasıl Kullanılır

Sıkça sorulan sorular

Sass hile sayfası neleri kapsıyor?

@use modül sistemini kapsıyor mu?

Bir mixin ile bir yer tutucu arasındaki fark nedir?

Kod parçalarını tek tıkla kopyalayabilir miyim?

SCSS referansı ücretsiz mi?

İlgili Araçlar

Popüler aramalar

Bu aracı yerleştir