Home / Kiến thức / HTML/CSS / Less – Ngôn ngữ css động

Less – Ngôn ngữ css động

LESS là gì?

Less chính là mở rộng CSS bằng cách thêm vào nó các thành phần động như biến, mixins, toán tử và hàm. LESS chạy cả ở phía client-side (Chrome, Safari, Firefox) và server-side, cùng với Node.js và Rhino.

I/ Sử dụng LESS như thế nào?

Sử dụng LESS thì rất là đơn giản, đầu tiên bạn download less.js  về, và add 2 dòng lệnh theo thứ tự sau, trong đó file style.less chính là nơi chúng ta viết lệnh css

<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.

II/ LESS hỗ trợ làm gì:

Biến

Việc sử dụng biến cho phép khai báo giá trị được sử dụng nhiều lần tại một chỗ, và sử dụng nó trong toàn bộ style của bạn. Vì thế khi muốn thay đổi giá trị này, bạn chỉ cần thay đổi tại một chỗ.

<span class="comment">// LESS</span>

<span class="variable">@color</span>: <span class="color">#4D926F</span>;

<span class="id">#header</span> {
  <span class="attribute">color</span>: <span class="variable">@color</span>;
}
<span class="element">h2</span> {
  <span class="attribute">color</span>: <span class="variable">@color</span>;
}
<span class="comment">/* Biên dịch ra CSS */</span>

<span class="id">#header</span> {
  <span class="attribute">color</span>: <span class="color">#4D926F</span>;
}
<span class="element">h2</span> {
  <span class="attribute">color</span>: <span class="color">#4D926F</span>;
}

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. Nó gần giống với biến, nhưng thay giá trị bằng toàn bộ các thuộc tính của class. Mixins cũng có thể được sử dụng như hàm, bằng cách truyền tham số, như ví dụ dưới đây:

<span class="comment">// LESS</span>

<span class="class">.rounded-corners</span> (<span class="variable">@radius</span>: <span class="number">5px</span>) {
  <span class="attribute">border-radius</span>: <span class="variable">@radius</span>;
  <span class="attribute">-webkit-border-radius</span>: <span class="variable">@radius</span>;
  <span class="attribute">-moz-border-radius</span>: <span class="variable">@radius</span>;
}

<span class="id">#header</span> {
  <span class="mixin">.rounded-corners</span>;
}
<span class="id">#footer</span> {
  <span class="mixin">.rounded-corners</span>(<span class="number">10px</span>);
}
<span class="comment">/* Biên dịch ra CSS */</span>

<span class="id">#header</span> {
  <span class="attribute">border-radius</span>: <span class="number">5px</span>;
  <span class="attribute">-webkit-border-radius</span>: <span class="number">5px</span>;
  <span class="attribute">-moz-border-radius</span>: <span class="number">5px</span>;
}
<span class="id">#footer</span> {
  <span class="attribute">border-radius</span>: <span class="number">10px</span>;
  <span class="attribute">-webkit-border-radius</span>: <span class="number">10px</span>;
  <span class="attribute">-moz-border-radius</span>: <span class="number">10px</span>;
}

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.

<span class="comment">// LESS</span>

<span class="id">#header</span> {
  <span class="element">h1</span> {
    <span class="attribute">font-size</span>: <span class="number">26px</span>;
    <span class="attribute">font-weight</span>: bold;
  }
  <span class="element">p</span> { <span class="attribute">font-size</span>: <span class="number">12px</span>;
    <span class="element">a</span> { <span class="attribute">text-decoration</span>: none;
      &amp;<span class="class">:hover</span> { <span class="attribute">border-width</span>: <span class="number">1px</span> }
    }
  }
}
<span class="comment">/* Biên dịch ra CSS */</span>

<span class="id">#header</span> <span class="element">h1</span> {
  <span class="attribute">font-size</span>: <span class="number">26px</span>;
  <span class="attribute">font-weight</span>: bold;
}
<span class="id">#header</span> <span class="element">p</span> {
  <span class="attribute">font-size</span>: <span class="number">12px</span>;
}
<span class="id">#header</span> <span class="element">p</span> <span class="element">a</span> {
  <span class="attribute">text-decoration</span>: none;
}
<span class="id">#header</span> <span class="element">p</span> <span class="element">a</span><span class="class">:hover</span> {
  <span class="attribute">border-width</span>: <span class="number">1px</span>;
}

Hàm & toán tử

Toán tử cho phép cộng, trừ, nhân, chia giá trị của các thuộc tính, màu sắc, làm cho giá trị của các thuộc tính có liên quan tới nhau. Hàm ánh xạ 1-1 với code JavaScript, cho phép thao tác với các giá trị theo bất cứ cách nào bạn muốn.

<span class="comment">// LESS</span>

<span class="variable">@the-border</span>: <span class="number">1px</span>;
<span class="variable">@base-color</span>: <span class="color">#111</span>;
<span class="variable">@red</span>:        <span class="color">#842210</span>;

<span class="id">#header</span> {
  <span class="attribute">color</span>: <span class="variable">@base-color </span>* <span class="number">3</span>;
  <span class="attribute">border-left</span>: <span class="variable">@the-border</span>;
  <span class="attribute">border-right</span>: <span class="variable">@the-border </span>* <span class="number">2</span>;
}
<span class="id">#footer</span> {
  <span class="attribute">color</span>: <span class="variable">@base-color </span>+ <span class="color">#003300</span>;
  <span class="attribute">border-color</span>: desaturate(<span class="variable">@red</span>, <span class="number">10%</span>);
}

About quocbb

Chào bạn đến với blog của Quocbb.com. Blog mình làm đơn giản chỉ để lưu lại những kiến thức đã học được và muốn cùng chia sẻ với cho mọi người. Mình thích chơi Bida, đánh Cờ tướng, WarCraft, nếu bạn có chung sở thích hãy để lại comment nhé

Leave a Reply

Your email address will not be published. Required fields are marked *

Ngẫu nhiên

Xử lý tiến trình dataskq gây load cao trên DirectAdmin

Để kiểm tra chi tiết tiến trình này, chúng ta cần truy log theo lệnh ...