Đó là thời gian để chuyển sang bài tập tiếp theo, được gọi là Tập thể dục: Less.
Một cái gì đó mà bạn muốn bác sĩ của bạn
sẽ cho bạn biết khi bạn đến thăm anh ta hoặc cô ấy trong lần tiếp theo.
Tuy nhiên, chúng ta hãy xem xét ít chi tiết hơn bây giờ để hiểu làm thế nào chúng ta có thể định nghĩa
các lớp CSS bằng cách sử dụng cú pháp preprocessor ít hơn và sau đó
tự động tạo ra các lớp CSS tương ứng từ các lớp ít hơn của chúng tôi.
Để bắt đầu, chúng ta hãy đi đến
dự án của chúng tôi trong Text Editor và sau đó bên trong thư mục CSS,
tôi sẽ đổi tên tệp styles.css này là styles-old.css.
Tôi sẽ lưu phiên bản hiện tại của tôi của
tập tin styles.css bởi vì bây giờ họ sẽ viết ít mã
và mã SCSS và sau đó tự động tạo ra các
tập tin styles.css bằng cách biên dịch các ngôn ngữ preprocessor CSS.
Sau khi thực hiện việc này, sau đó trong thư mục CSS của tôi,
chúng tôi sẽ tạo ra một tập tin mới có tên styles.less.
Và bên trong đây, tôi sẽ xác định mã của tôi ít hơn.
Trước tiên hãy xác định một số biến ít hơn.
Tôi sẽ nói, lt-gray: ddd và vân vân.
Bạn có thể thấy rằng tôi đã thêm vào một vài biến ít hơn ở đây.
Vì vậy, tôi định nghĩa bóng tối nền là giá trị đầu tiên,
ánh sáng nền và nền nhợt nhạt và cũng
có một biến khác được gọi là carousel-item-height là 300 pixel.
Tôi sẽ làm cho việc sử dụng các biến này khi tôi xác định các lớp CSS của tôi sau này.
Bây giờ hãy để tôi thêm vào một Mixin cho
tập tin ít hơn của tôi gọi là zero-margin và tôi sẽ xác định
pad-up-dn và pad-trái phải,
0px là giá trị mặc định và sau đó ở đây,
tôi đặt margin: 0px auto,
padding: pat-up-dn
và pad-trái phải.
Vì vậy, với điều này, tôi đã định nghĩa Mixin rằng tôi sẽ
làm cho sử dụng trong các lớp CSS của tôi mà chúng tôi sẽ xác định sau này.
Và điều này mang hai thông số pad-up-dn và pad-trái-phải.
Tiếp theo, tôi sẽ thêm vào một vài lớp CSS, vì vậy tôi bắt đầu với
hàng tiêu đề và xác định điều này như là zero-margin.
Hãy để tôi thêm vào một vài lớp CSS nữa và sau đó trở lại để có một cái nhìn vào chúng.
Ở đây, tôi đã xác định được một lớp CSS
bằng cách sử dụng các zero margin Mixin với các tham số 50 pixel và 0 pixel,
một chân trang nơi tôi xác định màu nền bằng cách sử dụng
các biến đã định nghĩa trước đó là
background-pale và sau đó jumbotron với
zero-margin Mixin và màu nền được định nghĩa là nền ánh sáng,
và một số trong những người khác đó là các lớp CSS tiêu chuẩn,
mà tôi đã bao gồm có bởi vì tôi sẽ sử dụng chúng trong
trang web của tôi và sau đó bạn có
navbar-tối mà màu nền tôi đã xác định chúng ta background tối.
Và các tab nội dung mà một lần nữa bạn thấy tôi
sử dụng màu xám nhạt biến cho màu biên giới ở đây.
Tiếp theo, tôi thêm vào lớp carousel ở đây mà tôi xác
định nền là nền tối ở đây và sau đó,
tôi xác định rằng carousel-item.
Lưu ý, làm thế nào tôi định nghĩa rằng như là một mục lồng nhau bên trong băng chuyền của tôi và cho băng chuyền mục,
tôi xác định chiều cao như băng chuyền mục chiều cao ở đây,
đó là một biến mà tôi xác định trước đó và bên trong đó,
tôi xác định hình ảnh,
mà là một lần nữa một mục lồng nhau bên trong băng chuyền mục và sau đó cho hình ảnh,
tôi sẽ xác định một số thuộc tính CSS tiếp theo.
Như bạn có thể thấy,
tôi đã xác định một số thuộc tính cho hình ảnh.
Ở đây, bạn thấy việc sử dụng các lớp lồng nhau ở đây,
vì vậy bạn có carousel và bên trong mà tôi có một carousel-item và bên trong đó,
một hình ảnh được xác định ở đây.
Cuối cùng ở dưới cùng,
tôi thêm vào lớp CarouselButton,
được sử dụng để chỉ định CarouselButton.
Với những thay đổi này để tập tin styles.less của tôi thêm vào tất cả các lớp học ít hơn ở đây,
hãy để tôi lưu các thay đổi.
Bây giờ, tôi muốn có thể tự động chuyển đổi này vào tập tin CSS tương ứng của họ.
Để tự động chuyển đổi tập tin ít hơn của tôi vào tập tin CSS tương ứng của nó,
tôi sẽ làm cho việc sử dụng một mô-đun nút gọi là ít hơn.
Để cài đặt điều đó tại dấu nhắc,
tôi gõ sudo npm cài đặt trừ g ít hơn.
Tôi cài đặt này như là một mô-đun nút toàn cầu.
Và một khi đã được cài đặt,
sau đó nó sẽ làm cho có sẵn một trình biên dịch ít được gọi là lessc tại dấu nhắc lệnh.
Nếu bạn đang chạy điều này trên một máy Windows,
bạn không cần phải làm sudo,
như bạn có thể đã nhớ lại.
Bây giờ chúng tôi đã cài đặt trình biên dịch lessc,
tôi sẽ biên dịch mã ít hơn của tôi vào mã CSS tương ứng của nó.
Để làm điều đó, hãy để tôi đi vào thư mục CSS và sau đó ở đây,
bạn sẽ thấy rằng bạn có các tập tin styles.less.
Tại dấu nhắc, gõ lessc styles.less styles.css,
và một khi hoàn thành việc biên dịch,
bạn sẽ có tệp CSS tương ứng.
Vì vậy, như bạn thấy bây giờ,
bạn có mã ít hơn được chuyển đổi thành mã CSS tương ứng.
Lấy một cái nhìn vào mã CSS được tạo ra từ mã ít hơn,
bạn sẽ thấy rằng mã này trông khá
giống như những gì chúng tôi định nghĩa trong tập tin CSS ban đầu của chúng tôi.
Với điều này, chúng tôi hoàn thành bài tập này.
Trong bài tập này, chúng ta đã học cách viết
ít mã hơn và sau đó tự động chuyển đổi mã đó thành mã CSS tương ứng.
Tại thời điểm này, bạn có thể muốn lưu các thay
đổi vào kho lưu trữ Git của bạn với thông điệp Tập thể dục: Less.