[CSS Preprocessor] ความแตกต่างกันระหว่าง Sass และ SCSS

สำหรับคนที่เขียน Sass หรือ SCSS บางครั้งอาจจะสับสนว่าจะบอกคนอื่นยังไงว่าเขียนอะไร จะบอกว่ามันคือ Sass หรือ SCSS ดี? น่าจะเคยมีอารมณ์นี้บ้าง สรุปง่ายๆมันคือ อย่างเดียวกัน ครับ

แล้วทำไมมันถึงมีชื่อเรียก 2 ชื่อ?
เริ่มแรกเดิมที Sass ถือกำเนิดขึ้นมาในปี 2007 ถูกพัฒนามาพร้อมๆกับ Haml โดย Ruby developers ผู้สร้างคนเดียวกันกับ Haml 2 คนคือ Hampton Catlin, Natalie Weizenbaum ส่วน Chris Eppstein นี่ไม่ได้ทำ Haml ด้วย ทำเฉพาะ Sass กับ Compass ที่เป็น Stylesheet Authoring Environment

เป็นที่มาที่ทำให้รูปแบบ syntax ของ Sass แรกๆเลยมันเลยเหมือนๆกับ Haml เป็นแนว indent ครับ
อยู่มาจนกระทั่งเดือนพฤษภาคม ปี 2010 ใน version 3.0 ได้กำหนด SCSS (Sassy CSS) ขึ้นมา ที่รูปแบบ syntax เป็นแบบ brackets {} เพื่อให้เข้าใกล้ความเป็น CSS มากขึ้น แถมพอมี brackets โอกาสเกิดความผิดพลาดในการเขียน และการทำงานร่วมกับผู้อื่นก็ง่ายขึ้นด้วยนะ ตัดปัญหาเรื่อง indent ที่อาจเกิดจากการใช้ editor คนละตัวกันได้เลย *เชียร์ๆ*

มาถึงตรงนี้แล้ว เรามาลองดูความแตกต่างกันของ Sass และ SCSS ดูครับ ในเรื่องของ syntax

Sass

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

ส่วน CSS ที่คอมไพล์ออกมาจะหน้าตาเป็นแบบนี้เหมือนกันครับ

Compiled CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

เห็นไหมครับ ถ้าเคยเขียน Haml อยู่แล้ว จะคุ้นเคยกับหน้าตาของ Sass มาก เป็น indent ไม่มี ; แนวจะดูคลีนๆแบบนั้น
เรามาลองดูการใช้ Mixins กันบ้างครับ ถ้าใช้ CSS Preprocessor ผมคิดว่าใช้กันเพราะด้วยเหตุผลที่ต้องการใช้ Mixins นี่แหละลำดับต้นๆ ลองมาดูกัน

Sass

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

SCSS

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box {
    @include border-radius(10px);
}

ส่วนผลลัพธ์ตัว CSS ที่ได้คือไม่ต่างกันเลย

Compiled CSS

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

ในความเห็นของผมนะครับ ถ้าตัดสินใจไม่ถูกว่าจะเลือก Sass หรือ SCSS ผมตัดสินใจให้คือเลือก SCSS ครับ
รูปแบบ brackets ผมยังมองว่าเป็นรูปแบบที่ดีในการลดโอกาสการเกิดความผิดพลาดในการเขียน CSS มาก ยิ่งเว็บไซต์ใหญ่ๆ CSS มักจะบวมครับ ผมเคยเขียนในแบบ Sass ครับ พอต้องเขียนสไตล์ที่สเกลใหญ่ขึ้นเรื่อยๆนี่ค่อนข้างลายตาครับ ยิ่งถ้าใครเขียน Python ทำโปรเจกต์หลายๆคน ใช้ editor คนละตัวกัน อาจเจอปัญหาเรื่อง indent ด้วย สำหรับ Sass นี่ก็อารมณ์เดียวกันเลยครับ บวกกับเราเขียน CSS เราก็ไม่ควรที่จะออกห่างจากรูปแบบการเขียน CSS ที่เป็น standard ของเขาใช่ไหมครับ? ผมคิดว่าอย่างนี้นะ

สำหรับใครที่ต้องการเขียนความแตกต่างเพิ่มเติมของ Sass กับ SCSS ลองเข้าไปดูที่ Sass/SCSS Guide ได้เลยครับ


“เราควรเขียนโปรแกรมให้คนอื่นอ่านได้ด้วย ไม่ใช่ให้คอมพิวเตอร์เข้าใจเพียงอย่างเดียว เขียนในรูปแบบที่จะลดโอกาสในการเกิดข้อผิดพลาดให้มากที่สุดโดยเฉพาะ Human-error และเพื่อรองรับการการบำรุงรักษาและการเติบโตในอนาคต”

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_

How to convert, resize, and center image with ImageMagick

Cause (If you want to go to the method, skip this part):

I have one project that I have to add product to an e-commerce website and client sent me product images in PSD file and I need to convert it into JPG or PNG file to upload to the site. So the problem is, I don’t have Photoshop and (if I have) I don’t know how to use it. Hence, I find this solution, use ImageMagick to convert, resize, and center all images with ImageMagick instead of buying Photoshop to do it (or using GIMP).

Method part:

