Less Css

Thủ thuật CSS (6/7): LESS CSS Hướng dẫn cơ bản cho người bắt đầu

Css thì rất đơn giản và dễ dàng để học, tuy nhiên nó lại có một giới hạn nhất định. Đặc biệt là khi bạn phải điều chỉnh lại nó. Bạn hãy tưởng tượng xem , khi bạn có hàng ngàn dòng css mà cần phải thay đổi một cái gì đó thì thật là mệt mỏi phải không ?

Tuy nhiện một công nghệ mới đã ra đời giúp bạn giải quyết việc này , đó là LESS. Với LESS bạn có thể viết các câu lệnh css dạng động, tức là có khai báo biến, có khai báo hàm…. Có lẽ đọc tới đây các bạn vẫn còn mơ hồ, vậy chúng ta cùng khám phá chi tiết về LESS nhé.

1 Cách sử dụng LESS

Sử dụng LESS thì rất là đơn giản, chúng ta chỉ cần đặt 2 dòng này vào bên trong thẻ

là okie. Nhưng điều đầu tiên là các bạn phải download
less.js về máy của mình.

1                         2

<link                                 rel="stylesheet/less"                                 type="text/css"                                 href="style.less">                                             <script                                 src="less.js"                                 type="text/javascript">script>

Phải chắc chắn rằng file .less được đặt trước less.js.

2 Cú pháp của LESS

Không giống như CSS thông thường, LESS hoạt động như một ngôn ngữ lập trình, nó cũng có khai báo biến, toán tử…

Khai Báo Biến (Variables)
Trước hết chúng ta cùng xem lại cách mà chúng ta viết câu lệnh CSS bình thường.

1                         2                         3                         4                         5                         6                         7                         8                         9                         10

