Giới thiệuNhư đã đề cập ở những bài trước, Sass cung cấp cho chúng ta các phép toán học, các phép kết hợp hay các phép so sánh giống như các ngôn ngữ khác. Và đây chính là sức mạnh của Sass so với cách viết CSS thông thường @debug 1 + 2 * 3 == 1 + (2 * 3) // true
@debug true or false and false == true or (false and false) // true
@debug (1 + 2) * 3 // 6
@debug ((1 + 2) * 3 + 4) * 5 // 65
SASS OperatorsDưới đây là các phép được hỗ trợ trong Sass - Mathematical Operators (Phép toán học)
- Equality Operators (Các phép so sánh)
- Relational Operators (Phép quan hệ)
- String Operators (Xử lý chuỗi)
- Boolean Operators (Toán tử Boolean)
Chúng ta sẽ tìm hiểu chi tiết về các phép toán trong giáo trình này nhé Tổng kếtCác phép toán trong Sass/Scss cũng giống như những ngôn ngữ lập trình khác. Nên việc tiếp cận khái niệm này khá dễ ràng. Hy vọng bài viết này giúp các bạn hiểu và biết cách sử dụng các phép toán trong Sass một cách hiệu quả. 21. FunctionFunction có thể có tham số hoặc không có tham số
Function có thể truyền tham số mặc định vào trong param | Function cũng khá giống với mixin nên tùy vào mục đích sử dụng | Ta dùng function khi muốn tính toán, so sánh giá trị rồi trả về một kết quả |
---|
SCSS - biểu thức | SCSS chấp nhận các biểu thức sau (nhìn nhiều vậy thôi, thực tế dùng chỉ cộng, trừ, nhân, chia là thường dùng à ^^!, những phần khác dùng viết template này nọ ^^): | Thấy rắc rối quá thì bạn lướt qua cũng được, khi nào cần thì quay lại sau ^^. | Biểu thức quan hệ | Biểu thức | Giải thích | Ví dụ | == | Bằng | $a == $b | > | Lớn hơn |
$a > $b
Function có thể truyền tham số mặc định vào trong param | Function cũng khá giống với mixin nên tùy vào mục đích sử dụng | Ta dùng function khi muốn tính toán, so sánh giá trị rồi trả về một kết quả |
---|
SCSS - biểu thức | SCSS chấp nhận các biểu thức sau (nhìn nhiều vậy thôi, thực tế dùng chỉ cộng, trừ, nhân, chia là thường dùng à ^^!, những phần khác dùng viết template này nọ ^^): | Thấy rắc rối quá thì bạn lướt qua cũng được, khi nào cần thì quay lại sau ^^. | Biểu thức quan hệ | Biểu thức | Giải thích | Ví dụ | == | Bằng | $a == $b | > | Lớn hơn | $a > $b | >= | Lớn hơn hoặc bằng |
Function có thể truyền tham số mặc định vào trong param | Kết quả |
---|
Vùng chọn <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
2 sẽ chỉ kế thừa các thuộc tính mà không compile. | h2 {
text-align: center;
box-shadow: 0 0 5px blue;
span {
color: green;
}
}
6 | 14. if | Kiểm tra một câu lệnh điều kiện và trả về một giá trị tương ứng
| 15. for | Sử dụng vòng lặp <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
3 cho các trường hợp biết trước số lần lặp lại khối lệnh. | 16. each | 5 | Vòng lặp <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
4 dùng để lặp dữ liệu trong list hoặc map. Lưu ý trong SASS không có kiểu dữ liệu là mảng nhé | 17. while
| Vòng lặp <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
5 sẽ thực hiện lặp đi lặp lại một khối công việc đến khi nào điều kiện đã cho còn là đúng. | h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue; }
h2 span {
color: green; }
/*# sourceMappingURL=style.css.map */
1 | 18. Mixin không tham số | Mixin cho phép bạn định nghĩa các thuộc tính CSS lại với nhau, về cơ bản nó mạnh hơn so với việc dùng biến chỉ lưu được một giá trị, cũng giống với extend kế thừa các thuộc tính nhưng mixin còn hỗ trợ thêm cả tham số không khác gì một function.
| Sử dụng <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
6 để khai báo mixin | Sử dụng <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
7 để sử dụng
|
19. Mixin có tham số
Ta dùng function khi muốn tính toán, so sánh giá trị rồi trả về một kết quả | Kết quả |
---|
Vùng chọn <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
2 sẽ chỉ kế thừa các thuộc tính mà không compile. | h2 {
text-align: center;
box-shadow: 0 0 5px blue;
span {
color: green;
}
}
6 | 14. if | Kiểm tra một câu lệnh điều kiện và trả về một giá trị tương ứng | 15. for | Kiểm tra một câu lệnh điều kiện và trả về một giá trị tương ứng |
15. for
Function có thể truyền tham số mặc định vào trong param | Ta dùng function khi muốn tính toán, so sánh giá trị rồi trả về một kết quả | Kết quả |
---|
Vùng chọn <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
2 sẽ chỉ kế thừa các thuộc tính mà không compile. | h2 {
text-align: center;
box-shadow: 0 0 5px blue;
span {
color: green;
}
}
6 | 14. if | Kiểm tra một câu lệnh điều kiện và trả về một giá trị tương ứng | 15. for | Sử dụng vòng lặp <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
3 cho các trường hợp biết trước số lần lặp lại khối lệnh. | 16. each | Vòng lặp <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
4 dùng để lặp dữ liệu trong list hoặc map. Lưu ý trong SASS không có kiểu dữ liệu là mảng nhé | Sử dụng vòng lặp <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
3 cho các trường hợp biết trước số lần lặp lại khối lệnh. | 16. each | Vòng lặp <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
4 dùng để lặp dữ liệu trong list hoặc map. Lưu ý trong SASS không có kiểu dữ liệu là mảng nhé | 14. if | Kiểm tra một câu lệnh điều kiện và trả về một giá trị tương ứng | 15. for | Sử dụng vòng lặp <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
3 cho các trường hợp biết trước số lần lặp lại khối lệnh. | 16. each | Vòng lặp <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
4 dùng để lặp dữ liệu trong list hoặc map. Lưu ý trong SASS không có kiểu dữ liệu là mảng nhé | 17. while | Vòng lặp <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
5 sẽ thực hiện lặp đi lặp lại một khối công việc đến khi nào điều kiện đã cho còn là đúng. | h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue; }
h2 span {
color: green; }
/*# sourceMappingURL=style.css.map */
1 | Sử dụng vòng lặp <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
3 cho các trường hợp biết trước số lần lặp lại khối lệnh. | 16. each | Vòng lặp <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
4 dùng để lặp dữ liệu trong list hoặc map. Lưu ý trong SASS không có kiểu dữ liệu là mảng nhé | 17. while | Lưu ý Function có thể có tham số hoặc không có tham số Function có thể truyền tham số mặc định vào trong param Function cũng khá giống với mixin nên tùy vào mục đích sử dụng Ta dùng function khi muốn tính toán, so sánh giá trị rồi trả về một kết quảSASS là một cách viết CSS kiểu mới, giúp bạn quản lí code CSS một cách khoa học, dễ quản lí, nâng cấp, thích hợp khi làm các dự án lớn. Nhờ các tính năng như variables, functions, mixins... các đoạn mã CSS sẽ trở nên có tổ chức cho phép developer làm việc nhanh và ít gặp lỗi hơn. Trang chủ: http://sass-lang.com/SASS là một CSS Processor có đuôi file là h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue;
}
h2 span {
color: green;
}
/*# sourceMappingURL=style.css.map */
0 khác với CSS thuần là h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue;
}
h2 span {
color: green;
}
/*# sourceMappingURL=style.css.map */
1File scss thì trình duyệt không hiểu được nên bạn phải dùng cách nào đó để chuyển sang file css, có nhiều cách để làm ở đây mình sẽ hướng dẫn các bạn dùng phần mềm Koala hoàn toàn miễn phí để biên dịch nó. 1. Cài đặt Koala để biên dịch scss <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sass_P1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>Hello <span>World!</span></h2>
</body>
</html>
Mình đã có bài hướng dẫn các bạn có thể xem cách cài đặt tại đây 2. Sử dụng Koala
Đầu tiên để giúp các bạn dễ theo dõi mình sẽ tạo 1 folder Sass_P1 ở ngay desktop, bên trong sẽ có các folder css, images và file index.html như hình bên dưới - Bên trong folder css ta sẽ tạo ra 1 file tên là
h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue;
}
h2 span {
color: green;
}
/*# sourceMappingURL=style.css.map */
2 - Code file
h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue;
}
h2 span {
color: green;
}
/*# sourceMappingURL=style.css.map */
3 - Ta thấy trong
h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue;
}
h2 span {
color: green;
}
/*# sourceMappingURL=style.css.map */
3 thì link tới file h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue;
}
h2 span {
color: green;
}
/*# sourceMappingURL=style.css.map */
5 mà trong khi file đó ta chưa hề tạo. Bây giờ chúng ta nên nhớ là viết code css trong file h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue;
}
h2 span {
color: green;
}
/*# sourceMappingURL=style.css.map */
2 sau đó dùng phần mềm Koala biên dịch nó ra file css nhé. - Mở phần mềm Koala nên, click vào dấu + và tìm đến desktop » Sass_P1 » css
Sau khi tìm đến folder css, Koala sẽ tự động tìm thấy file h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue;
}
h2 span {
color: green;
}
/*# sourceMappingURL=style.css.map */
2, bạn click chuột vào file đó sẽ hiện ra giao diện như thế này Auto Compile: tự động biên dịch mỗi khi ta nhấn Ctrl + S h2 {
text-align: center;
box-shadow: 0 0 5px blue;
span {
color: green;
}
}
Source Map: tạo ra 1 file style.css.map (file này giúp chúng ta debug tìm được code scss)h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue; }
h2 span {
color: green; }
/*# sourceMappingURL=style.css.map */
Autoprefix: thêm các prefix cho các thuộc tính css3h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue;
}
h2 span {
color: green;
}
/*# sourceMappingURL=style.css.map */
Mặc định file css được biên dịch sẽ nằm ngay cạnh file scssh2 { text-align: center; -webkit-box-shadow: 0 0 5px blue; box-shadow: 0 0 5px blue; }
h2 span { color: green; }
/*# sourceMappingURL=style.css.map */
3. Output styleh2{text-align:center;-webkit-box-shadow:0 0 5px blue;box-shadow:0 0 5px blue}h2 span{color:green}
/*# sourceMappingURL=style.css.map */
Có 4 kiểu định dạng khi xuất ra file css, để hiểu rõ output như nào thì ta viết code scss rồi xem nhé3-1. Kiểu nested 3-2. Kiểu expanded <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
3-3. Kiểu compact ul.menu {
list-style: none;
}
ul.menu li {
float: left;
}
ul.menu li a {
color: #696969;
}
3-4. Kiểu compressed ul.menu {
list-style: none;
li {
float: left;
a {
color: #696969;
}
}
}
4. Nested RulesQuy tắc này cho phép viết các CSS lồng vào nhau. Khi biên dịch, Sass sẽ cho ra tập tin CSS với đầy đủ các selector theo đúng chuẩn. Kiểu viết này giống với kiểu phân cấp trong HTML <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sass_P1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>Hello <span>World!</span></h2>
</body>
</html>
0Ta có HTML như sauĐây là cách viết CSS thông thường mà mình hay viết <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sass_P1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>Hello <span>World!</span></h2>
</body>
</html>
1Còn đây là cách viết theo kiểu Nested Rules <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sass_P1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>Hello <span>World!</span></h2>
</body>
</html>
25. Referencing Parent SelectorsSử dụng kí hiệu h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue;
}
h2 span {
color: green;
}
/*# sourceMappingURL=style.css.map */
8 đứng trước hiệu ứng, trạng thái mà chúng ta muốn. Ví dụ ta muốn khi hover vào thẻ a thì có gạch chân và đổi màu chữ<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sass_P1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>Hello <span>World!</span></h2>
</body>
</html>
36. Nested PropertiesKiểu viết này sẽ gom các thuộc tính có cùng namespaces giống nhau, ví dụ như margin-left, margin-right, margin-top, margin-bottom... <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sass_P1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>Hello <span>World!</span></h2>
</body>
</html>
4Còn đây là lúc khi đã Compile ra file CSS 7. Variables <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sass_P1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>Hello <span>World!</span></h2>
</body>
</html>
5Giống với các ngôn ngữ lập trình ta khai báo biến để lưu trữ một giá trị được sử dụng nhiều lần. Để khai báo một biến ta sử dụng kí tự h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue;
}
h2 span {
color: green;
}
/*# sourceMappingURL=style.css.map */
9 đằng trước tên biến8. Global Variables - Ở ví dụ trên nếu ta khai báo biến
h2 { text-align: center; -webkit-box-shadow: 0 0 5px blue; box-shadow: 0 0 5px blue; }
h2 span { color: green; }
/*# sourceMappingURL=style.css.map */
0 ở bên ngoài không nằm trong bất kì bộ chọn nào thì ở chỗ nào ta cũng có thể gọi được đến biến đó. Nhưng nếu bạn khai báo biến ở bên trong 1 bộ chọn thì phạm vi của biến sẽ chỉ nằm trong bộ chọn đấy. - Ở ví dụ trên biến
h2 { text-align: center; -webkit-box-shadow: 0 0 5px blue; box-shadow: 0 0 5px blue; }
h2 span { color: green; }
/*# sourceMappingURL=style.css.map */
0 được khai báo bên trong h2 nên thẻ span có thế sử dụng được nhưng h3 thì không. - Để h3 sử dụng được biến trên thì ta thêm
h2 { text-align: center; -webkit-box-shadow: 0 0 5px blue; box-shadow: 0 0 5px blue; }
h2 span { color: green; }
/*# sourceMappingURL=style.css.map */
2 - 9. Data Types
- Sass hỗ trợ 8 kiểu dữ liệu khác nhau:
- Numbers:
h2 { text-align: center; -webkit-box-shadow: 0 0 5px blue; box-shadow: 0 0 5px blue; }
h2 span { color: green; }
/*# sourceMappingURL=style.css.map */
3 - Strings of text, có hoặc không có dấu nháy:
h2 { text-align: center; -webkit-box-shadow: 0 0 5px blue; box-shadow: 0 0 5px blue; }
h2 span { color: green; }
/*# sourceMappingURL=style.css.map */
4 - Colors:
h2 { text-align: center; -webkit-box-shadow: 0 0 5px blue; box-shadow: 0 0 5px blue; }
h2 span { color: green; }
/*# sourceMappingURL=style.css.map */
5
Booleans: h2 { text-align: center; -webkit-box-shadow: 0 0 5px blue; box-shadow: 0 0 5px blue; }
h2 span { color: green; }
/*# sourceMappingURL=style.css.map */
6Sass hỗ trợ các kiểu toán tử so sánh, tính toán cộng, trừ, nhân, chia, lấy dư. Ngoài ra còn dùng được khi nối chuỗi. 10-1. Number OperationsCác kiểu hỗ trợ tính toán so sánh áp dụng với Data Types là Number. Xem ví dụ dưới đây để hiểu cách làm việc của Sass (lưu ý đặc biệt giữa kí hiệu slash h2{text-align:center;-webkit-box-shadow:0 0 5px blue;box-shadow:0 0 5px blue}h2 span{color:green}
/*# sourceMappingURL=style.css.map */
0 và phép chia h2{text-align:center;-webkit-box-shadow:0 0 5px blue;box-shadow:0 0 5px blue}h2 span{color:green}
/*# sourceMappingURL=style.css.map */
0) <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sass_P1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>Hello <span>World!</span></h2>
</body>
</html>
610-2. Color OperationsSass hỗ trợ việc tính toán các giá trị màu sắc lần lượt dựa trên 3 màu chính red, green, blue <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sass_P1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>Hello <span>World!</span></h2>
</body>
</html>
7- Với ex1: 01 + 04 = 05, 02 + 05 = 07, 03 + 06 = 09
- Với ex2: 01 * 2 = 02, 02 * 2 = 04, 03 * 2 = 06
- Với ex3: cộng giá trị tương ứng với mỗi phần tử
10-3. String OperationsNối chuỗi lại với nhau sử dụng dấu h2{text-align:center;-webkit-box-shadow:0 0 5px blue;box-shadow:0 0 5px blue}h2 span{color:green}
/*# sourceMappingURL=style.css.map */
2, lưu ý chỉ áp dụng với Data Types là String<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sass_P1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>Hello <span>World!</span></h2>
</body>
</html>
810-4. InterpolationSử dụng để lấy giá trị của một biến gán vào bộ chọn selector hoặc tên của thuộc tính sử dụng kí tự h2{text-align:center;-webkit-box-shadow:0 0 5px blue;box-shadow:0 0 5px blue}h2 span{color:green}
/*# sourceMappingURL=style.css.map */
3<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sass_P1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>Hello <span>World!</span></h2>
</body>
</html>
911. Import & PartialTrong thực tế khi code scss ta thường chia nhỏ ra các file đảm nhiệm các chức năng khác nhau như h2{text-align:center;-webkit-box-shadow:0 0 5px blue;box-shadow:0 0 5px blue}h2 span{color:green}
/*# sourceMappingURL=style.css.map */
4 hayh2{text-align:center;-webkit-box-shadow:0 0 5px blue;box-shadow:0 0 5px blue}h2 span{color:green}
/*# sourceMappingURL=style.css.map */
5 rồi dùng từ khóa h2{text-align:center;-webkit-box-shadow:0 0 5px blue;box-shadow:0 0 5px blue}h2 span{color:green}
/*# sourceMappingURL=style.css.map */
6 để gọi vào.h2 {
text-align: center;
box-shadow: 0 0 5px blue;
span {
color: green;
}
}
0h2 {
text-align: center;
box-shadow: 0 0 5px blue;
span {
color: green;
}
}
1File h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue;
}
h2 span {
color: green;
}
/*# sourceMappingURL=style.css.map */
2 để import 2 file ở trên ta viết code như sauh2 {
text-align: center;
box-shadow: 0 0 5px blue;
span {
color: green;
}
}
2Lưu ý - 3 file ở trên nằm cùng cấp ngang hàng với nhau
- Khi import việc ghi cả đuôi file scss là không cần thiết
- Ta thấy 2 file
h2{text-align:center;-webkit-box-shadow:0 0 5px blue;box-shadow:0 0 5px blue}h2 span{color:green}
/*# sourceMappingURL=style.css.map */
4 và h2{text-align:center;-webkit-box-shadow:0 0 5px blue;box-shadow:0 0 5px blue}h2 span{color:green}
/*# sourceMappingURL=style.css.map */
5 có gạch dưới ở phía trước, đó là cách dùng của Partial, điều này có nghĩa SASS sẽ không biên dịch các file đó ra file css
12. MediaCách viết <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
0 tương tự như viết của CSS, thường dùng khi responsive websiteh2 {
text-align: center;
box-shadow: 0 0 5px blue;
span {
color: green;
}
}
313. ExtendKế thừa các thuộc tính của một selector khác. Sử dụng từ khóa <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
1h2 {
text-align: center;
box-shadow: 0 0 5px blue;
span {
color: green;
}
}
4Kết quả h2 {
text-align: center;
box-shadow: 0 0 5px blue;
span {
color: green;
}
}
5Vùng chọn <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
2 sẽ chỉ kế thừa các thuộc tính mà không compile. h2 {
text-align: center;
box-shadow: 0 0 5px blue;
span {
color: green;
}
}
6Kết quả h2 {
text-align: center;
box-shadow: 0 0 5px blue;
span {
color: green;
}
}
7 h2 {
text-align: center;
box-shadow: 0 0 5px blue;
span {
color: green;
}
}
6h2 {
text-align: center;
box-shadow: 0 0 5px blue;
span {
color: green;
}
}
814. ifKiểm tra một câu lệnh điều kiện và trả về một giá trị tương ứng h2 {
text-align: center;
box-shadow: 0 0 5px blue;
span {
color: green;
}
}
915. forSử dụng vòng lặp <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
3 cho các trường hợp biết trước số lần lặp lại khối lệnh.h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue; }
h2 span {
color: green; }
/*# sourceMappingURL=style.css.map */
016. eachVòng lặp <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
4 dùng để lặp dữ liệu trong list hoặc map. Lưu ý trong SASS không có kiểu dữ liệu là mảng nhé17. while h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue; }
h2 span {
color: green; }
/*# sourceMappingURL=style.css.map */
118. Mixin không tham số Mixin cho phép bạn định nghĩa các thuộc tính CSS lại với nhau, về cơ bản nó mạnh hơn so với việc dùng biến chỉ lưu được một giá trị, cũng giống với extend kế thừa các thuộc tính nhưng mixin còn hỗ trợ thêm cả tham số không khác gì một function. h2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue; }
h2 span {
color: green; }
/*# sourceMappingURL=style.css.map */
2Sử dụng <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
7 để sử dụng19. Mixin có tham số Sử dụng <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
8 để khai báo mixinh2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue; }
h2 span {
color: green; }
/*# sourceMappingURL=style.css.map */
3Sử dụng ul.menu {
list-style: none;
}
ul.menu li {
float: left;
}
ul.menu li a {
color: #696969;
}
0 để sử dụngh2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue; }
h2 span {
color: green; }
/*# sourceMappingURL=style.css.map */
420. Mixin có tham số giá trị mặc địnhSử dụng mixin với tham số mặc định 19. Mixin có tham số Sử dụng <ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
8 để khai báo mixinh2 {
text-align: center;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue; }
h2 span {
color: green; }
/*# sourceMappingURL=style.css.map */
5Lưu ý - 3 file ở trên nằm cùng cấp ngang hàng với nhau
- Khi import việc ghi cả đuôi file scss là không cần thiết
- Ta thấy 2 file
h2{text-align:center;-webkit-box-shadow:0 0 5px blue;box-shadow:0 0 5px blue}h2 span{color:green}
/*# sourceMappingURL=style.css.map */
4 và h2{text-align:center;-webkit-box-shadow:0 0 5px blue;box-shadow:0 0 5px blue}h2 span{color:green}
/*# sourceMappingURL=style.css.map */
5 có gạch dưới ở phía trước, đó là cách dùng của Partial, điều này có nghĩa SASS sẽ không biên dịch các file đó ra file css
- 12. Media
|