If what you want to do is same as mine, PSD file, PSD has layer, mostly you want to convert it at the first layer. But if you want to know how many layer in PSD file you can use command “identify” to check it out,

Example:

ImageMagick identify command

The result will look like this,

ImageMagick Identify result
ImageMagick Identify result

Now you will see size, type, and other detail of its.
And how to get to each layer of its file is, [number] for example, image.psd[0], or image.psd[1]

Next step is, get to the point “convert, resize, and center image”
You can use the command below to get what you want,

ImageMagick convert

Note: -extend value must larger than source image size that you get from identify

See the result and source file below,
You can see image’s aspect at the source file and what ImageMagick does. It’s awesome that you can done this job with single line of command in your Terminal/Command-line tool.

PSD source file
PSD source file
Converted image file by ImageMagick
Converted image file by ImageMagick

Identify software on the websites you visit with Wappalyzer

The icons displayed by Wappalyzer represent the software used to create the website.
The icons displayed by Wappalyzer represent the software used to create the website.

Today I found a very good tool to identify software on the websites that you visit on my Facebook timeline from my friend’s post. Its named Wappalyzer, you can download it from wappalyzer.com and install the extension on Mozilla Firefox or on Google Chrome.

It’s a great extension that you should have in your web browser if you are a web developer, it will make your life easier.

Install and Configure wget on OS X 10.7+ and fix SSL GNUTLS error

Pre-requisite:

1. Install Xcode (Because you need to compile wget source, it using GCC compiler)

2. Install Command Line Tool

Download

Using curl to get wget


curl -O http://ftp.gnu.org/gnu/wget/wget-1.16.tar.gz
tar -xzvf wget-1.16.tar.gz
cd wget-1.16
./configure --with-ssl=openssl
make
sudo make install

Note 1: The reason to use “–with-ssl=openssl” because GNUTLS is not included with Mac OS X. Wget needs to have some type of SSL, so we can use OpenSSL instead. Otherwise you can get this error “configure: error: --with-ssl=gnutls was given, but GNUTLS is not available.

Note 2: other version of GNU Wget can be found at http://ftp.gnu.org/gnu/wget/

Uber first time

วันนี้มีเหตุให้ได้ลองใช้ Uber เนื่องจากเดินทางไม่ทันรถไฟฟ้า Airport link ไปสนามบิน เลยถือโอกาสใช้ Promotion 300 บาท ที่มีอยู่ไปสนามบินสุวรรณภูมิเลย

เริ่มจากเลือก Pickup location จาก BTS พญาไท ซึ่งตัวแอพ Uber ก็จะเรียกรถที่ใกล้ที่สุดให้เราโดยคำนวณเวลาคร่าวๆที่รถจะมาถึงให้เราด้วย เมื่อได้รถแล้ว แอพจะแสดงรูป ชื่อ รวมถึง rating ของคนขับ และรถที่มาด้วย ผมได้ Toyota Camry ครับ ระหว่างนั้นผมก็ดูค่าใช้บริการคร่าวๆจาก BTS พญาไท ไปสนามบินสุวรรณภูมิ แสดงมา 1,035 บาท

ใช้เวลาประมาณ 10 นาที หรืออาจจะเร็วกว่านั้น ผมไม่ได้จับเวลา รถก็มาถึง ก่อนหน้านั้น คนขับจะโทรหาเราก่อนครับ แต่ผมเปิดโหมด Do not disturb ไว้ ใครโทรมาผมก็หนวกล่ะครับ (โดนข้อหาไม่รับโทรศัพท์บ่อยก็เพราะเงี้ย -,-) พอรถมาถึงก็ขึ้นครับ ผมก็ซัดเลยน้ำ 1 ขวด เพราะหิวน้ำมากครับ อากาศร้อนเสียเหงื่อไปเยอะ

หลังจากนั้นก็ขึ้นทางด่วนเลยครับ ผมก็ชวนคุยเรื่องทั่วๆไป ได้ความว่าช่วงนี้คนใช้ Uber ลดลงพอสมควรจากช่วงแรกที่มีโปรนั่งฟรี 300 บาท มากครับ คุยกันไม่นาน ก็ถึงสนามบินแล้วครับ ใช้เวลาทั้งสิ้นประมาณ 18 นาที จาก BTS พญาไทถึงสนามบินครับ

หลังจากลงจากรถไม่นาน ไม่น่าถึง 2 นาที ก็มี Email เข้ามาแจ้งค่าใช้บริการกับ SMS เด้งมา “ขอบคุณที่ใช้จ่ายผ่านบัตรเครดิต…” หมดไปทั้งสิ้น 1,000 – 300 (PROMO) = 700 บาท ครับ

โดยรวมถือว่าบริการดี อุ่นใจครับ ถ้าเงินเหลือๆก็คิดว่าจะใช้บริการอีกครับ : )

Uber

How to add JavaScript and CSS to Smarty templates

How to write JavaScript code in Smarty template language (.tpl file),

Just add {literial} tag before and after JavaScript code like this,

<script type="text/javascript">
{literial}
// JavaScript code here
{/literial}
</script>

CSS also do the same way as JavaScript,

<style type="text/css">
{literial}
// CSS code here
{/literial}
</style>

More detail about {literial} at: http://www.smarty.net/docsv2/en/language.function.literal