Karatasi ya Marejeleo ya SASS
Marejeleo ya Sass / SCSS yanayoweza kutafutwa na kuchapishwa — vigeu, kuweka kiota, @use modules, mixins, vitendakazi, mtiririko wa udhibiti na moduli zilizojengwa ndani. Bila malipo.
Vigeu
10$primary: #1d6f42;
Tangaza kigeu
$radius: 4px !default;
Weka tu ikiwa hakijatangazwa tayari
$theme: dark !global;
Weka kwenye wigo wa kimataifa kutoka ndani ya block
.box { $w: 10px; width: $w; }
Kigeu cha ndani, chenye wigo wa block
$font-stack: 'Inter', sans-serif;
Thamani ya string / orodha
$gap: 8px * 2;
Vigeu vinaweza kushikilia thamani zilizokokotolewa
color: $primary;
Tumia kigeu kama thamani ya property
$sizes: 4px, 8px, 16px;
Kigeu cha orodha kilichotenganishwa kwa koma
$config: ('gap': 8px);
Kigeu cha map (jozi za key/value)
$on: true;
Kigeu cha boolean kwa mtiririko wa udhibiti
Kuweka ndani
9.card { .title { color: red; } }
Weka selector ndani ya mzazi wake
.btn { &:hover { opacity: .8; } }
& hurejea selector ya mzazi
.btn { &.is-active {} }
Selector mchanganyiko ya mzazi na &
.list { & + & { margin-top: 8px; } }
Kanuni ya ndugu jirani ukitumia &
.menu { .dark & { color: #fff; } }
Weka & mwisho ili kutangulia muktadha
.box { font: { size: 14px; weight: 700; } }
Properties zilizowekwa ndani kwa namespace (font-*)
.grid { > .col {} }
Child combinator iliyowekwa ndani
@media (min-width: 768px) { .col { width: 50%; } }
Weka media queries ndani ya kanuni pia
.a { color: red; .b & { color: blue; } }
Panga upya muktadha kwa kuhamisha &
Partials na moduli
10_base.scss
Faili la partial (underscore ya mwanzo, halicompiliwi peke yake)
@use 'base';
Pakia moduli (yenye namespace kwa jina la faili)
base.$primary;
Fikia mwanachama kupitia namespace yake
@use 'base' as b;
Pakia moduli chini ya namespace maalum
@use 'base' as *;
Pakia kwenye namespace ya kimataifa (bila kiambishi)
@use 'theme' with ($primary: #000);
Sanidi vigeu vya !default vya moduli wakati wa kupakia
@forward 'buttons';
Export tena moduli kutoka entrypoint
@forward 'buttons' as btn-*;
Forward wanachama wenye kiambishi
@forward 'src/list' hide list-reset;
Forward lakini ficha wanachama maalum
@forward 'config' with ($gap: 4px !default);
Forward na uweke chaguo-msingi zinazoweza kusanidiwa
Mixins
10@mixin reset { margin: 0; padding: 0; }
Tafsiri block inayoweza kutumika tena ya matangazo
@include reset;
Tumia mixin
@mixin pad($x) { padding: $x; }
Mixin yenye hoja
@include pad(8px);
Pitisha hoja unapojumuisha
@mixin pad($x: 4px) { padding: $x; }
Hoja yenye thamani chaguo-msingi
@include pad($x: 12px);
Pitisha hoja kwa neno-msingi
@mixin shadow($a...) { box-shadow: $a; }
Hoja zisizo na kikomo (vigeu)
@mixin card { border: 1px solid; @content; }
Kubali block ya @content
@include card { color: red; }
Pitisha block ndani ya @content ya mixin
@mixin on-dark { @content; }
Funga kanuni zozote zilizopitishwa kupitia @content
Functions
9@function double($n) { @return $n * 2; }
Tafsiri function inayorudisha thamani
width: double(8px);
Ita function maalum
@function pad($x: 4px) { @return $x; }
Function yenye argument chaguo-msingi
@function sum($a, $b) { @return $a + $b; }
Hoja nyingi
@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }
Functions zinaweza kuwa na mtiririko wa udhibiti
@use 'sass:math';
Import moduli iliyojengwa kwa matumizi katika functions
@function half($n) { @return math.div($n, 2); }
Tumia functions za moduli ndani ya zako
@function list-len($l) { @return list.length($l); }
Functions zinaweza kufunga zilizojengwa ndani
margin: sum(4px, 8px);
Tumia thamani iliyorudishwa kama thamani ya property
Operators na hisabati
10@use 'sass:math';
Pakia moduli ya math kwa mgawanyo
width: math.div(100%, 3);
Mgawanyo (math.div, si / iliyopitwa)
width: 100% - 20px;
Utoaji
margin: 4px + 4px;
Ujumlisho
width: 2 * 8px;
Uzidishaji
$r: 10 % 3;
Modulo (baki)
@if $a == $b {}
Ulinganishi wa usawa
@if $a >= 768px {}
Ulinganishi wa zaidi-ya-au-sawa
@if $a and $b {}
And ya kimantiki
@if not $disabled {}
Ukanushi wa kimantiki
Mtiririko wa udhibiti
9@if $on { display: block; }
Block ya masharti
@else if $alt { display: flex; }
Sharti la ziada
@else { display: none; }
Tawi la mbadala
@each $c in red, green, blue {}
Pitia orodha
@each $name, $val in $map {}
Pitia keys na values za map
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
Tengeneza kanuni kutoka map
@for $i from 1 through 3 {}
Loop ikijumuisha thamani ya mwisho
@for $i from 0 to 3 {}
Loop bila kujumuisha thamani ya mwisho
@while $i > 0 { $i: $i - 1; }
Rudia mradi sharti linatimia
Moduli zilizojengwa
14@use 'sass:math'; math.floor(4.7)
Zungusha chini hadi integer ya karibu
math.ceil(4.1)
Zungusha juu hadi integer ya karibu
math.round(4.5)
Zungusha hadi integer ya karibu
math.percentage(math.div(1, 4))
Badilisha uwiano usio na kipimo kuwa asilimia
@use 'sass:string'; string.to-upper-case('hi')
Fanya string kuwa herufi kubwa
string.quote(hello)
Funga thamani kwa alama za nukuu
@use 'sass:color'; color.adjust($c, $lightness: 10%)
Rekebisha chaneli ya rangi kwa kiasi
color.scale($c, $lightness: 20%)
Pima chaneli ya rangi kwa unyumbufu
color.mix($a, $b, 50%)
Changanya rangi mbili
@use 'sass:list'; list.length($l)
Idadi ya vitu katika orodha
list.nth($l, 1)
Pata kitu cha nth (kuanzia 1)
@use 'sass:map'; map.get($m, 'gap')
Soma thamani kutoka map kwa key
map.merge($a, $b)
Unganisha maps mbili
map.keys($m)
Pata orodha ya keys za map
Placeholders na urithi
9%card { border: 1px solid; }
Selector ya placeholder (haitolewi peke yake)
.box { @extend %card; }
Rithi mitindo ya placeholder
.alert { color: red; }
Selector ya kawaida ya kupanua
.error { @extend .alert; }
Panua selector halisi
.note { @extend .alert !optional; }
!optional: usitoe kosa ikiwa lengo halipo
%btn-base { padding: 8px; }
Shiriki msingi kwenye vitufe vingi
.btn-primary { @extend %btn-base; }
Selectors nyingi hushiriki kanuni moja kupitia @extend
.btn-ghost { @extend %btn-base; }
Kila upanuzi hupangwa pamoja kwenye matokeo
@include card;
Pendelea mixins kuliko @extend kwa matumizi yenye vigezo
Uingizaji na mengineyo
12.icon-#{$name} { content: ''; }
Ingiza kigeu ndani ya selector
width: calc(100% - #{$gap});
Ingiza thamani ya Sass ndani ya calc()
content: '#{$count} items';
Ingiza ndani ya string
--bs-#{$key}: #{$val};
Jenga properties maalum za CSS kwa unyumbufu
$map: ('sm': 576px, 'md': 768px);
Tafsiri map ya jozi za key/value
map.get($map, 'md')
Soma thamani ya map (kupitia sass:map)
@debug $value;
Chapisha thamani kwenye console wakati wa kucompile
@warn 'deprecated';
Toa onyo la wakati wa kucompile
@error 'invalid input';
Sitisha ucompiliaji kwa kosa
// inline comment
Maoni kimya (huondolewa kutoka matokeo)
/* block comment */
Maoni ya CSS (huhifadhiwa kwenye matokeo yaliyobanwa ikiwa /*! )
@import 'base';
Import ya zamani — imepitwa, pendelea @use / @forward
Hakuna kipengele kinacholingana na “:q”.
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.