เรียนรู้ 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%)
  }
}

• Facebook
• Twitter
• Line