Hãy đăng ký tài khoản để xem được thêm nhiều thứ nữa...
Xem hướng dẫn đăng ký tài khoản tại đây
THÔNG BÁO: Chức năng gửi email của hệ thống đã hoạt động trở lại, ai bị quên mật khẩu thì có thể sử dụng chức năng I forgot my password ở giao diện đăng nhập để nhận mật khẩu mới.

SASS - Công nghệ viết CSS đơn giản thân thiện

User avatar
Administrator
Site Admin
Posts: 420
Joined: 17/08/2018 16:55:42
Họ và tên: Sao Phải Xoắn

SASS - Công nghệ viết CSS đơn giản thân thiện


Tại sao nên dùng SASS?
Vì nó giúp người lập trình viết code css có cấu trúc phân cấp và có thể sử dụng biến, biểu thức trong css... và người lập trình đỡ tốn công viết đi viết lại nhiều tên selector khi muốn chỉ định lồng ghép các selector... và có một số thứ khác nữa để dành bạn đọc tìm hiểu.

Viết SASS cần gì?
- Cần có kiến thức về CSS
- Cần có công cụ phục vụ compile ra file css thường. Công cụ cài đặt tại đây: http://sass-lang.com/install, tôi thì dùng cái Koala vì opensource, nhưng khi cài đặt nó sinh ra khá nhiều đầu file (mà nhiều đầu file là tớ không thích rồi, vì ssd nó còn đang hạn chế số lần đọc ghi file :) )
- Cần đọc tài liệu tiếng Chị http://sass-lang.com/guide để xem họ hướng dẫn cách viết code.

Giờ bắt tay vào làm demo nhé:

1. Tạo thư mục chứa code demo, trong thư mục này chứa 2 file: vd.html và vd.scss (cứ tạo 2 file vậy đã, file .scss là file code của SASS )
2. Mở phần mềm soạn thảo code (cái nào cũng được, notepad hoặc ++ hoặc sublime...) sau đó viết code cho file html demo như sau:
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="vd1.css">
</head>
<body>
<nav>
	 <ul>
 		<li>Item 1</li>
 		<li>Item 2
 			<ul>
 				<li>sub item 1</li>
 				<li>sub item 2</li>
 			</ul>
 		</li>
 	</ul>
</nav> 

</body>
</html>
Nội dung file sass vd.scss như sau:
$font-a: Arial;
$font-time: "Times News Roman";
$cl-blue: blue;
$cl-red: red;
nav {
	width:200px;
	background:#eee;
	ul{
		list-style:none;
		margin:0px;
		padding:0px;
		li{
			font: 100% $font-a;
			color:$cl-blue;
			border:1px solid red;
			position:relative;
			white-space:no-wrap;
			width:200px;
			ul {
				display:none;
			}
			&:hover{
				cursor:pointer;
				ul{
					display:block;
					position:absolute;
					left:100%;
					top:0px;
					li{
						font: 100% $font-time;
						color:$cl-red;
					}
				}
			}
		}
	}
}
Mọi người có thể thấy ở trên các code css được viết lồng ghép các khối với nhau giúp chỉ định rõ ràng cần chọn phần tử html nào, ngoài ra còn khai báo được biến và sử dụng biến như trong PHP...

Cách sử dụng công cụ compile như trong ảnh dưới đây
huong-dan-koala-sass.png
Kết quả sau khi compile ra css nó sẽ thế này:
nav {
  width: 200px;
  background: #eee;
}
nav ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
nav ul li {
  font: 100% Arial;
  color: blue;
  border: 1px solid red;
  position: relative;
  white-space: no-wrap;
  width: 200px;
}
nav ul li ul {
  display: none;
}
nav ul li:hover {
  cursor: pointer;
}
nav ul li:hover ul {
  display: block;
  position: absolute;
  left: 100%;
  top: 0px;
}
nav ul li:hover ul li {
  font: 100% "Times News Roman";
  color: red;
}
Như vậy với cách viết SASS thì sẽ tiện dụng hơn rất nhiều cho người lập trình, tuy nhiên người lập trình vẫn phải biết cách viết CSS, SASS không có nghĩa là thay thế CSS nhé :)

Post 06/11/2018 16:53:35 » by Administrator

:-bd
Chư vị chưa có tài khoản? Đăng ký tại đây nhé http://snvn.net/ucp.php?mode=register
Xem quy định sử dụng ở đây nhé http://snvn.net/viewtopic.php?f=2&t=9&p=12#p12
Post Reply