เทคนิคการใช้ Variable Interpolation ใน SCSS

สำหรับใครที่เคยเขียน SCSS อยู่แล้วหรือคนเขียน CSS อยากลองมาใช้ SCSS ดูแล้วสงสัยว่าจะสร้างตัวแปรยังไง คงไม่ยากใช่ไหมครับ ถ้าเราไปดูที่ reference แล้วพบว่า ประกาศตัวแปรโดยใช้ $var ก็ได้ตัวแปรชื่อ var ขึ้นมาแล้ว และยังสามารถนำไปใช้งานร่วมกับ operations ต่างๆอย่างตัว operator พวกนี้ +, -, *, / และอื่นๆต่อได้อีก

ตัวอย่างเช่น: (อ้างอิงจากบทความ SASS คืออะไร)

$textcolor: #ffffff;
p {
  color: $textcolor;
}

แต่ถ้าหากว่าเราไม่ต้องการให้ค่าในตัวแปรนั้นเปลี่ยนแปลงล่ะครับ? เช่น เราต้องการให้ตัวแปรนั้นคงที่ หรือ สร้างตัวแปรที่มีค่าเป็น string ขึ้นมา เราจะประกาศตัวอย่างอย่างไร?

วิธีที่กำลังจะพูดถึงนี้คือ Variable interpolation หรือ String interpolation คุณสมบัติของการใช้ variable interpolation คือ มันจะเป็นการนำ string หรือ ค่าในตัวแปรนั้นๆเข้ามาใช้ได้เลย โดยไม่มีผลกับตัว operator ใดใด

วิธีการใช้งาน Variable Interpolation ใน SCSS

ขั้นแรกให้ประกาศตัวแปรแบบปกติครับ ส่วนการนำค่าในตัวแปรมาแสดง ให้ใช้เป็น #{$ชื่อตัวแปร} แทนการใช้ $ชื่อตัวแปร เฉย ๆ ครับ

อย่างตัวอย่างที่ 1 ข้างล่างนี้คือการนำ string เข้ามาใข้สร้างชื่อ selector และ attribute ครับ

SCSS

$name: foo;
$attr: border;
p.#{name} {
    #{$attr}-color: blue;
}

โดยผลที่ได้จากการคอมไพล์มาเป็น CSS คือ
Compiled CSS

p.foo {
    border-color: blue;
}

และตัวอย่างที่ 2 กับการนำ string เข้ามาอยู่ตรงกลางระหว่างตัว operator / เลย แต่ตัวนั้นไม่มีผลอะไรครับ

SCSS

p {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
}

Compiled CSS

p {
    font: 12px/30px;
}

จะเห็นได้ว่าเป็นประโยชน์มากในการเอาไปประยุกต์ใช้กับการจัดกลุ่ม selector ให้เป็นระเบียบ, การแทนที่ prefix ต่างๆ, การกำหนด file path สำหรับใช้งานอื่นๆ ตัวอย่างที่ผมใช้เองบ่อยๆก็จะเป็นทั้ง 3 อย่างเลยครับ ยกตัวอย่างเช่นการกำหนด file path ที่ต้องใช้ซ้ำๆกันจำนวนมากแบบตัวอย่างข้างล่างนี่ จะเห็นประโยชน์ได้ชัดเลย เวลาแก้ไขจะทำได้ง่ายขึ้นมากครับ

SCSS

$path: "../fonts/";

@font-face {
    font-family: 'open-sans-light';
    src: url(#{$path}opensans-light-webfont.eot);
    src: url(#{$path}opensans-light-webfont.eot?#iefix) format('embedded-opentype'),
        url(#{$path}opensans-light-webfont.woff) format('woff'),
        url(#{$path}opensans-light-webfont.ttf) format('truetype'),
        url(#{$path}opensans-light-webfont.svg#open_sanslight) format('svg');
    font-weight: normal;
    font-style: normal;
}

Compiled CSS

$path: "../fonts/";

@font-face {
font-family: 'open-sans-light';
    src: url(../fonts/opensans-light-webfont.eot);
    src: url(../fonts/opensans-light-webfont.eot?#iefix) format('embedded-opentype'),
        url(../fonts/opensans-light-webfont.woff) format('woff'),
        url(../fonts/opensans-light-webfont.ttf) format('truetype'),
        url(../fonts/opensans-light-webfont.svg#open_sanslight) format('svg');
    font-weight: normal;
    font-style: normal;
}

เท่านี้ผมว่าผู้อ่านคงพอจะสามารถนำความสามารถนี้ของ SCSS ไปใช้งานต่อเพื่อสร้างเว็บไซต์ที่มีคุณภาพได้อีกเยอะแล้วครับ : )

อ้างอิง:
ตัวอย่าง 1 และ ตัวอย่าง 2 ผมนำมาจาก: SCSS Variable interpolation