Hướng dẫn LESS – eten.vn

Ngôn ngữ stylesheet “động”.

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

phiên bản 1.3.3
Một vài câu lệnh LESS:

@base: #f938ab; .box-shadow(@style, @c) when (iscolor(@c)) { box-shadow: @style @c; -webkit-box-shadow: @style @c; -moz-box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @alpha)); } .box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) } } 

Cách thêm less.js vào trang HTML:

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

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

  // LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; }
/* Biên dịch ra CSS */ #header { color: #4D926F; } h2 { color: #4D926F; }

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:

// LESS .rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); }
/* Biên dịch ra CSS */ #header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #footer { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }

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.

// LESS #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } 
/* Biên dịch ra CSS */ #header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; } 

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.

// LESS @the-border: 1px; @base-color: #111; @red: #842210; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; } #footer { color: @base-color + #003300; border-color: desaturate(@red, 10%); } 
/* Biên dịch ra CSS */ #header { color: #333; border-left: 1px; border-right: 2px; } #footer { color: #114411; border-color: #7d2717; } 

Cách sử dụng ở Client-side

Link file .less với thuộc tính rel là “stylesheet/less”:

<link rel="stylesheet/less" type="text/css" href="styles.less"> 

Thêm file less.js vào thẻ <head> như sau:

 <script src="less.js" type="text/javascript"></script> 

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

Watch mode

Watch mode là một tính năng ở client-side cho phép tự động cập nhật khi style có thay đổi.

Để sử dụng, thêm ‘#!watch’ vào phía cuối URL, và refresh lại trang. Hoặc cũng có thể thêm lệnh javascriptless.watch() vào trang web.

Cách sử dụng ở Server-side

Cài đặt

Các dễ dàng nhất để cài đặt LESS trên server, là dùng npm, bằng lệnh:

$ npm install less 

Cách sử dụng

Sau khi cài đặt, bạn có thể gọi trình biên dịch từ npm, như sau:

var less = require('less'); less.render('.class { width: 1 + 1 }', function (e, css) { console.log(css); }); 

Kết quả:

.class { width: 2; } 

hoặc gọi parser và trình biên dịch bằng tay:

var parser = new(less.Parser); parser.parse('.class { width: 1 + 1 }', function (err, tree) { if (err) { return console.error(err) } console.log(tree.toCSS()); }); 

Cấu hình

Bạn có thể thêm các tùy chọn cho trình biên dịch:

var parser = new(less.Parser)({ paths: ['.', './lib'], // Chỉ định đường dẫn cho @import filename: 'style.less' // Chỉ định tên tệp .less }); parser.parse('.class { width: 1 + 1 }', function (e, tree) { tree.toCSS({ compress: true }); // Thu nhỏ (nén) nội dung CSS }); 

Cách sử dụng command-line

Less cũng cho phép gọi trình biên dịch từ command-line như sau:

$ lessc styles.less 

CSS đã biên dịch sẽ được ghi ra stdout, bạn có thể ghi nó ra file tùy chọn:

$ lessc styles.less > styles.css 

Để tối thiểu dung lượng file css, hãy thêm tùy chọn -x. Hoặc nếu muốn tối ưu hơn nữa, có thể sử dụng YUI CSS Compressor với tùy chọn --yui-compress.

Ngôn ngữ LESS

Là một mở rộng của CSS, LESS không chỉ tương thích ngược với CSS, mà các tính năng của nó đều sử dụng các cú pháp CSS. Điều này làm cho việc học LESS rất dễ dàng.

Biến

Đây là một ví dụ về sử dụng biến:

@nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } 

Kết quả:

#header { color: #6c94be; } 

Cũng có thể định nghĩa các biến với tên kiểu biến:

@fnord: "I am fnord."; @var: 'fnord'; content: @@var; 

Kết quả:

content: "I am fnord."; 

Chú ý rằng các biến trong LESS thực sự là hằng số nên chỉ có thể được định nghĩa một lần.

Mixins

Trong LESS, có thể thêm một nhóm các thuộc tính của một ‘ruleset’ này vào trong ‘ruleset’ kia. Giả sử ta có một class như sau:

.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } 

Giờ ta muốn sử dụng các thuộc tính của class này ở trong các ‘ruleset’ khác. Để làm được điều này, chỉ cần thêm tên class này vào bên trong bất kỳ ‘ruleset’ nào ta muốn thêm vào, như sau:

#menu a { color: #111; .bordered; } .post a { color: red; .bordered; } 

Các thuộc tính của class .bordered sẽ xuất hiện ở cả #menu a và .post a:

#menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; } .post a { color: red; border-top: dotted 1px black; border-bottom: solid 2px black; } 

Bất kỳ một lớp hoặc id nào cũng có thể được mixed-in theo cách này.

Mixins với tham số

Khi sử dụng Mixin trong LESS, có thể truyền tham số vào như ví dụ sau:

.border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } 

Sử dụng:

#header { .border-radius(4px); } .button { .border-radius(6px); } 

Mixins với tham số cũng có thể có giá trị mặc định cho các tham số:

.border-radius (@radius: 5px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } 

Ta có thể gọi mixin này như sau:

#header { .border-radius; } 

Nó sẽ thêm vào #header thuộc tính border-radius với giá trị là 5px.

Cũng có thể gọi mixin có tham số mà không truyền tham số vào. Điều này rất hữu dụng khi muốn ẩn mixin đó khi dịch ra CSS mà vẫn muốn chèn các thuộc tính của nó vào ‘ruleset’ khác.

.wrap () { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; } pre { .wrap } 

Kết quả:

pre { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; } 

Biến @arguments

Biến @arguments có một ý nghĩa đặc biệt trong mixin, nó chứa giá trị của tất cả các tham số truyền vào mixin. Nó này rất hữu dụng khi bạn không phải muốn làm việc với từng tham số riêng lẻ:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; } .box-shadow(2px, 5px); 

