ฟังก์ชัน Sass และลำดับการควบคุม

ฟังก์ชันในตัวของ Sass

<div class="darker">darken($base, 15%)</div>
  <div class="lighter">lighten($base, 15%)</div>
  <div class="faded">transparentize($base, 0.5)</div>
  <div class="mixed">mix($base, white, 60%)</div>

ฟังก์ชันสี

ฟังก์ชันแบบกำหนดเองด้วย @function

<h2 class="heading">Heading (2rem)</h2>
  <p class="body">Body text (1.125rem)</p>

การควบคุมการทำงานด้วย @if @else

<p class="text-large">Large text variant</p>
  <p class="text-small">Small text variant</p>
  <p class="text-default">Default text variant</p>

การวนซ้ำด้วย @each

<button class="btn-primary">Primary</button>
  <button class="btn-danger">Danger</button>
  <button class="btn-success">Success</button>

การวนซ้ำด้วย @for

<div class="col-1">col-1 (20%)</div>
  <div class="col-2">col-2 (40%)</div>
  <div class="col-3">col-3 (60%)</div>
  <div class="col-4">col-4 (80%)</div>
  <div class="col-5">col-5 (100%)</div>

การวนซ้ำด้วย @while

<div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>

แมป Sass

<div class="box">Responsive box (resize wider than 768px to see color change)</div>

@error @warn @debug

การแทรกค่า #{...}

<p class="element">Interpolated property (#{$property})</p>

ตรวจสอบอย่างรวดเร็ว

สรุปทบทวน