SASS Kopya Kağıdı
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.
Değişkenler
10$primary: #1d6f42;
Bir değişken tanımla
$radius: 4px !default;
Yalnızca tanımlı değilse ayarla
$theme: dark !global;
Blok içinden global kapsama ata
.box { $w: 10px; width: $w; }
Yerel değişken, bloğa kapsamlı
$font-stack: 'Inter', sans-serif;
Dizgi / liste değeri
$gap: 8px * 2;
Değişkenler hesaplanmış değerler tutabilir
color: $primary;
Değişkeni özellik değeri olarak kullan
$sizes: 4px, 8px, 16px;
Virgülle ayrılmış liste değişkeni
$config: ('gap': 8px);
Map değişkeni (anahtar/değer çiftleri)
$on: true;
Akış denetimi için boolean değişken
İç içe yerleştirme
9.card { .title { color: red; } }
Bir seçiciyi ebeveyni içine yerleştir
.btn { &:hover { opacity: .8; } }
& ebeveyn seçiciye işaret eder
.btn { &.is-active {} }
& ile bileşik ebeveyn seçici
.list { & + & { margin-top: 8px; } }
& kullanan komşu-kardeş kuralı
.menu { .dark & { color: #fff; } }
Bağlam öne eklemek için &'yi sona koy
.box { font: { size: 14px; weight: 700; } }
Bir ad alanı için iç içe özellikler (font-*)
.grid { > .col {} }
İç içe alt birleştirici
@media (min-width: 768px) { .col { width: 50%; } }
Medya sorgularını da kural içine yerleştir
.a { color: red; .b & { color: blue; } }
&'yi taşıyarak bağlamı yeniden sırala
Parçalar ve modüller
10_base.scss
Parça dosya (öncül alt çizgi, tek başına derlenmez)
@use 'base';
Modül yükle (dosya adıyla ad alanlı)
base.$primary;
Bir üyeye ad alanı üzerinden eriş
@use 'base' as b;
Modülü özel ad alanı altında yükle
@use 'base' as *;
Global ad alanına yükle (önek yok)
@use 'theme' with ($primary: #000);
Yüklerken modülün !default değişkenlerini yapılandır
@forward 'buttons';
Bir modülü giriş noktasından yeniden dışa aktar
@forward 'buttons' as btn-*;
Üyeleri önek ile ilet
@forward 'src/list' hide list-reset;
İlet ama belirli üyeleri gizle
@forward 'config' with ($gap: 4px !default);
İlet ve yapılandırılabilir varsayılanları ayarla
Mixin'ler
10@mixin reset { margin: 0; padding: 0; }
Yeniden kullanılabilir bildirim bloğu tanımla
@include reset;
Bir mixin uygula
@mixin pad($x) { padding: $x; }
Argümanlı mixin
@include pad(8px);
Dahil ederken argüman geçir
@mixin pad($x: 4px) { padding: $x; }
Varsayılan değerli argüman
@include pad($x: 12px);
Anahtar sözcükle argüman geçir
@mixin shadow($a...) { box-shadow: $a; }
Keyfi (değişken sayıda) argüman
@mixin card { border: 1px solid; @content; }
Bir @content bloğu kabul et
@include card { color: red; }
Mixin'in @content'ine blok geçir
@mixin on-dark { @content; }
@content ile geçirilen keyfi kuralları sarmala
Fonksiyonlar
9@function double($n) { @return $n * 2; }
Değer döndüren fonksiyon tanımla
width: double(8px);
Özel fonksiyon çağır
@function pad($x: 4px) { @return $x; }
Varsayılan argümanlı fonksiyon
@function sum($a, $b) { @return $a + $b; }
Birden çok argüman
@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }
Fonksiyonlar akış denetimi içerebilir
@use 'sass:math';
Fonksiyonlarda kullanmak için yerleşik modül içe aktar
@function half($n) { @return math.div($n, 2); }
Kendi fonksiyonlarında modül fonksiyonlarını kullan
@function list-len($l) { @return list.length($l); }
Fonksiyonlar yerleşikleri sarmalayabilir
margin: sum(4px, 8px);
Döndürülen değeri özellik değeri olarak kullan
Operatörler ve matematik
10@use 'sass:math';
Bölme için math modülünü yükle
width: math.div(100%, 3);
Bölme (math.div, kullanımdan kalkan / değil)
width: 100% - 20px;
Çıkarma
margin: 4px + 4px;
Toplama
width: 2 * 8px;
Çarpma
$r: 10 % 3;
Modülo (kalan)
@if $a == $b {}
Eşitlik karşılaştırması
@if $a >= 768px {}
Büyük eşit karşılaştırması
@if $a and $b {}
Mantıksal ve
@if not $disabled {}
Mantıksal değil
Akış kontrolü
9@if $on { display: block; }
Koşullu blok
@else if $alt { display: flex; }
Ek koşul
@else { display: none; }
Yedek dal
@each $c in red, green, blue {}
Bir liste üzerinde yinele
@each $name, $val in $map {}
Bir map'in anahtar ve değerlerinde yinele
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
Bir map'ten kurallar üret
@for $i from 1 through 3 {}
Bitiş değeri dahil döngü
@for $i from 0 to 3 {}
Bitiş değeri hariç döngü
@while $i > 0 { $i: $i - 1; }
Bir koşul geçerliyken döngü
Yerleşik modüller
14@use 'sass:math'; math.floor(4.7)
En yakın tam sayıya aşağı yuvarla
math.ceil(4.1)
En yakın tam sayıya yukarı yuvarla
math.round(4.5)
En yakın tam sayıya yuvarla
math.percentage(math.div(1, 4))
Birimsiz oranı yüzdeye çevir
@use 'sass:string'; string.to-upper-case('hi')
Bir dizgiyi büyük harfe çevir
string.quote(hello)
Bir değeri tırnak içine al
@use 'sass:color'; color.adjust($c, $lightness: 10%)
Bir renk kanalını bir miktar ayarla
color.scale($c, $lightness: 20%)
Bir renk kanalını akıcı ölçekle
color.mix($a, $b, 50%)
İki rengi harmanla
@use 'sass:list'; list.length($l)
Bir listedeki öğe sayısı
list.nth($l, 1)
n'inci öğeyi al (1 tabanlı)
@use 'sass:map'; map.get($m, 'gap')
Anahtarla bir map'ten değer oku
map.merge($a, $b)
İki map'i birleştir
map.keys($m)
Bir map'in anahtarlarının listesini al
Yer tutucular ve kalıtım
9%card { border: 1px solid; }
Yer tutucu seçici (tek başına çıktı vermez)
.box { @extend %card; }
Bir yer tutucunun stillerini devral
.alert { color: red; }
Genişletilecek normal bir seçici
.error { @extend .alert; }
Gerçek bir seçiciyi genişlet
.note { @extend .alert !optional; }
!optional: hedef eksikse hata verme
%btn-base { padding: 8px; }
Birçok düğme arasında bir taban paylaş
.btn-primary { @extend %btn-base; }
@extend ile birden çok seçici bir kuralı paylaşır
.btn-ghost { @extend %btn-base; }
Her genişletme çıktıda gruplanır
@include card;
Parametreli kullanım için @extend yerine mixin tercih et
Aradeğerleme ve çeşitli
12.icon-#{$name} { content: ''; }
Bir değişkeni seçiciye aradeğerle
width: calc(100% - #{$gap});
calc() içine bir Sass değeri aradeğerle
content: '#{$count} items';
Bir dizgi içine aradeğerle
--bs-#{$key}: #{$val};
CSS özel özelliklerini dinamik oluştur
$map: ('sm': 576px, 'md': 768px);
Anahtar/değer çiftleri map'i tanımla
map.get($map, 'md')
Bir map değeri oku (sass:map ile)
@debug $value;
Derlerken bir değeri konsola yazdır
@warn 'deprecated';
Derleme zamanı uyarısı üret
@error 'invalid input';
Derlemeyi hatayla durdur
// inline comment
Sessiz yorum (çıktıdan çıkarılır)
/* block comment */
CSS yorumu (/*! ise sıkıştırılmış çıktıda kalır)
@import 'base';
Eski import — kullanımdan kalktı, @use / @forward tercih et
“:q” ile eşleşen bir girdi yok.
Yardıma mı ihtiyacınız var?
Bu araçta bir sorun mu buldunuz? Ekibimize bildirin.