Hướng dẫn cú pháp scss
Cú pháp viết SCSS
Ví dụ về SCSS syntax
Hướng dẫn học SCSS, nội dung bài học đơn giản, khoa học giúp bạn cài đặt, tự động thực thi file CSS chỉ với thao tác save, giúp bạn làm quen với các nội dung của SCSS một cách nhanh chóng và dễ hiểu nhất.
Bắt đầu học SCSS thôi Khi viết code Sass với cú pháp SCSS hãy bắt đấu viết những gì mong muốn như từng viết CSS, trong quá trình đó ta sẽ tìm hiểu những tính năng mở rộng áp dụng vào các khối code Các biến trong SCSSCú pháp khai báo biến: $tenbien: giatri; Biến khai báo bắt đầu bằng ký hiệu dollar ( $red: #dd0000; Sử dụng biến Khi nào muốn sử dụng giá trị của biến, trong code SCSS chỉ việc gọi lại tên biến, tại vị trí gọi đó tên biến sẽ thay thế bởi giá trị của biến. Ví dụ: $red: #dd0000;
.box {
color: $red; //Gán thuộc tính bằng giá trị từ biến $red
border: 1px solid $red; //Gán thuộc tính bằng giá trị từ biến $red
}Kết quả CSS sinh ra .box {
color: #dd0000;
border: 1px solid #dd0000; }
Khi sử dụng biến để viết SCSS, chúng ta có thể nhanh chóng thay đổi thuộc tính của rất nhiều phần tử CSS có sử dụng đến giá trị biến Nguyên lý lồng nhau trong SCSS (Nesting)Như đã biết trong Ví dụ // CSS
ul.nav {
list-style: none;
}
ul.nav li {
padding: 10px;
}
// SCSS
ul.nav {
list-style: none;
li {
padding: 10px;
}
}
Phần tử con cấp 1 của phần tử cha, ký hiệu & Ký hiệu // SCSS
ul {
padding: 20px;
&.title {
color: red;
}
}// CSS
ul {
padding: 20px; }
ul.title {
color: red; }
// SCSS
ul {
padding: 20px;
&.title {
color: red;
&.titlesmall {
font-size: 60%;
}
}
}
// CSS
ul {
padding: 20px;}
ul.title {
color: red; }
ul.title.titlesmall {
font-size: 60%; }
Ký hiệu & áp dụng tương tự cho Như đã biết các Trong // SCSS
a {
text-decoration: none;
&:hover, &:active {
text-decoration: underline;
}
}// CSS
a {
text-decoration: none; }
a:hover, a:active {
text-decoration: underline; }
Một cách áp dụng lựa chọn phần tử cha & nữa như sau: bổ xung thêm tính chất cho loại phần tử cha lồng vào trong phần tử con // SCSS
.article h2 {
background-color: #FFAFA5;
.home & {
background-color: #BBFCA2;
}
.about {
background-color: #A0ADF1;
}
}// CSS
.article h2 {
background-color: #FFAFA5; }
.home .article h2 {
background-color: #BBFCA2; }
.article h2 .about {
background-color: #A0ADF1; }
Một cách tiện lợi nữa đó là ký hiệu phần tử cha // SCSS
.footer {
background: #b87474;
&-middle {
background: #ca2020;
}
&-small {
background: #3d3838;
}
}// CSS
.footer {
background: #b87474; }
.footer-middle {
background: #b87474; }
.footer-small {
background: #b87474; }
Lồng nhau về thuộc tính CSSNguyên lý lồng nhau ở trên cũng áp dụng cho nhiều thuộc tính có cùng tiền tố, trong CSS có rất nhiều thuộc tính mà tiền tố giống nhau ví dụ vài tiền tố như:
Với các thuộc tính này có thể viết trong // SCSS
.box {
border: {
color: black;
width: 2px;
radius:5px;
}
}// CSS
.box {
border-color: black;
border-width: 2px;
border-radius: 5px; }
Sử dụng lại mã SCSS với @extendTrong SCSS có một phần tử lớp là // SCSS
.box {
border: 1px solid red;
background: silver;
}
.quote {
@extend .box;
color: yellow;
}// CSS
.box, .quote {
border: 1px solid red;
background: silver; }
.quote {
color: yellow; }
Giữ chỗ placeholder và sử dụng lại với @extendỞ ví dụ trên có sử dụng lại thuộc tính khai báo trong phần tử lớp // SCSS
%box {
border: 1px solid red;
background: silver;
}
.quote {
@extend %box;
color: yellow;
}// CSS
.quote {
border: 1px solid red;
background: silver; }
.quote {
color: yellow; }
Mã |
