เรียนรู้ CSS LESS ใน 10 นาที

เริ่มต้นทำเว็บไซต์ หรือโปรเจกต์ ควรเริ่มเรียนอะไร?

CSS LESS เป็นการเขียน CSS ในรูปแบบใหม่ ที่ทำให้ชีวิตของนักพัฒนาสะดวกมากยิ่งขึ้น  ซึ่งจากเดิมเรามักจะเขียน CSS ในไฟล์ style.css (.css) แต่การเขียนแบบ CSS LESS เราต้องเขียนในไฟล์ style.less แทน ที่สำคัญเราจำเป็นต้องผูกไฟล์ JavaScript ของ less มาด้วย เพื่อเป็นตัวคอมไฟล์(compile ) ไฟล์ style.less ของเรา ไปเป็น .css เหมือนเดิมอีกครั้ง ถ้าใครยังไม่มีพื้นฐานการเขียน CSS มาก่อน ก็ควรไปเรียนรู้พื้นฐาน CSS ทั่วไปกันก่อน

แนะนำหัวข้อที่น่าสนใจ ซ่อน

1.Variables

ฟีเจอร์(Feature) หลักๆของ Less คือ Variables ซึ่งทำให้เราสามารถสามารถเป็นตัวแปรขึ้นมาได้ คล้ายละม้ายกับการเขียนโปรแกรมทั่วไป เราสามารถเก็บค่าต่างๆที่เราใช้บ่อยๆ ไว้ในตัวแปร แล้วนำกลับมาใช้ใหม่ ทุกครั้งที่เราต้องการ ทำให้ประหยัดโค้ดลงกว่าเดิมแน่นอน ทำให้ไม่ต้องมานั่งเขียนซ้ำๆ

ทีนี้เราจะกำหนดตัวแปรไว้ 2 ตัว ค่าแรกสำหรับพื้นหลัง ค่าที่สอง สำหรับสีของตัวอักษร แล้วเรานำค่าเหล่านี้ไปใช้ ใน selectors P

@background: #000;
@color: #fff;
p{
  background-color: @background;
  color: @color;
}

2.Mixins

Mixins เป็นการอนุญาตให้เราใช้คลาสที่เราเคยสร้างขึ้นมา ไปใช้กับ Selectors อื่นๆได้ ทำให้ประหยัดโค้ดขึ้นมากทีเดียว
ตัวอย่างด้านล่างนี้ เป็นการเขียน CSS แบบไม่ได้ใช้ Less

.article{
   background-color:green;
   color:#fff;
}
.single-article{
   width:500px;
   height:500px;
   background-color:green; 
   color:#fff;
}

จากโค้ด CSS ด้านบน เป็นการเขียนรูปแบบปกติ จะเห็นได้ว่าจะมีโค้ดซ้ำๆ อยู่ คือ background-color , color ซึ่งค่าก็เหมือนกัน แต่เราต้องเขียนสองที่ ทำให้เกิดความซ้ำซ้อนขึ้นมา

.article{
   background-color:green;
   color:#fff;
}
.single-article{
   width:500px;
   height:500px;
   .article
}

จากโค้ดด้านบนเป็นการเขียนแบบ Less คลาส .article มีการกำหนด  background-color , color คลาส .single-article เราก็อยากใช้ background-color , color เหมือนกัน ค่าเหมือนกัน ฉะนั้น เราแค่นำชือคลาสที่เราอยากได้ properties มาใส่ในคลาสที่เราต้องการ

.circle(@size: 25px){
  background-color: red;
  border-radius: 100%;
  width: @size;
  height: @size;
}

.small-circle{
  .circle
}

.big-circle{
   .circle(100px)
}

จากโค้ดด้านบน จะเห็นได้ว่าคล้าส .circle(@size: 25px) มีการกำหนด  Variables  ชื่อ @size ขนาด 25px เป็นค่า default  ทีนี้เราจะนำตัวแปรตัวนี้ไปใช้กับ width , height และตรงที่คลาส .big-circle จะมีการ overide ค่าเป็น .circle(100px)

3.Nesting and Scope

Nesting เราสามารถที่จะใช้โครงสร้างของ CSS มาเขียนในรูปแบบที่คล้ายๆกับโครงสร้างของ HTML

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  background-color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}

โค้ดด้านบนเป็นการเขียน CSS แบบปกติ เรามาปรับให้อยู่ในรูปแบบของ Lessกัน

ul{
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
  }
}

จากโค้ดด้านบนจะเห็นได้ว่า  เป็นการนำค่าของ  ul li ไว้ภายใต้ ul  กลายเป็นว่า โค้ดทั้งสองชุดถูกนำมาไว้ภายใต้ ul ตัวเดียวกัน

Scope

Scope ใน Less มันจะคล้ายๆกันการเขียนโปรแกรมนั้นแหละห่ะ Variables และ mixins มันจะค้นหาค่าในตัวมันก่อน ถ้าไม่มีค่าที่กำหนด มันก็จะวิ่งไปหา ตัวแปรตัวแม่ที่เราได้ประกาศไว้ก่อนหน้านี้ ดูตัวอย่างดีกว่า.

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

 เรามีการกำหนดค่าให้กับตัวแปร(variables)  @var :red ทีนี้ตรงที่ color เรามีการนำตัวแปร @var ไปใช้งาน ซึ่ง less มันจะไปหาค่าในขอบเขตรอบๆตัวมันก่อน ถ้าเจอ เช่น เจอ @var: white ก็นำค่านี้ใช้งาน ถ้าเราไม่ได้กำหนด @var:white มันจะวิ่งไปดึงค่า @var:red ไปใช้งานทันที

4.Operations

เราสามารถนำ Operations ทางคณิตศาสตร์มาประยุกต์ใช้ใน Less ได้ด้วย เช่น + , – , * , /

@div-width: 100px;
@color: #03A9F4;

div{
  height: 50px;
  display: inline-block;
}

#left{
  width: @div-width;
  background-color: @color - 100;
}

#right{
  width: @div-width * 2;
  background-color: @color;
}

5.Functions

Less ก็มีฟังก์ชัน(Functions)กะเค้าด้วยน่ะ! เห็นไหมครับว่า มันเริ่มจะละม้ายคล้ายกับการเขียนโปรแกรมขึ้นมาทุกทีแล้ว(Programming) อ่านเพิ่มเติมได้ที่นี่

@var: #004590;

div{
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}

About The Author