SCSS Variable Interpolation #{} / lang::ภาษาไทย

วันนี้เห็นโพสต์พี่เติ้งโพสต์ใน Facebook ว่าเจอโค้ดที่เขียนด้วย SCSS ในท่าประมาณว่า #{$fa-css-prefix}-border { .... } ว่ามันคืออะไร เลยเข้าไปตอบและถือโอกาสเขียน Blog เลย เพราะคิดว่ามันเป็นความสามารถที่สำคัญมากๆของ SCSS ถ้าได้ใช้จะจัดการโค้ด SCSS ได้ง่ายขึ้นมากเลยครับ
ตัวสรุปสามารถดูในภาพข้างล่างได้เลยครับ,

scss-variable-interpolation

แล้ว Variable Interpolation คืออะไร?
ความหมายตรงตัวเลยครับ มันคือการสอดแทรกตัวแปร วิธีการใช้คือ

ตัวอย่างที่ 1
SCSS

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

Compiled CSS

p.foo {
  border-color: blue;
}

ซึ่งการใช้งานหลักๆจะเป็นไปในรูปแบบของ text ครับ ซึ่ง operations ต่างๆจะไม่มีผลกับค่าที่อยู่ภายใน #{} เลย
หากใครที่เขียน SCSS อยู่แล้วจะพอทราบว่าเราจะใช้ตัวแปร แบบ $variable เข้ามาเลย อาจจะเอาไป /, +, -, *, หรือด้วย operations ใดก็แล้วแต่ ค่าที่ได้คือมันจะคำนวณออกมา แต่หากใช้ #{} ค่าที่ compile ออกมาจะไม่เปลี่ยนแปลงครับ
ตัวอย่างเช่น

ตัวอย่างที่ 2
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 ผมนำมาจาก: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

Advertisements

One Comment Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s