Kết quả:

 box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; -webkit-box-shadow: 2px 5px 1px #000; 

Khớp theo mẫu và khớp theo điều kiện

Đôi khi, bạn muốn thay đổi hành vi của một mixin dựa trên các tham số truyền vào. Hãy bắt đầu với ví dụ sau:

.mixin (@s, @color) { ... } .class { .mixin(@switch, #888); } 

Bây giờ, giả sử ta muốn .mixin xử lý khác mỗi khi tham số @switch thay đổi, ta định nghĩa .mixin như sau:

.mixin (dark, @color) { color: darken(@color, 10%); } .mixin (light, @color) { color: lighten(@color, 10%); } .mixin (@_, @color) { display: block; } 

Nếu ta gọi:

@switch: light; .class { .mixin(@switch, #888); } 

Kết quả:

.class { color: #a2a2a2; display: block; } 

Trình tự xử lý như sau:

  • Mixin đầu tiên không khớp với lời gọi vì nó chỉ nhận tham số đầu tiên là dark.
  • Mixin thứ hai khớp vì nó nhận đúng tham số light.
  • Minix thứ ba khớp vì tham số thứ nhất của nó có thể là bất kỳ giá trị nào.

Thêm một ví dụ nữa về khớp với các mixin:

.mixin (@a) { color: @a; } .mixin (@a, @b) { color: fade(@a, @b); } 

Nếu ta gọi .mixin chỉ với một tham số, ta sẽ nhận được kết quả tương ứng với mixin thứ nhất, còn nếu ta gọi nó với hai tham số, kết quả sẽ tương ứng với mixin thứ hai.

Khớp theo điều kiện

Khớp theo điều kiện (Guards) rất hữu dụng nếu muốn khớp các mixin sử dụng các biểu thức.

Để cố gắng gần giống nhất với cú pháp tự nhiên của CSS, LESS đã lựa chọn việc thực thi các điều kiện thông qua điều kiện mixins thay vì các lệnh if/else. Một ví dụ:

.mixin (@a) when (lightness(@a) >= 50%) { background-color: black; } .mixin (@a) when (lightness(@a) < 50%) { background-color: white; } .mixin (@a) { color: @a; } 

Điểm mấu chốt ở đây chính là từ khóa when, theo sau nó là một biểu thức điều kiện. Nếu ta chạy đoạn code dưới đây:

.class1 { .mixin(#ddd) } .class2 { .mixin(#555) } 

Thì kết quả thu được là:

.class1 { background-color: black; color: #ddd; } .class2 { background-color: white; color: #555; } 

Các toán tử so sánh được sử dụng ở đây bao gồm: > >= = =< <. Thêm vào đó từ khóa true chỉ khớp khi giá trị truyền vào chính xác là true thì 2 mixin mới được coi là bằng nhau:

.truth (@a) when (@a) { ... } .truth (@a) when (@a = true) { ... } 

Các giá còn lại khác true đều được coi là false:

.class { .truth(40); // Không khớp với các định nghĩa phía trên. } 

Các biểu thức điều kiện được ngăn cách với nhau bởi dấu phẩy ‘,’. Nếu một trong các biểu thức điều kiện là true, mixin sẽ được khớp:

.mixin (@a) when (@a > 10), (@a < -10) { ... } 

Chú ý rằng bạn cũng có thể so sánh các tham số với nhau, hoặc với các biến khác:

@media: mobile; .mixin (@a) when (@media = mobile) { ... } .mixin (@a) when (@media = desktop) { ... } .max (@a, @b) when (@a > @b) { width: @a } .max (@a, @b) when (@a < @b) { width: @b } 

Cuối cùng, nếu bạn muốn khớp mixin dựa trên kiểu của các tham số, có thể sử dụng các hàm is*:

.mixin (@a, @b: 0) when (isnumber(@b)) { ... } .mixin (@a, @b: black) when (iscolor(@b)) { ... } 

Dưới đây là các hàm kiểm tra kiểu:

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl

Các hàm kiểu tra đơn vị:

  • ispixel
  • ispercentage
  • isem

Bạn cũng có thể dùng từ khóa and trong biểu thức điều kiện:

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... } 

Và từ khóa not:

.mixin (@b) when not (@b > 0) { ... } 

Nested rules

LESS đem đến cho bạn khả năng sử dụng lồng (nesting) thay vì phải dùng đến tính che lấp (cascading) của CSS. Giả sử ta có đoạn CSS như sau:

#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; } #header .logo:hover { text-decoration: none; } 

Trong LESS, ta có thể viết như sau:

#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } } } 

Hoặc theo cách này:

#header { color: black; .navigation { font-size: 12px } .logo { width: 300px; &:hover { text-decoration: none } } } 

Đoạn code trên ngắn gọn hơn và giống với cấu trúc DOM.

Chú ý rằng dấu & được sử dụng khi bạn muốn gắn selector bên trong với selector ngoài, thay vì coi nó như selector con. Điều này rất quan trọng và được sử dụng với các pseudo-class như :hover và :focus.

Ví dụ:

.bordered { &.float { float: left; } .top { margin: 5px; } } 

Kết quả:

.bordered.float { float: left; } .bordered .top { margin: 5px; } 

Toán tử

Toán tử có thể xử lý bất kỳ số, màu hay biến nào. Dưới đây là một ví dụ:

@base: 5%; @filler: @base * 2; @other: @base + @filler; color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler; 

Less có thể hiểu được sự khác nhau giữa các màu sắc và đơn vị. Nếu đơn vị được sử dụng với toán tử, giống như:

@var: 1px + 5; 

Kết quả sẽ là 6px.

Dấu ngoặc cũng được sử dụng kèm với toán tử:

width: (@var + 5) * 2; 

Và là bắt buộc:

border: (@width * 2) solid black; 

Các hàm về màu sắc

LESS cung cấp rất nhiều hàm xử lý màu. Giá trị màu trước tiên được chuyển đổi về hệ màu HSL rồi mới được tiếp tục xử lý tiếp:

lighten(@color, 10%); // trả lại màu sáng hơn 10% so với @color darken(@color, 10%); // trả lại màu tối hơn 10% so với @color saturate(@color, 10%); // trả lại màu đậm hơn 10% so với @color desaturate(@color, 10%); // trả lại màu nhạt hơn 10% so với @color fadein(@color, 10%); // trả lại màu với độ trong suốt ít hơn 10% so với @color fadeout(@color, 10%); // trả lại màu với độ trong suốt nhiều hơn 10% so với @color fade(@color, 50%); // trả lại màu với độ trong suốt 50% so với @color spin(@color, 10); // trả lại màu lớn hơn 10 độ hue hơn @color spin(@color, -10); // trả lại màu nhỏ hơn 10 độ hue hơn @color mix(@color1, @color2); // trộn hai màu @color1 và @color2 

Việc sử dụng các hàm này khá rõ ràng:

@base: #f04615; .class { color: saturate(@base, 5%); background-color: lighten(spin(@base, 8), 25%); } 

Bạn cũng có thể trích xuất các thông tin về màu:

hue(@color); // trả lại kênh `hue` của màu @color saturation(@color); // trả lại kênh `saturation` của màu @color lightness(@color); // trả lại kênh 'lightness' của màu @color alpha(@color); // trả lại kênh 'alpha' của màu @color 

Điều này rất hữu dụng nếu bạn muộn tạo một màu dựa trên kênh của màu khác, ví dụ như:

@new: hsl(hue(@old), 45%, 90%); 

Các hàm toán học

LESS cung cấp một số hàm xử lý với các giá trị số:

round(1.67); // trả về `2` ceil(2.4); // trả về `3` floor(2.6); // trả về `2` 

Nếu bạn muốn chuyển một giá trị sang %, có thể dùng hàm percentage:

percentage(0.5); // trả về `50%` 

Namespaces

Đôi khi bạn muốn nhóm các biến hoặc các mixin lại để dễ quản lý, có thể sử dụng #bundle:

#bundle { .button () { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } .citation { ... } } 

Nếu muốn mixin class .button vào trong #header a, có thể làm như sau:

#header a { color: orange; #bundle > .button; } 

Phạm vi

Phạm vi trong LESS tương tự như trong các ngôn ngữ lập trình. Trình biên dịch sẽ tìm kiếm các biến và mixin đầu tiên trong phạm vi local, và nếu không thấy, nó sẽ tìm ở phạm vi cha, và cứ tiếp tục cho đến khi nào tìm thấy.

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

Comments

Comment của CSS được giữ nguyên trong LESS:

/* Đây là cú pháp của comment trong CSS truyền thống */ .class { color: black } 

Trong LESS ta có thể comment theo từng dòng, tuy nhiên nó sẽ không được hiển thị khi dịch ra CSS:

// Đây là cách comment trên từng dòng, comment này sẽ bị bỏ qua trong quá trình dịch .class { color: white } 

Importing

Bạn có thể import file .less, khi đó tất cả các biến và mixin trong file đó sẽ được thêm vào trong file gọi. Có thể không cần đuôi .less, nên cả hai trường hợp dưới đây đều hợp lệ:

@import "lib.less"; @import "lib"; 

Nếu bạn muốn import một file CSS, chỉ cần thêm đuôi .css:

@import "lib.css"; 

String interpolation

Biến có thể được đặt trong string tương tự như Ruby hay PHP với cú pháp @{name}:

@base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png"); 

Escaping

Đôi khi bạn có một giá trị của thuộc tính không theo chuẩn cú pháp của CSS, hay sử dụng những cú pháp mà LESS không nhận ra được, có thể đặt nó trong string với tiền tố ~, ví dụ:

.class { filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; } 

Kết quả:

.class { filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); } 

Thực thi biểu thức JavaScript

Các biểu thức JavaScript có thể được thực thi như là giá trị trong file .less , sử dụng dấu ` :

@var: `"hello".toUpperCase() + '!'`; 

Kết quả:

@var: "HELLO!"; 

Chú ý rằng bạn cũng có thể sử dụng interpolation và escaping như đối với string:

@str: "hello"; @var: ~`"@{str}".toUpperCase() + '!'`; 

Kết quả:

@var: HELLO!; 

Cũng có thể truy cập đến thành phần môi trường của Javascript như:

@height: `document.body.clientHeight`; 

Nếu bạn muốn chuyển một string thành một màu hex, bạn có thể dùng hàm color:

@color: color(`window.colors.baseColor`); @darkcolor: darken(@color, 10%); 

Một số hàm tham khảo

Index

escape(@string); // Mã hóa một chuỗi URL e(@string); // lấy ra nội dung của chuỗi %(@string, values...); // định dạnh chuỗi unit(@dimension, [@unit: ""]); // Xóa bỏ hoặc thay đổi kích thước color(@string); // Phân tích chuỗi màu ceil(@number); // Làm tròn thành một số nguyên liền kề trên floor(@number); // Làm tròn thành một số nguyên liền kề dưới percentage(@number); // Chuyển đổi từ số thực sang dạng số phần trăm. Ví dụ 0.5 -> 50% round(number, [places: 0]); // Làm tròn số trong khoảng cho trước rgb(@r, @g, @b); // Chuyển đổi thành một màu rgba(@r, @g, @b, @a); // Chuyển đổi thành một màu argb(@color); // Tạo ra màu a #AARRGGBB hsl(@hue, @saturation, @lightness); // Tạo ra màu hsla(@hue, @saturation, @lightness, @alpha); // Tạo ra màu hsv(@hue, @saturation, @value); // Tạo ra màu hsva(@hue, @saturation, @value, @alpha); // Tạo ra màu hue(@color); // Trả về màu hue từ biến màu @color saturation(@color); // Trả về độ nhạt từ biến màu @color lightness(@color); // Trả về độ sáng từ biến màu @color red(@color); // Trả về màu red từ biến màu @color green(@color); // Trả về màu green từ biến màu @color blue(@color); // Trả về màu blue từ biến màu @color alpha(@color); // Trả về giá trị allpha từ biến màu @color luma(@color); // Tr v gi� tr 'luma' (� s�ng) ca m�u @color saturate(@color, 10%); // Trả về một màu đậm hơn 10% so với biến màu @color desaturate(@color, 10%); //Trả về một màu nhạt hơn 10% so với biến màu @color lighten(@color, 10%); // Trả về một màu sáng hơn 10% so với biến màu @color darken(@color, 10%); // Trả về một màu tối hơn 10% so với biến màu @color fadein(@color, 10%); // Trả về một màu mờ đục hơn 10% so với biến màu @color fadeout(@color, 10%); // Trả về một màu trong suốt hơn 10% so với biến màu @color fade(@color, 50%); // Trả về một màu có độ trong suốt = 50% spin(@color, 10); // trả lại màu lớn hơn 10 độ hue hơn @color mix(@color1, @color2, [@weight: 50%]); // trộn hai màu @color1 và @color2 greyscale(@color); // Trả về màu xám(gray), 100% nhạt hơn màu @color contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // trả về màu @darkcolor nếu @color1 là > 43% luma // nếu không thì trả về màu @lightcolor multiply(@color1, @color2); screen(@color1, @color2); overlay(@color1, @color2); softlight(@color1, @color2); hardlight(@color1, @color2); difference(@color1, @color2); exclusion(@color1, @color2); average(@color1, @color2); negation(@color1, @color2); 

Các hàm về xử lý chuỗi

escape

Ứng dụng Kỹ thuật URL-encoding là để trả về ký tự đặc biệt được tìm thấy trong chuỗi đầu vào.

  • Ký tự sau đây là những trường hợp ngoại lệ và không mã hóa: ,/?@&+'~! và $.
  • Ký tự mã hóa phổ biến nhất là: <dấu cách>#^(){}|:><;][ và =.

Tham số:

  • Đầu vào: Một chuỗi

Trả về: Một chuỗi nội dung không có dấu ngoặc kép.

Ví dụ:

escape('a=1') 

Kết quả:

a%3D1 

Chú ý: Hàm sẽ trả về nội dung là không xác định nếu tham số truyền vào không phải là chuỗi.Kết quả thực hiện là undefined về màu sắc và đầu vào không thay đổi trên bất kỳ đối số khác. Phương thức này không bị phụ thuộc bởi những yếu tố có thể thay đổi trong tương lai

e

Hàm này có cú pháp là thêm giá trị~ vào trước chuỗi cần xử lý. Chúng ta sẽ thu được một chuỗi mới không có dấu ngoặc kép.

Tham số:

  • Đầu vào: Một chuỗi

Trả về: Một chuỗi Nội dung không có dấu ngoặc kép.

Ví dụ:

filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; 

Kết quả:

filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); 

Chú ý: Hàm này chấp nhận ~"" giá trị của hàm escaped và số như là những tham số. Còn những thứ khác đều trả về kết quả lỗi.

% format

Hàm này có cú pháp%(“format”, arguments …) để định dạng một chuỗi.Những tham số đầu tiên là chuỗi với nơi lưu giữ. Toàn bộ nơi lưu giữ bắt đầu với ký hiệu phần trăm % theo sau các ký tự s,S,d,D,a, or A. Đối số còn lại chứa các biểu thức để thay thế trình giữ chỗ. Nếu bạn cần in các biểu tượng tỷ lệ phần trăm, thoát ra khỏi nó bằng một tỷ lệ phần trăm. %%.

Tham số:

  • Chuỗi: Chuỗi định dạnh với trình lưu giữ,
  • Thứ khác* : giá trị để thay thế trình lưu giữ.

Trả về: Chuỗi đã được định dạng.

Ví dụ:

format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less"); format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less"); format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less"); format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less"); 

Kết quả:

format-a-d: "repetitions: 3 file: "directory/file.less""; format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22"; format-s: "repetitions: 3 file: directory/file.less"; format-s-upper: "repetitions: 3 file: directory%2Ffile.less"; 

Một số hàm về màu sắc

color

Phân tích 1 màu trả về nội dụng của màu đó.

Tham số:

  • Đầu vào: Một chuỗi màu

Ví dụ:

color("#aaa"); 

Kết quả:

#aaa 

unit

Di chuyển hoặc là thay đổi kích thước

Tham số:

  • Kích thước: là kiểu số của kích thước hoặc không phải là kích thước

Ví dụ:

unit(5, px) 

Kết quả:

5px 

Ví dụ:

unit(5em) 

Kết quả:

5 

Hàm toán học

ceil

Làm tròn đến số nguyên lớn nhất tiếp theo.

Tham số:

  • Số:Số thực bất kỳ.

Trả về: Số nguyên

Ví dụ:

ceil(2.4) 

Kết quả:

3 

floor

Làm tròn đến số nguyên nhỏ nhất tiếp theo.

Tham số:

  • Số: Số thực bất kỳ.

Trả về: Số nguyên

Ví dụ:

floor(2.6) 

Kết quả:

2 

percentage

Chuyển đổi số thực sang phần trăm.

Tham số:

  • Số: Số thực bất kỳ.

Trả về: chuỗi

Ví dụ:

percentage(0.5) 

Kết quả:

50% 

round

Áp dụng để làm tròn.

Tham số:

  • Số: Số thực bất kỳ.
  • Chữ số thập phân: Lưu ý: Những chữ số thập phân đều được làm tròn. Mặc định là 0.

Trả về: Số

Ví dụ:

round(1.67) 

Két quả:

2 

Ví dụ:

round(1.67, 1) 

Kết quả:

1.7 

Hàm về màu sắc

Hàm về định nghĩa màu sắc

rgb

Tạo một đối tượng màu mờ đục từ thập phân đỏ , xanh lá cây và xanh da trời từ giá trị RGB. Giá trị màu trong chuẩn HTML/CSS đã định dạng cũng có thể được sử dụng để xác định màu sắc, Ví dụ như #ff0000.

Tham số:

  • red: Số nguyên 0-255 hoặc phân trăm 0-100%.
  • green: Số nguyên 0-255 hoặc phân trăm 0-100%.
  • blue: Số nguyên 0-255 hoặc phân trăm 0-100%.

Trả về: màu

Ví dụ:

rgb(90, 129, 32) 

kết quả:

#5a8120 

rgba

Tạo ra một đối tượng màu trong suốt từ hệ số thập phân đỏ, xanh lá cây, xanh da trời và giá trị alpha RGBA.

Tham số:

  • red: Số nguyên 0-255 hoặc phân trăm 0-100%.
  • green: Số nguyên 0-255 hoặc phân trăm 0-100%.
  • blue: Số nguyên 0-255 hoặc phân trăm 0-100%.
  • alpha: Số nguyên 0-255 hoặc phân trăm 0-100%.

Trả về: màu

Ví dụ:

rgba(90, 129, 32, 0.5) 

Kết quả:

rgba(90, 129, 32, 0.5) 

argb

Tạo ra màu sắc từ số hệ hexa trong #AARRGGBB định dạng (NOT #RRGGBBAA!).

Tham số:

  • màu: Một đối tượng màu.

Trả về: chuỗi

Ví dụ:

argb(rgba(90, 23, 148, 0.5)); 

Kết quả:

#805a1794 

hsl

Tạo ra một đối tượng màu mờ đục từ màu sắc(hue),độ bão hòa(độ nhạt)(saturation ) và độ sáng(lightness).

Parameters:

  • hue: Một số nguyên 0-360 để thể hiện mức độ.
  • saturation: Một số 0-100% hoặc số 0-1.
  • lightness: Một số 0-100% hoặc số 0-1.

Trả về: màu

Ví dụ:

hsl(90, 100%, 50%) 

Kết quả:

#80ff00 

Phương thức này sẽ rất hữu ích nếu bạn muốn tạo ra một màu sắc mới dựa trên màu sắc khác, Ví dụ:

@new: hsl(hue(@old), 45%, 90%); 

@new sẽ có @old’s hue,saturation(45%) and lightness(90%).

hsla

Tạo ra một đối tượng màu trong suốt từ màu sắc(hue),(độ nhạt)(saturation ),độ sáng(lightness) và giá trị alpha(HSLA).

Tham số:

  • hue: Một số nguyên 0-360 để thể hiện mức độ.
  • saturation:Một số 0-100% hoặc số 0-1.
  • lightness:Một số 0-100% hoặc số 0-1.
  • alpha: Một số 0-100% hoặc số 0-1.

Trả về: màu

Ví dụ:

hsl(90, 100%, 50%, 0.5) 

Kết quả:

rgba(128, 255, 0, 0.5) 

hsv

Tạo ra một đối tượng màu mờ đục từ màu sắc(hue),độ bão hòa(độ nhạt)(saturation ) và độ sáng(lightness).Chú ý hàm này sẽ không giống với hàm hsl.

Tham số:

  • hue: Một số nguyên 0-360 để thể hiện mức độ.
  • saturation:Một số 0-100% hoặc số 0-1.
  • value: Một số 0-100% hoặc số 0-1.

Trả về: màu

Ví dụ:

hsv(90, 100%, 50%) 

Output:

#408000 

hsva

Tạo ra một đối tượng màu trong suốt từ màu sắc(hue),độ bão hòa(độ nhạt)(saturation ),độ sáng(lightness) và giá trị alpha(HSVA). Chú ý hàm này khác với hàm hsla.

Parameters:

  • hue: Một số nguyên 0-360 để thể hiện mức độ.
  • saturation:Một số 0-100% hoặc số 0-1.
  • lightness:Một số 0-100% hoặc số 0-1.
  • alpha: Một số 0-100% hoặc số 0-1.

Trả về: màu

Ví dụ:

hsva(90, 100%, 50%, 0.5) 

Kết quả:

rgba(64, 128, 0, 0.5) 

Hệ thông tin về màu sắc

hue

Lấy ra hệ màu (hue) của một đối tượng màu.

Tham số:

  • Màu:Một đối tượng màu.

Trả về: Số nguyên 0-360

Ví dụ:

hue(hsl(90, 100%, 50%)) 

Kết quả:

90 

saturation

Lấy ra độ bão hòa(độ nhạt)(saturation) của một đối tượng màu.

Tham số:

  • màu:một đối tượng màu.

Trả về: phân trăm 0-100%

Ví dụ:

saturation(hsl(90, 100%, 50%)) 

Kết qủa:

100% 

lightness

Lấy ra độ sáng(lightness) của một đối tượng màu.

Tham số:

  • màu: Một đối tượng màu.

Trả về: phần trăm 0-100%

Ví dụ:

lightness(hsl(90, 100%, 50%)) 

Kết quả:

50% 

red

Lấy ra hệ màu (red) của một đối tượng màu.

Tham số:

  • màu: Một đối tượng màu.

Trả về: số nguyên 0-255

Ví dụ:

red(rgb(10, 20, 30)) 

Kết quả:

10 

green

Lấy ra hệ màu (green) của một đối tượng màu.

Tham số:

  • Màu: Một đối tượng màu.

Trả về: Số nguyên 0-255

Ví dụ:

green(rgb(10, 20, 30)) 

Kết quả:

20 

blue

Lấy ra hệ màu (blue) của một đối tượng màu.

Tham số:

  • Màu:Một đối tượng màu.

Trả về: số nguyên 0-255

Ví dụ:

blue(rgb(10, 20, 30)) 

Kết quả:

30 

alpha

Lấy ra hệ số (alpha) của một đối tượng màu.

Tham số:

  • màu: Một đối tượng màu.

Trả về: Số thực 0-1

Ví dụ:

alpha(rgba(10, 20, 30, 0.5)) 

Kết quả:

0.5 

luma

Tính (phân biệt độ sáng) luma) của một đối tượng màu. Sử dụng hệ số SMPTE C / Rec.709, theo khuyến cáo trong WCAG 2.0. Tính toán này cũng được sử dụng trong hàm tương phản.

Tham số:

  • màu: Một đối tượng màu.

Trả về: phân trăm 0-100%

Ví dự:

luma(rgb(100, 200, 30)) 

Kết quả:

65% 

Thao tác với màu sắc

Thao tác với tham số màu trong cùng một đơn vị như các giá trị mà chúng đang thay đổi, và tỷ lệ phần trăm được xử lý là tuyệt đối,Với những phương thức này bạn có thể xử lý, thêm với tỷ lệ phần trăm của một hàm đối tượng màu.

saturate

làm tăng lên độ bão hòa(độ nhạt) của màu sắc bằng một con số tuyệt đối.

Tham số:

  • Màu: Một đối tượng màu.
  • Số: Phần trăm 0-100%.

Trả về: màu

Ví dụ:

saturate(hsl(90, 90%, 50%), 10%) 

Kết quả:

#80ff00 // hsl(90, 100%, 50%) 

desaturate

làm giảm đi độ bão hòa(độ nhạt) của màu sắc bằng một con số tuyệt đối.

Tham số:

  • màu: Một đối tượng màu.
  • Số :P hần trăm 0-100%.

Trả về: màu

Ví dụ:

desaturate(hsl(90, 90%, 50%), 10%) 

Kết quả:

#80e51a // hsl(90, 80%, 50%) 

lighten

làm tăng lên độ sáng của màu sắc bằng một con số tuyệt đối.

Tham số:

  • màu: Một đối tượng màu.
  • Số :P hần trăm 0-100%.

Trả về: màu

Ví dụ:

lighten(hsl(90, 90%, 50%), 10%) 

Kết quả:

#99f53d // hsl(90, 90%, 60%) 

darken

làm giảm đi độ sáng của màu sắc bằng một con số tuyệt đối.

Tham số:

  • màu: Một đối tượng màu.
  • Số :P hần trăm 0-100%.

Trả về: màu

Ví dụ:

darken(hsl(90, 90%, 50%), 10%) 

Kết quả:

#66c20a // hsl(90, 90%, 40%) 

fadein

Làm giảm đi độ trong suốt (hoặc tăng độ mờ đục) của một màu, làm cho nó trở nên mờ đục hơn. Ngược lại ta sử dụng fadeout.

Tham số:

  • màu: Một đối tượng màu.
  • Số lượng: Phần trăm 0-100%.

Trả về: color

Ví dụ:

fadein(hsla(90, 90%, 50%, 0.5), 10%) 

Kết quả:

rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6) 

fadeout

Làm tăng lên độ trong suốt (hoặc giảm độ mờ đục) của một màu, làm cho nó trở nên trong suốt hơn. Ngược lại ta sử dụng fadein.

Tham số:

  • màu: Một đối tượng màu.
  • Số : Phần trăm 0-100%.

Trả về: màu

Ví dụ:

fadeout(hsla(90, 90%, 50%, 0.5), 10%) 

Kết quả:

rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.6) 

fade

Thiết lập độ trong suốt tuyệt đối của một màu. Có thể áp dụng màu sắc cho dù chúng đã có một giá trị mờ đục hay không.

Tham số:

  • màu: Một đối tượng màu.
  • Số : Phần trăm 0-100%.

Trả về: màu

Ví dụ:

fade(hsl(90, 90%, 50%), 10%) 

Kết quả:

rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1) 

spin

Xoay góc màu của một màu sắc trong hai hướng.Trong khi phạm vi góc 0-360, nó được áp dụng một phép tính chia hết cho 360,Ví dụ như góc 720 và 360 là như nhau. Phương thức này được thực hiện như sau:

@c: saturate(spin(#aaaaaa, 10), 10%); 

Thay vì:

@c: spin(saturate(#aaaaaa, 10%), 10); 

Màu luôn luôn được trả về là giá trị RBG, Vì vậy việc áp dụng spin để lấy giá trị màu sám là gần như không thể.

Tham số:

  • màu: Một đối tượng màu.
  • góc: Một góc để xoay (+ or -).

Trả về: màu

Ví dụ:

spin(hsl(10, 90%, 50%), 20) spin(hsl(10, 90%, 50%), -20) 

Kết qủa:

#f27f0d // hsl(30, 90%, 50%) #f20d33 // hsl(350, 90%, 50%) 

mix

Pha(trộn) hai màu với nhau trong biến tỷ lệ. Độ mờ đục sẽ được đưa vào các tính toán.

Tham số:

  • Màu 1: Một đối tượng màu.
  • Màu 2: Một đối tượng màu.
  • Tỷ lệ: Là phần trăm giữa hai màu, Mặc định là 50%.

Trả về: màu

Ví dụ:

mix(#ff0000, #0000ff, 50%) mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%) 

Kết quả:

#800080 rgba(75, 25, 0, 0.75) 

greyscale

Xóa toàn bộ độ bão hòa(độ nhạt) từ một màu, Phương thức này gần giống với hàm desaturate(@color,100%).

Tham số:

  • màu: một đối tượng màu.

Trả về: màu

Ví dụ:

greyscale(hsl(90, 90%, 50%)) 

Kết quả:

#808080 // hsl(90, 0%, 50%) 

contrast

Chọn ra một trong hai màu, màu nào có độ tương phản là lớn nhất.

Tham số:

  • màu: một đối tượng màu để so sánh.
  • độ tối: Một giá trị màu tối (Mặc định là màu đen).
  • độ sáng: Một giá trị màu trắng (Mặc định là màu trắng).
  • Tỷ lệ:Tỷ lệ phần trăm. Mặc định là 43%.

Trả về: màu

Ví dụ:

contrast(#aaaaaa) contrast(#222222, #101010) contrast(#222222, #101010, #dddddd) contrast(hsl(90, 100%, 50%),#000000,#ffffff,40%); contrast(hsl(90, 100%, 50%),#000000,#ffffff,60%); 

Kết quả:

#000000 // black #ffffff // white #dddddd #000000 // black #ffffff // white 

Pha chế màu sắc

Những phương thức này tương tự như là kỹ thuật blend trong việc sử lý hình ảnh như Photoshop, Firework or GIMP, Vì vậy bạn có thể sử dụng để tạo ra màu CSS kết hợp với ảnh của bạn.

multiply

Nhân hai màu. Đối với mỗi màu RGB được nhân sau đó chia cho 255. Kết quả sẽ là một màu tối hơn.

Tham số:

  • Màu 1: Một đối tượng màu để thực hiện phép nhân.
  • Màu 2: Một đối tượng màu để thực hiện phép nhân.

Trả về: màu

Ví dụ:

multiply(#ff6600, #000000); 

Color 1 Color 2 Color 3

multiply(#ff6600, #333333); 

Color 1 Color 2 Color 3

multiply(#ff6600, #666666); 

Color 1 Color 2 Color 3

multiply(#ff6600, #999999); 

Color 1 Color 2 Color 3

multiply(#ff6600, #cccccc); 

Color 1 Color 2 Color 3

multiply(#ff6600, #ffffff); 

Color 1 Color 2 Color 3

multiply(#ff6600, #ff0000); 

Color 1 Color 2 Color 3

multiply(#ff6600, #00ff00); 

Color 1 Color 2 Color 3

multiply(#ff6600, #0000ff); 

Color 1 Color 2 Color 3

screen

Phương thức này trả về hiệu ứng ngược lại với hàm multiply. Kết quả sẽ thu được một màu sáng hơn.

Parameters:

  • Màu 1: Một đối tượng màu để screen.
  • Màu 2: Một đối tượng màu để screen.

Trả về: màu

Ví dụ:

screen(#ff6600, #000000); 

Color 1 Color 2 Color 3

screen(#ff6600, #333333); 

Color 1 Color 2 Color 3

screen(#ff6600, #666666); 

Color 1 Color 2 Color 3

screen(#ff6600, #999999); 

Color 1 Color 2 Color 3

screen(#ff6600, #cccccc); 

Color 1 Color 2 Color 3

screen(#ff6600, #ffffff); 

Color 1 Color 2 Color 3

screen(#ff6600, #ff0000); 

Color 1 Color 2 Color 3

screen(#ff6600, #00ff00); 

Color 1 Color 2 Color 3

screen(#ff6600, #0000ff); 

Color 1 Color 2 Color 3

overlay

Kết hợp hai hiệu ứng khi đẫ thực hiện hàm multiply và hàm screen. Điều kiện là làm cho hệ màu sáng sẽ sáng hơn và hệ màu tối sẽ tối hơn. Chú ý: Kết quả của điều kiện là quyết định bởi tham số màu đầu tiên.

Tham số:

  • Màu 1: Một đối tượng màu để overlay khác.Ngoài ra nó còn để quyết định ra kết quả màu là sáng hơn hay tối hơn.
  • Màu 2: Một đối tượng màu đã overlay.

Trả về: màu

Ví dụ:

overlay(#ff6600, #000000); 

Color 1 Color 2 Color 3

overlay(#ff6600, #333333); 

Color 1 Color 2 Color 3

overlay(#ff6600, #666666); 

Color 1 Color 2 Color 3

overlay(#ff6600, #999999); 

Color 1 Color 2 Color 3

overlay(#ff6600, #cccccc); 

Color 1 Color 2 Color 3

overlay(#ff6600, #ffffff); 

Color 1 Color 2 Color 3

overlay(#ff6600, #ff0000); 

Color 1 Color 2 Color 3

overlay(#ff6600, #00ff00); 

Color 1 Color 2 Color 3

overlay(#ff6600, #0000ff); 

Color 1 Color 2 Color 3

softlight

Tương tụ như overlay nhưng tránh được màu đen thuần túy kết quả là màu đen, và màu trắng thuần túy kết quả sẽ là màu trắng.

Tham số:

  • Màu 1: Một đối tượng màu để soft light khác.
  • Màu 2: Một đối tượng màu để soft lighten.

Trả về: color

Ví dụ:

softlight(#ff6600, #000000); 

Color 1 Color 2 Color 3

softlight(#ff6600, #333333); 

Color 1 Color 2 Color 3

softlight(#ff6600, #666666); 

Color 1 Color 2 Color 3

softlight(#ff6600, #999999); 

Color 1 Color 2 Color 3

softlight(#ff6600, #cccccc); 

Color 1 Color 2 Color 3

softlight(#ff6600, #ffffff); 

Color 1 Color 2 Color 3

softlight(#ff6600, #ff0000); 

Color 1 Color 2 Color 3

softlight(#ff6600, #00ff00); 

Color 1 Color 2 Color 3

softlight(#ff6600, #0000ff); 

Color 1 Color 2 Color 3

hardlight

Tương tự như overlay nhưng sử dụng màu sắc thứ hai để được các hệ màu sáng và tối thay vì sử dụng màu sắc đầu tiên.

Tham số:

  • Màu 1: Một đối tượng màu để overlay khác.
  • Màu 2: Một đối tượng mày đã được overlay. Ngoài ra nó là màu sắc quyết định để làm cho kết quả sáng hơn hoặc tối hơn.

Trả về: màu

Ví dụ:

hardlight(#ff6600, #000000); 

Color 1 Color 2 Color 3

hardlight(#ff6600, #333333); 

Color 1 Color 2 Color 3

hardlight(#ff6600, #666666); 

Color 1 Color 2 Color 3

hardlight(#ff6600, #999999); 

Color 1 Color 2 Color 3

hardlight(#ff6600, #cccccc); 

Color 1 Color 2 Color 3

hardlight(#ff6600, #ffffff); 

Color 1 Color 2 Color 3

hardlight(#ff6600, #ff0000); 

Color 1 Color 2 Color 3

hardlight(#ff6600, #00ff00); 

Color 1 Color 2 Color 3

hardlight(#ff6600, #0000ff); 

Color 1 Color 2 Color 3

difference

Trừ màu thứ hai cho màu đầu tiên. Phương thức này tạo ra hệ màu RGB. Kết quả là một màu tối hơn.

Tham số:

  • màu 1: Một đối tượng màu là số để trừ.
  • màu 2: Một đối tượng màu là số bị trừ.

Trả về: màu

Ví dụ:

difference(#ff6600, #000000); 

Color 1 Color 2 Color 3

difference(#ff6600, #333333); 

Color 1 Color 2 Color 3

difference(#ff6600, #666666); 

Color 1 Color 2 Color 3

difference(#ff6600, #999999); 

Color 1 Color 2 Color 3

difference(#ff6600, #cccccc); 

Color 1 Color 2 Color 3

difference(#ff6600, #ffffff); 

Color 1 Color 2 Color 3

difference(#ff6600, #ff0000); 

Color 1 Color 2 Color 3

difference(#ff6600, #00ff00); 

Color 1 Color 2 Color 3

difference(#ff6600, #0000ff); 

Color 1 Color 2 Color 3

exclusion

Tương tụ với hiệu ứng như difference nhưng trả về màu có độ tương phản thấp hơn.

Tham số:

  • màu 1: Một đối tượng màu là số để trừ.
  • màu 2: Một đối tượng màu là số bị trừ.

Trả về: màu

Ví dụ:

exclusion(#ff6600, #000000); 

Color 1 Color 2 Color 3

exclusion(#ff6600, #333333); 

Color 1 Color 2 Color 3

exclusion(#ff6600, #666666); 

Color 1 Color 2 Color 3

exclusion(#ff6600, #999999); 

Color 1 Color 2 Color 3

exclusion(#ff6600, #cccccc); 

Color 1 Color 2 Color 3

exclusion(#ff6600, #ffffff); 

Color 1 Color 2 Color 3

exclusion(#ff6600, #ff0000); 

Color 1 Color 2 Color 3

exclusion(#ff6600, #00ff00); 

Color 1 Color 2 Color 3

exclusion(#ff6600, #0000ff); 

Color 1 Color 2 Color 3

average

Thực hiện pháp tính trung bình của hai màu. Điều khiển này sẽ tạo ra hệ màu RGB.

Tham số:

  • Màu 1: Một đối tượng màu.
  • Màu 2: Một đối tượng màu.

Trả về: màu

Ví dụ:

average(#ff6600, #000000); 

Color 1 Color 2 Color 3

average(#ff6600, #333333); 

Color 1 Color 2 Color 3

average(#ff6600, #666666); 

Color 1 Color 2 Color 3

average(#ff6600, #999999); 

Color 1 Color 2 Color 3

average(#ff6600, #cccccc); 

Color 1 Color 2 Color 3

average(#ff6600, #ffffff); 

Color 1 Color 2 Color 3

average(#ff6600, #ff0000); 

Color 1 Color 2 Color 3

average(#ff6600, #00ff00); 

Color 1 Color 2 Color 3

average(#ff6600, #0000ff); 

Color 1 Color 2 Color 3

negation

Hàm này sẽ trả về kết quả có hiệu ứng ngược với hàmdifference. Kết quả là màu sáng hơn.

Tham số:

  • màu 1: Một đối tượng màu là số để trừ.
  • màu 2: Một đối tượng màu là số bị trừ.

Trả về: màu

Ví dụ:

negation(#ff6600, #000000); 

Color 1 Color 2 Color 3

negation(#ff6600, #333333); 

Color 1 Color 2 Color 3

negation(#ff6600, #666666); 

Color 1 Color 2 Color 3

negation(#ff6600, #999999); 

Color 1 Color 2 Color 3

negation(#ff6600, #cccccc); 

Color 1 Color 2 Color 3

negation(#ff6600, #ffffff); 

Color 1 Color 2 Color 3

negation(#ff6600, #ff0000); 

Color 1 Color 2 Color 3

negation(#ff6600, #00ff00); 

Color 1 Color 2 Color 3

negation(#ff6600, #0000ff); 

Color 1 Color 2 Color 3

Ngôn ngữ khác

Tác giả

LESS được phát triển bởi Alexis Sellier, thường được biết đến là cloudhead.

Phiên bản tiếng Việt của tài liệu này được thực hiện bởi tek.eten.vn

powered by LESS

Copyright © Alexis Sellier 2010-2012