.class1                                 {                                             background-color:                                 #2d5e8b;                                             }                                             .class2                                 {                                             background-color:                                 #fff;                                             color:                                 #2d5e8b;                                             }                                             .class3                                 {                                             border:                                 1px                 solid                 #2d5e8b;                                             }

Và đây là cách mà LESS làm tương tự :

1                         2                         3                         4                         5                         6                         7                         8                         9                         10                         11

@color-base:                 #2d5e8b;                                             .class1                                 {                                             background-color:                 @color-base;                                             }                                             .class2                                 {                                             background-color:                                 #fff;                                             color:                 @color-base;                                             }                                             .class3                                 {                                             border:                                 1px                 solid                 @color-base;                                             }

Chúng ta dễ dàng nhận thấy LESS khai báo biến @color-base: #2d5e8b; là màu dùng chung cho cả 3 lớp (class). Và với kiểu khai báo thế này, thì chỉ mỗi khi bạn sử dụng , chỉ cần gọi lại biến @color-base, đồng thời sau này nếu bạn muốn đổi màu thì chỉ cần thay đổi màu tại biến @color-base. Thật tiện lợi và dễ điều chỉnh phải không các bạn.

3 Mixins

Mixins cho phép gắn toàn bộ thuộc tính của một class trong CSS vào trong class khác bằng một cách khá đơn giản là thêm tên class này như một thuộc tính của class kia. Để hiểu rõ hơn thì chúng ta cùng xem ví dụ sau :
Giả sử chúng ta khai báo một lớp (class) dùng cho hiển thị màu gradient như sau :

1                         2                         3                         4                         5                         6                         7                         8

.gradients {                                             background:                                 #eaeaea;                                             background:                 linear-gradient(top,                                 #eaeaea,                                 #cccccc);                                             background:                 -o-linear-gradient(top,                                 #eaeaea,                                 #cccccc);                                             background:                 -ms-linear-gradient(top,                                 #eaeaea,                                 #cccccc);                                             background:                 -moz-linear-gradient(top,                                 #eaeaea,                                 #cccccc);                                             background:                 -webkit-linear-gradient(top,                                 #eaeaea,                                 #cccccc);                                             }

Và khi bạn muốn áp dụng màu gradient này vào bất cứ khai báo nào khác , thì chỉ cần đặt .gradientsvào ngay bên trong là được :

1                         2                         3                         4                         5

div {                                             .gradients;                                             border:                                 1px                 solid                 #555;                                             border-radius:                 3px;                                             }

Đoạn css trên tương đương với cách mà chúng ta viết CSS thường ngày thế này :

1                         2                         3                         4                         5                         6                         7                         8                         9                         10

div {                                             background:                                 #eaeaea;                                             background:                 linear-gradient(top,                                 #eaeaea,                                 #cccccc);                                             background:                 -o-linear-gradient(top,                                 #eaeaea,                                 #cccccc);                                             background:                 -ms-linear-gradient(top,                                 #eaeaea,                                 #cccccc);                                             background:                 -moz-linear-gradient(top,                                 #eaeaea,                                 #cccccc);                                             background:                 -webkit-linear-gradient(top,                                 #eaeaea,                                 #cccccc);                                             border:                                 1px                 solid                 #555;                                             border-radius:                 3px;                                             }

Với việc sử dụng thế này, LESS sẽ giúp file css của bạn ngắn gọn và dễ hiểu hơn rất nhiều. Ngoài ra bạn cũng có thể đặt tham số khi sử dụng LESS.

1                         2                         3                         4                         5                         6                         7                         8                         9                         10                         11                         12

/ LESS                                             .rounded-corners (@radius:                 5px)                 {                                             border-radius: @radius;                                             -webkit-border-radius: @radius;                                             -moz-border-radius: @radius;                                             }                                             #header {                                             .rounded-corners;                                             }                                             #footer {                                             .rounded-corners(10px);                                             }

Đoạn css trên tương đương với cách viết sau :

1                         2                         3                         4                         5                         6                         7                         8                         9                         10

#header {                                             border-radius:                 5px;                                             -webkit-border-radius:                 5px;                                             -moz-border-radius:                 5px;                                             }                                             #footer {                                             border-radius:                 10px;                                             -webkit-border-radius:                 10px;                                             -moz-border-radius:                 10px;                                             }

4 Nested Rules
Thay vì viết các tên selector dài để chỉ ra các quan hệ thừa kế trong CSS, với Less bạn có thể lồng các selector và nhau. Việc này làm cho quan hệ thừa kế trở nên rõ ràng hơn và code stylesheet cũng ngắn gọn hơn. Chúng ta cùng xét ví dụ sau :

1                         2                         3                         4                         5                         6                         7                         8                         9                         10                         11                         12                         13                         14                         15

nav {                                             height:                                 40px;                                             width:                                 100%;                                             background:                                 #455868;                                             border-bottom:                                 2px                 solid                 #283744;                                             }                                             nav li {                                             width:                                 600px;                                             height:                                 40px;                                             }                                             nav li a {                                             color:                                 #fff;                                             line-height:                                 40px;                                             text-shadow:                                 1px                 1px                 0px                 #283744;                                             }

Trong cách viết CSS thông thường này, để áp đặt thuộc tính cho các phần tử con, bạn phải chỉ định phần tử cha đứng trước nó, nhưng với LESS, thì việc này đơn giản và rõ ràng hơn nhiều :

1                         2                         3                         4                         5                         6                         7                         8                         9                         10                         11                         12                         13                         14                         15

nav {                                             height:                                 40px;                                             width:                                 100%;                                             background:                                 #455868;                                             border-bottom:                                 2px                 solid                 #283744;                                             li {                                             width:                                 600px;                                             height:                                 40px;                                             a {                                             color:                                 #fff;                                             line-height:                                 40px;                                             text-shadow:                                 1px                 1px                 0px                 #283744;                                             }                                             }                                             }

Ngoài ra bạn còn có thể ấn định pseudo-classes, như :hover, vào selector bằng cách sử dụng kí tự ( &). Các bạn có thể tham khảo đoạn css sau :

1                         2                         3                         4                         5                         6                         7                         8                         9

a {                                             color:                                 #fff;                                             line-height:                                 40px;                                             text-shadow:                                 1px                 1px                 0px                 #283744;                                             &:hover {                                             background-color:                                 #000;                                             color:                                 #fff;                                             }                                             }

5 Operation (Toán tử)

Với LESS bạn có thể thực hiện các phép tính như cộng , trừ , nhân chia. Cùng xem ví dụ sau nhé :

1                         2                         3                         4                         5                         6                         7

@height:                                 100px                                             .element-A {                                             height:                 @height;                                             }                                             .element-B {                                             height:                 @height *                 2;                                             }

Như bạn đã thấy ở đoạn css trên, đầu tiên chúng ta lưu trữ giá trị biến @height, và rồi ấn định giá trị này cho lớp element A. Và khi đến lớp element B, chúng ta sử dụng biến @height một lần nữa, nhưng lần này giá trị của nó đã được nhân đôi.

6 Scope
LESS cũng cung cấp thêm một khái niệm là Scope, nơi mà biến sẽ được thừa hưởng trong phạm vi gần nó nhất. Để dễ hiểu hơn , chúng ta cùng xem ví dụ sau :

1                         2                         3                         4                         5                         6                         7                         8                         9                         10                         11

header {                                             @color:                                 black;                                             background-color:                 @color;                                             nav {                                             @color:                                 blue;                                             background-color:                 @color;                                             a {                                             color:                 @color;                                             }                                             }                                             }

Trong ví dụ trên, header sẽ có màu background là màu đen, trong khi màu nav là màu xanh da trời, và màu của a cũng là màu xanh da trời.

LESS chỉ là một trong số những giải pháp của CSS pre-processor, bạn có thể sử dụng SASS hoặc Stylus. Mình hy vọng là với bài viết này, các bạn sẽ có thêm một kiến thức mới về cách sử dụng CSS cho những trang web hay blog của mình