11.1 Sass (Syntactically Awesome Stylesheets)
Preprocessors cho CSS — là công cụ cho phép mở rộng khả năng của CSS và làm cho việc viết style dễ dàng hơn. Chúng thêm các tính năng như biến, luật lồng nhau, mixin và function, giúp code trở nên mô-đun hơn, có thể tái sử dụng và dễ dàng duy trì. Ngày nay, chúng ta sẽ tìm hiểu các preprocessors CSS phổ biến nhất: Sass, LESS và Stylus.
Sass — là một trong những preprocessors CSS phổ biến nhất, cung cấp rất nhiều tính năng hữu ích cho việc tạo kiểu.
Cài đặt Sass
Bạn có thể cài Sass qua npm:
npm install -g sass
Tính năng chính của Sass
1. Biến
Biến trong Sass cho phép lưu trữ giá trị có thể được sử dụng lại:
<html>
<head>
<style>
body {
color: #333;
}
</style>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>
$primary-color: #333
body
color: $primary-color
2. Luật lồng nhau
Luật lồng nhau cho phép viết CSS theo phong cách phân cấp hơn:
<html>
<head>
<style>
nav {
background: #eee;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
color: tomato;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Phần tử 1</li>
<li>Phần tử 2</li>
<li>Phần tử 3</li>
</ul>
</nav>
</body>
</html>
nav
background: #eee
ul
margin: 0
padding: 0
list-style: none
li
color: tomato
3. Mixins
Mixins cho phép tạo nhóm style có thể được bao gồm trong các quy tắc khác:
<html>
<head>
<style>
.box {
width: 256px;
min-height: 200px;
border-radius: 10px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="box">Nội dung</div>
</body>
</html>
@mixin border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
border-radius: $radius
.box
@include border-radius(10px)
border: 2px solid green
width: 256px
min-height: 200px
4. Kế thừa
Kế thừa cho phép một selector kế thừa style của một selector khác:
<html>
<head>
<style>
.box {
min-height: 120px;
}
.box:not(:last-child) {
margin-bottom: 5px;
}
.info, .success, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
background-color: #cfc;
}
.warning {
background-color: #fc9
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box info">Một số thông tin</div>
<div class="box success">Thành công</div>
<div class="box warning">Cảnh báo!</div>
</div>
</body>
</html>
%message
border: 1px solid #ccc
padding: 10px
color: #333
.box
min-height: 120px
&:not(:last-child)
margin-bottom: 5px
.info
@extend %message
.success
@extend %message
background-color: #cfc
.warning
@extend %message
background-color: #fc9
5. Chức năng
<html>
<head>
<style>
body {
font-size: 1.125rem;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cupiditate esse libero veritatis voluptatem?
Aliquam atque laboriosam porro recusandae totam.
</p>
</body>
</html>
@function px-to-rem($px, $base-font-size: 16px)
@return ($px / $base-font-size) * 1rem;
body
font-size: px-to-rem(18px);
Biên dịch Sass
Biên dịch Sass sang CSS bằng lệnh:
sass style.scss style.css
11.2 LESS
Cài đặt LESS
Bạn có thể cài LESS qua npm:
npm install -g less
Tính năng chính của LESS
1. Biến:
<html>
<head>
<style>
body {
color: #333;
}
</style>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>
@primary-color: #333;
body {
color: @primary-color;
}
2. Luật lồng nhau:
<html>
<head>
<style>
nav {
background: #eee;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
color: tomato;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Phần tử 1</li>
<li>Phần tử 2</li>
<li>Phần tử 3</li>
</ul>
</nav>
</body>
</html>
nav {
background: #eee;
ul {
margin: 0;
padding: 0;
list-style: none;
li {
color: tomato;
}
}
}
<html>
<head>
<style>
.box {
width: 256px;
min-height: 200px;
border-radius: 10px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="box">Nội dung</div>
</body>
</html>
3. Mixins:
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.box {
.border-radius(10px);
border: 2px solid green;
width: 256px;
min-height: 200px;
}
4. Kế thừa:
LESS sử dụng ký hiệu "&" để tham chiếu đến parent.
<html>
<head>
<style>
button:hover {
background-color: #555;
}
</style>
</head>
<body>
<button>Nút</button>
</body>
</html>
.button {
&:hover {
background-color: #555;
}
}
5. Chức năng:
LESS hỗ trợ các hàm để xử lý màu sắc, số và chuỗi.
<html>
<head>
<style>
body {
font-size: 1.125rem;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cupiditate esse libero veritatis voluptatem?
Aliquam atque laboriosam porro recusandae totam.
</p>
</body>
</html>
@base: 16px;
.font-size(@size) {
font-size: (@size / @base) * 1rem;
}
body {
.font-size(18px);
}
Biên dịch LESS
Biên dịch LESS sang CSS bằng lệnh:
lessc style.less style.css
11.3 Stylus
Stylus — là một preprocessor CSS linh hoạt và mạnh mẽ, cung cấp cú pháp ngắn gọn và nhiều tính năng hữu ích.
Cài đặt Stylus
Bạn có thể cài Stylus qua npm:
npm install -g stylus
Tính năng chính của Stylus
1. Biến:
<html>
<head>
<style>
body {
color: #333;
}
</style>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>
primary-color = #333
body
color primary-color
2. Luật lồng nhau:
<html>
<head>
<style>
nav {
background: #eee;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
color: tomato;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Phần tử 1</li>
<li>Phần tử 2</li>
<li>Phần tử 3</li>
</ul>
</nav>
</body>
</html>
nav
background #eee
ul
margin 0
padding 0
list-style none
li
color tomato
3. Mixins:
<html>
<head>
<style>
.box {
width: 256px;
min-height: 200px;
border-radius: 10px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="box">Nội dung</div>
</body>
</html>
border-radius(radius)
-webkit-border-radius radius
-moz-border-radius radius
border-radius radius
.box
border-radius(10px)
border 2px solid green
width 256px
min-height 200px
4. Kế thừa:
Stylus sử dụng @extend để kế thừa.
<html>
<head>
<style>
.box {
min-height: 120px;
}
.box:not(:last-child) {
margin-bottom: 5px;
}
.info, .success, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
background-color: #cfc;
}
.warning {
background-color: #fc9
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box info">Một số thông tin</div>
<div class="box success">Thành công</div>
<div class="box warning">Cảnh báo!</div>
</div>
</body>
</html>
.message
border 1px solid #ccc
padding 10px
color #333
.info
@extend .message
.success
@extend .message
background-color #cfc
.warning
@extend .message
background-color #fc9
5. Chức năng:
Stylus cho phép tạo các hàm để tái sử dụng.
<html>
<head>
<style>
body {
font-size: 1.125rem;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cupiditate esse libero veritatis voluptatem?
Aliquam atque laboriosam porro recusandae totam.
</p>
</body>
</html>
px-to-rem(px, base-font-size = 16px)
px / base-font-size * 1rem
body
font-size px-to-rem(18px)
Biên dịch Stylus
Biên dịch Stylus sang CSS bằng lệnh:
stylus style.styl
GO TO FULL VERSION