tiếp theo của: Ngu ngơ học làm web (41) - JavaScript trong Bootstrap
-------
Phần 42.
LESS, tùy biến Bootstrap và theme
“LESS là một CSS preprocessor, giúp viết các đoạn mã CSS đơn
giản, ngắn gọn và hiệu quả hơn, đồng thời cũng dễ quản lý hơn bằng cách thêm
vào CSS các thành phần động như biến, mixins, toán tử và hàm. LESS được phát
triển bởi Alexis Sellier, một lập trình viên người Đức.” (nguồn Internet)
LESS là 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.
Đây là clip số 27: làm quen với LESS
Vào đây để đọc thêm và để tải LESS về máy: http://lesscss.org/
Vậy nếu CSS bằng LESS thì phải có một phần mềm để soạn thảo
và chuyển mã từ dạng LESS sang dạng CSS. Quá trình chuyển mã từ LESS sang CSS
được thực hiện ở đâu?
Thực hiện cài đặt và chạy thử để hiểu thêm về LESS.
Máy này đang chạy Windows, nên sẽ dùng phần mềm soạn thảo và
chuyển mã có tên WinLess, http://winless.org/
Tải về và cài đặt. Khi cài đặt nếu máy tính chưa có thư viện
.NET, khi chạy WinLess sẽ yêu cầu tải và cài đặt thư viện này.
Tạo một thư mục (ví dụ TestLESS), trong thư mục tạo hai tập
tin index.html và style.less với nội dung như sau:
[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>Document</title>
<link
rel="stylesheet" href="style.css">
</head>
<body>
<h1>Testing
LESS</h1>
</body>
</html>
[style.less]
body {
background: red;
color: yellow;
}
h1 {
color: yellow;
}
Chạy chương trình WinLess, bấm vào mục Add folder để nhập
vào thư mục chứa tập tin style.less, sau khi chọn thư mục xong, để ý ở cửa sổ
bên phải sẽ có thông tin đường dẫn của tập tin nguồn (style.less) và tập tin sẽ
được kết xuất ra (style.css).
Dùng một editor bất kì để soạn mã LESS (ví dụ Sublime Text),
mỗi khi thực hiện lưu (save) bên editor là WinLess sẽ thực hiện kết xuất
(chuyển mã từ dạng LESS sang dạng CSS).
Đây là clip số 28: biến, toán tử, mixins, nesting
Khai báo biến bằng từ khóa @, tiếp theo là dấu :, và cuối
cùng là giá trị gán cho biến.
Ví dụ,
[style.less]
@bg: blue;
@color: white;
@border: 1px;
body {
background: @bg;
color: @color;
}
h1 {
color: @color;
}
Toán tử trên biến, ví dụ: cộng, trừ, nhân, chia.
h1 {
color: @color;
border: @border*3 solid red;
}
Mixins là gắn toàn bộ thuộc tính của một class vào một class
khác (trong CSS), ví dụ:
.big {
font-size: 40px;
}
p {
.big;
border:
@border*5 solid red;
}
Nesting: lồng các đối tượng trong CSS vào nhau. Ví dụ, từ mã
LESS sau:
#container {
h1 {
color:
@color;
}
p {
border:
@border;
}
}
Khi xuất ra CSS sẽ là:
#container h1 {
color: red;
}
#container p {
border: 1px;
}
Đây là clip số 29: Tùy biến Bootstrap
Tùy theo nhu cầu sử dụng, có thể lựa chọn từng thành phần
của Bootstrap, nhằm tối ưu dung lượng và tốc độ thực thị của Bootstrap. Để thực
hiện, vào trang http://getbootstrap.com/,
chọn phiên bản v3.3.7, chọn tab Customize, đánh dấu chọn các thành phần cần
thiết, cuối cùng bấm nút Compile and Download để tải về và sử dụng.
Đây là clip số 30: Ghi đè giá trị CSS của Bootstrap
Có thể định nghĩa lại các class của Bootstrap theo yêu cầu.
Ví dụ: .btn { background: red; }, tuy nhiên, cách này làm cho mọi phần tử sử
dụng class = “btn” đều bị tác động. Có cách khác là định nghĩa một class mới,
ví dụ .btn-new { background: red; }.
Để ý thứ tự áp dụng, và thứ tự ưu tiên của CSS lên các phần
tử HTML. Ví dụ, viết thế này:
<link href="css/bootstrap.min.css"
rel="stylesheet">
<link
rel="stylesheet" href="style.css">
Và viết thế này sẽ có kết quả khác nhau:
<link
rel="stylesheet" href="style.css">
<link href="css/bootstrap.min.css"
rel="stylesheet">
Đây là clip số 31: theme - các mẫu giao diện mới
Thêm thư viện theme vào trang HTML: <link
href="css/bootstrap-theme.min.css" rel="stylesheet">
Xem thêm về xu hướng phẳng (flat) trong thiết kế giao diện web: http://designmodo.github.io/Flat-UI/
-----------
Cập nhật [16/10/2017][22/10/2016]
-----------