ชีตสรุป SASS
เอกสารอ้างอิง Sass / SCSS ที่ค้นหาและพิมพ์ได้——ตัวแปร, การซ้อน, โมดูล @use, mixin, ฟังก์ชัน, การควบคุมการทำงาน และโมดูลในตัว ฟรี
ตัวแปร
10$primary: #1d6f42;
ประกาศตัวแปร
$radius: 4px !default;
ตั้งค่าเฉพาะเมื่อยังไม่ถูกกำหนด
$theme: dark !global;
กำหนดค่าให้ scope global จากภายในบล็อก
.box { $w: 10px; width: $w; }
ตัวแปร local จำกัดขอบเขตในบล็อก
$font-stack: 'Inter', sans-serif;
ค่า string / list
$gap: 8px * 2;
ตัวแปรเก็บค่าที่คำนวณได้
color: $primary;
ใช้ตัวแปรเป็นค่าของ property
$sizes: 4px, 8px, 16px;
ตัวแปร list คั่นด้วยจุลภาค
$config: ('gap': 8px);
ตัวแปร map (คู่ key/value)
$on: true;
ตัวแปร boolean สำหรับ control flow
การซ้อน (Nesting)
9.card { .title { color: red; } }
ซ้อน selector ไว้ใน parent
.btn { &:hover { opacity: .8; } }
& อ้างถึง selector ของ parent
.btn { &.is-active {} }
selector parent แบบรวมด้วย &
.list { & + & { margin-top: 8px; } }
กฎ adjacent-sibling โดยใช้ &
.menu { .dark & { color: #fff; } }
วาง & ท้ายเพื่อเติม context นำหน้า
.box { font: { size: 14px; weight: 700; } }
property ซ้อนสำหรับ namespace (font-*)
.grid { > .col {} }
child combinator แบบซ้อน
@media (min-width: 768px) { .col { width: 50%; } }
ซ้อน media query ไว้ในกฎได้ด้วย
.a { color: red; .b & { color: blue; } }
จัดลำดับ context ใหม่โดยย้าย &
Partial และ module
10_base.scss
ไฟล์ partial (ขึ้นต้น underscore ไม่ compile เดี่ยว)
@use 'base';
โหลด module (มี namespace ตามชื่อไฟล์)
base.$primary;
เข้าถึง member ผ่าน namespace
@use 'base' as b;
โหลด module ภายใต้ namespace กำหนดเอง
@use 'base' as *;
โหลดเข้า namespace global (ไม่มี prefix)
@use 'theme' with ($primary: #000);
ตั้งค่าตัวแปร !default ของ module ตอนโหลด
@forward 'buttons';
ส่งออก module ซ้ำจาก entrypoint
@forward 'buttons' as btn-*;
Forward member พร้อม prefix
@forward 'src/list' hide list-reset;
Forward แต่ซ่อน member ที่กำหนด
@forward 'config' with ($gap: 4px !default);
Forward และตั้งค่าเริ่มต้นที่ปรับได้
Mixin
10@mixin reset { margin: 0; padding: 0; }
นิยามบล็อกประกาศที่ใช้ซ้ำได้
@include reset;
นำ mixin มาใช้
@mixin pad($x) { padding: $x; }
Mixin ที่มี argument
@include pad(8px);
ส่ง argument เมื่อ include
@mixin pad($x: 4px) { padding: $x; }
Argument ที่มีค่าเริ่มต้น
@include pad($x: 12px);
ส่ง argument ด้วย keyword
@mixin shadow($a...) { box-shadow: $a; }
Argument แบบไม่จำกัด (variable)
@mixin card { border: 1px solid; @content; }
รับบล็อก @content
@include card { color: red; }
ส่งบล็อกเข้า @content ของ mixin
@mixin on-dark { @content; }
ห่อกฎใดก็ได้ที่ส่งผ่าน @content
ฟังก์ชัน
9@function double($n) { @return $n * 2; }
นิยามฟังก์ชันที่คืนค่า
width: double(8px);
เรียกฟังก์ชันกำหนดเอง
@function pad($x: 4px) { @return $x; }
function ที่มีค่าอาร์กิวเมนต์เริ่มต้น
@function sum($a, $b) { @return $a + $b; }
หลาย argument
@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }
ฟังก์ชันมี control flow ได้
@use 'sass:math';
import module built-in เพื่อใช้ในฟังก์ชัน
@function half($n) { @return math.div($n, 2); }
ใช้ฟังก์ชันของ module ภายในฟังก์ชันของคุณ
@function list-len($l) { @return list.length($l); }
ฟังก์ชันสามารถห่อ built-in ได้
margin: sum(4px, 8px);
ใช้ค่าที่คืนเป็นค่าของ property
ตัวดำเนินการและคณิตศาสตร์
10@use 'sass:math';
โหลด module math สำหรับการหาร
width: math.div(100%, 3);
การหาร (math.div ไม่ใช่ / ที่เลิกใช้)
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 {}
การกลับค่าทางตรรกะ
การควบคุมการทำงาน
9@if $on { display: block; }
บล็อกเงื่อนไข
@else if $alt { display: flex; }
เงื่อนไขเพิ่มเติม
@else { display: none; }
สาขา fallback
@each $c in red, green, blue {}
วนซ้ำบน list
@each $name, $val in $map {}
วนซ้ำบน key และ value ของ map
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
สร้างกฎจาก map
@for $i from 1 through 3 {}
วนรวมค่าสิ้นสุด
@for $i from 0 to 3 {}
วนไม่รวมค่าสิ้นสุด
@while $i > 0 { $i: $i - 1; }
วนซ้ำขณะเงื่อนไขเป็นจริง
Module built-in
14@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%)
ปรับ channel สีตามจำนวนที่กำหนด
color.scale($c, $lightness: 20%)
ปรับสเกล channel สีแบบลื่นไหล
color.mix($a, $b, 50%)
ผสมสองสี
@use 'sass:list'; list.length($l)
จำนวนรายการใน list
list.nth($l, 1)
ดึงรายการที่ n (เริ่มที่ 1)
@use 'sass:map'; map.get($m, 'gap')
อ่านค่าจาก map ด้วย key
map.merge($a, $b)
รวมสอง map
map.keys($m)
ดึง list ของ key ใน map
Placeholder และการสืบทอด
9%card { border: 1px solid; }
selector placeholder (ไม่ออกเป็นผลโดยลำพัง)
.box { @extend %card; }
สืบทอดสไตล์ของ placeholder
.alert { color: red; }
selector ปกติเพื่อ extend
.error { @extend .alert; }
Extend selector จริง
.note { @extend .alert !optional; }
!optional: ไม่ error หากไม่มีเป้าหมาย
%btn-base { padding: 8px; }
ใช้ base ร่วมกันในหลายปุ่ม
.btn-primary { @extend %btn-base; }
หลาย selector ใช้กฎเดียวร่วมกันผ่าน @extend
.btn-ghost { @extend %btn-base; }
การ extend แต่ละครั้งถูกจัดกลุ่มในเอาต์พุต
@include card;
ใช้ mixin แทน @extend สำหรับการใช้ซ้ำที่รับพารามิเตอร์
Interpolation และอื่นๆ
12.icon-#{$name} { content: ''; }
แทรกตัวแปรเข้า selector
width: calc(100% - #{$gap});
แทรกค่า Sass ภายใน calc()
content: '#{$count} items';
แทรกภายใน string
--bs-#{$key}: #{$val};
สร้าง CSS custom property แบบไดนามิก
$map: ('sm': 576px, 'md': 768px);
นิยาม map ของคู่ key/value
map.get($map, 'md')
อ่านค่าจาก map (ผ่าน sass:map)
@debug $value;
แสดงค่าไปยัง console ขณะ compile
@warn 'deprecated';
แสดงคำเตือนตอน compile
@error 'invalid input';
ยุติการ compile ด้วย error
// inline comment
คอมเมนต์แบบเงียบ (ตัดออกจากเอาต์พุต)
/* block comment */
คอมเมนต์ CSS (คงไว้ในเอาต์พุตบีบอัดหากเป็น /*! )
@import 'base';
import แบบเก่า — เลิกใช้ ควรใช้ @use / @forward
ไม่มีรายการที่ตรงกับ “:q”
ต้องการความช่วยเหลือ?
พบปัญหากับเครื่องมือนี้หรือไม่? แจ้งทีมงานของเรา