LESS là gì và cách sử dụng nó. LESS (ngôn ngữ phong cách)

một cái nhìn ít khải huyền hơn về tương lai

quan điểm không quá bi quan về tương lai

Một di sản công bằng cũng dễ chịu không kém một người vợ công bằng.

Một gia tài tốt đẹp cũng không kém phần dễ chịu so với một người vợ xinh đẹp. ☰

Giao thông là một trong những khía cạnh ít dễ chịu hơn của cuộc sống thành phố.

Ùn tắc giao thông là một trong những khía cạnh kém dễ chịu nhất của cuộc sống thành phố. ☰

Đường nét ngày càng trở nên mờ nhạt hơn khi ánh sáng mờ dần.

Những đường nét ngày càng mờ nhạt, trong khi ánh sáng dần mờ đi. ☰

Cộng đồng đang yêu cầu một phong cách trị an ít quyết liệt hơn.

Cộng đồng đang yêu cầu một phong cách thực thi pháp luật ít quyết liệt hơn. ☰

Ăn ít hơn và tập thể dục nhiều hơn nếu bạn muốn sống đến tuổi già.

Ăn ít hơn và tập thể dục nhiều hơn nếu bạn muốn sống đến tuổi già. ☰

Mặt sau của khách sạn thậm chí còn kém hấp dẫn hơn mặt trước.

Nhìn từ phía sau, khách sạn này trông thậm chí còn kém hấp dẫn hơn so với nhìn từ phía trước. ☰

Không kém gì một ngôi sao sáng hơn Wilhelm Furtwangler đã tiến hành buổi ra mắt.

Người chỉ huy buổi ra mắt không ai khác chính là người nổi tiếng Wilhelm Furtwängler. ☰

Hệ thống này đang thất bại thảm hại nhất ở những đứa trẻ có trình độ học vấn thấp hơn.

Hệ thống này hoàn toàn không phù hợp với những đứa trẻ không có hứng thú học tập. ☰

"Bạn vui lòng đi cùng tôi được không?" Đó không phải là một lời yêu cầu mà là một mệnh lệnh.

Vui lòng đi với tôi. - Đó không hẳn là một yêu cầu mà là một mệnh lệnh. ☰

Nhiều năm trôi qua, anh dường như ngày càng ít quan tâm đến danh tiếng của mình.

Theo thời gian, có vẻ như anh ngày càng ít quan tâm đến danh tiếng của chính mình. ☰

Buổi ra mắt có sự tham dự của một nhân vật không kém gì chính tổng thống.

Buổi ra mắt thậm chí còn có sự tham dự của không chỉ bất kỳ ai, mà cả chính tổng thống. ☰

Những người có thể kiểm soát được môi trường xung quanh sẽ cảm thấy bớt lo lắng hơn.

Một người có thể kiểm soát được môi trường của mình sẽ cảm thấy bớt lo lắng hơn. ☰

Những người hướng ngoại có tinh thần phấn chấn hơn và ít lo lắng hơn về các tình huống xã hội.

Những người hòa đồng vui vẻ hơn và ít quan tâm đến các vấn đề xã hội hơn. ☰

Khi cô ấy mất đi vẻ ngoài của mình (=trở nên kém hấp dẫn hơn), cô ấy cảm thấy khó có được việc làm.

Khi cô ấy mất đi vẻ ngoài (tức là trở nên kém hấp dẫn hơn), cô ấy rất khó kiếm được việc làm. ☰

Các cuộc thăm dò cho thấy cử tri ngày càng ít hài lòng với chính quyền hiện tại.

Các cuộc thăm dò cho thấy cử tri ngày càng bất mãn với chính quyền hiện tại. ☰

Tôi không thể không quan tâm đến cô ấy *

Tôi có thể quan tâm ít hơn về cái gì bạn tin. *

Tôi không quan tâm bạn nghĩ gì. ☰

Ít Wain

Ít nước sốt hơn đi cô gái của tôi!

Bớt xấc xược đi cô gái của tôi! ☰

Trong hai cái ác hãy chọn cái ít hơn.

Trong hai cái ác hãy chọn cái ít hơn. (cuối cùng) ☰

Tất cả thịt được bán ít xương.

Tất cả thịt được bán không có xương. ☰

Cô ấy đi bộ ít hơn mức cần thiết.

Nếu chúng ta xem xét các bộ tiền xử lý cùng với CSS, chúng ta sẽ có được một bức tranh rõ ràng hơn so với việc xem xét khái niệm bộ tiền xử lý một cách riêng biệt.

Sự định nghĩa

Bộ tiền xử lý CSS (từ bộ tiền xử lý CSS tiếng Anh) là một tiện ích bổ sung cho CSS giúp bổ sung các khả năng trước đây không có sẵn cho CSS bằng cách sử dụng các cấu trúc cú pháp mới.

Nhiệm vụ chính của bộ tiền xử lý là cung cấp các cấu trúc cú pháp thuận tiện để nhà phát triển đơn giản hóa và từ đó tăng tốc độ phát triển và hỗ trợ các kiểu trong dự án.

Bộ tiền xử lý CSS chuyển đổi mã được viết bằng ngôn ngữ tiền xử lý thành mã CSS sạch và hợp lệ.

Với bộ tiền xử lý, bạn có thể viết mã nhắm mục tiêu:

Khả năng đọc của con người
Có cấu trúc và logic
Hiệu suất

Và đây chỉ là một phần nhỏ những gì bộ tiền xử lý có thể cung cấp cho bạn. Nhưng đừng vượt lên chính mình.

Cú pháp đặc biệt

Trước khi tìm hiểu sâu hơn về các bộ tiền xử lý CSS, hãy cập nhật từ vựng của chúng ta với một khái niệm mới: đường cú pháp.

Đường cú pháp (từ đường cú pháp tiếng Anh) là phần bổ sung cho cú pháp của ngôn ngữ lập trình không đưa ra bất kỳ thay đổi đáng kể hoặc tính năng mới nào nhưng làm cho ngôn ngữ này dễ đọc hơn đối với con người.

Đường cú pháp giới thiệu vào ngôn ngữ lựa chọn thay thế hồ sơ của các công trình được nhúng trong ngôn ngữ này. Các phương án ghi thay thế nên được hiểu là các cấu trúc ngắn hơn hoặc thuận tiện hơn cho con người, cuối cùng sẽ được bộ tiền xử lý chuyển đổi sang ngôn ngữ nguồn mà không cần đường cú pháp.

Nếu chúng ta cố gắng áp dụng khái niệm này cho các bộ tiền xử lý CSS thì nó trường hợp chung, mô tả đầy đủ bản chất của chúng. Hãy để tôi nhắc bạn một lần nữa rằng nhiệm vụ chính của bộ tiền xử lý là đơn giản hóa và tăng tốc độ phát triển, nhưng làm cách nào khác để thực hiện điều này nếu bạn không đưa ra các tùy chọn ghi thay thế?

Có những loại bộ tiền xử lý CSS nào?

Đã đến lúc chuyển sang nhiều hơn nữa ví dụ cụ thể, cụ thể là cho chính các bộ tiền xử lý CSS. Tại thời điểm viết bài, có ba bộ tiền xử lý phổ biến:

Sass (SCSS)
bút cảm ứng

Và một vài người chơi nhỏ cho chúng tôi:

Bảng định kiểu đóng cửa
CSS nghiền nát

Chúng ta sẽ nói riêng về ba cái đầu tiên thấp hơn một chút, nhưng chúng ta sẽ không nói về hai cái cuối cùng do chúng không được ưa chuộng. Nếu muốn, bạn có thể dễ dàng tìm thấy mô tả về các bộ tiền xử lý này trong công cụ tìm kiếm.

Mục đích của việc sử dụng bộ tiền xử lý là gì?

Như tôi đã lưu ý ở trên, ưu điểm chính là khả năng đọc mã, cấu trúc và tăng năng suất.

Ngoài ra còn có những lý do khác để bắt đầu sử dụng bộ tiền xử lý ngay hôm nay. Tôi muốn thu hút sự chú ý về điều này, vì các nhà phát triển trước đây và thậm chí nhiều người hiện nay từ chối sử dụng bộ tiền xử lý vì cho rằng chúng phức tạp, khó hiểu và không cần thiết.

CSS khó

CSS tiêu chuẩn là khó khăn. Cú pháp không lồng nhau mà bộ tiền xử lý CSS cung cấp rất khó đọc. Ngoài ra, bạn cần nhớ tên cha mẹ khi lồng ghép. Việc thiếu các biến và "hàm" thông thường khiến mã CSS trở nên lộn xộn và hạn hẹp.

Tài liệu có sẵn

Đã qua rồi cái thời mà tài liệu từ bộ tiền xử lý chỉ dành cho những người “biết”. Bây giờ bất cứ ai cũng có thể sớm nhất có thể nắm vững bất kỳ bộ tiền xử lý nào và với chi phí tối thiểu sức mạnh

Dễ sử dụng

Sử dụng bộ tiền xử lý dễ dàng hơn trước và dễ dàng hơn nhiều. Để thực hiện việc này, bạn chỉ cần cài đặt một chương trình sẽ giám sát các tệp dành cho bộ tiền xử lý và khi chúng thay đổi, nó sẽ biên dịch nội dung của các tệp này thành mã CSS thuần túy.

Đối với người dùng cao cấp hơn, có những người xây dựng dự án đặc biệt. Đừng nghĩ rằng chỉ vì bạn đang sử dụng chương trình tiền xử lý thay vì trình xây dựng dự án mà bạn chưa đủ ngầu. Trên thực tế, những vòi như vậy cung cấp toàn quyền kiểm soát và cài đặt nâng cao, nhưng không khiến bạn trở thành Jedi.

Cấu trúc mã và tính nhất quán

Tính năng phổ biến nhất được cung cấp bởi bất kỳ bộ tiền xử lý CSS nào là khả năng lồng các bộ chọn vào nhau. Bây giờ tôi sẽ không đưa ra ví dụ vì phần tương ứng của cuốn sách sẽ viết về các khả năng của Less, bao gồm cả việc lồng ghép. Tại thời điểm này, tất cả những gì bạn cần biết là khi sử dụng bộ tiền xử lý, bạn có thể lồng một bộ chọn này vào trong một bộ chọn khác và một bộ chọn khác trong bộ chọn thứ ba, dẫn đến kết quả tương tự như mục lục của một cuốn sách:

1. Bộ chọn cha 1.1. Bộ chọn lồng nhau 1.2. Bộ chọn lồng nhau 1.2.1. Bộ chọn lồng nhau 1.3. Bộ chọn lồng nhau

Tất nhiên, trong đời thực bộ chọn không thể bắt đầu bằng số, tuy nhiên, để vẽ sự song song giữa lồng và mục lục, tôi nghĩ việc bỏ sót như vậy là phù hợp ở đây.

tạp chất

Nói một cách ngắn gọn, bằng cách sử dụng mixins (từ Mixins tiếng Anh), bạn có thể làm cho mã có thể sử dụng lại được. Điều này giúp tránh các lớp trợ giúp trong việc đánh dấu hoặc sao chép các thuộc tính từ bộ chọn này sang bộ chọn khác.

Tính mô đun

Một phần thưởng khác có thể thuyết phục tôi bắt đầu sử dụng bộ tiền xử lý CSS ngay bây giờ là khả năng lồng các tệp trong các tệp, nói cách khác là nối các tệp theo một trình tự nhất định. Đúng, điều này có thể được thực hiện bằng cách sử dụng CSS thuần túy, nhưng kết hợp với các tính năng khác thì nó trở thành một công cụ rất mạnh mẽ.

Đồng thời, chúng tôi có cơ hội chia sẻ các mô-đun (thư viện mixin) mà chúng tôi đã tạo cho nhu cầu của mình và thấy hữu ích cho người khác. Hóa ra bất kỳ nhà phát triển nào cũng có thể tải xuống thư viện của bạn và sử dụng nó cho mục đích riêng của họ, gọi các mixin bạn đã viết nếu cần.

Tại sao không đợi CSS phát triển?

Sự phát triển của CSS đang thực hiện những bước rất nhỏ và không chắc chắn, vì W3C ưu tiên tốc độ phản hồi CSS (hiệu suất). Một mặt, điều này đúng và rất quan trọng nhưng mặt khác lại thiếu thuận tiện cho các nhà phát triển.

Ví dụ: tôi sẽ sử dụng một trong các thông số kỹ thuật CSS4, được giới thiệu dưới áp lực của các nhà phát triển - bộ chọn chính. Một chặng đường dài từ ý tưởng đến quyết định là do W3C coi bộ chọn như vậy là chậm và việc sử dụng thêm nó trên các trang web sẽ dẫn đến tình trạng chậm đột ngột. Tất nhiên, chúng ta đang nói về việc sử dụng rộng rãi bộ chọn này chứ không phải về các trường hợp cá biệt.

Vì vậy, đừng mong đợi những cuộc cách mạng và thay đổi trong tương lai gần có thể làm lu mờ chức năng và khả năng của bộ tiền xử lý CSS.

Các loại tiền xử lý

Tất nhiên, như trong bất kỳ lĩnh vực nào khác, luôn có sự cạnh tranh và trong thị trường tiền xử lý hiện có ba phe xung đột chính:

Sass (SCSS)
bút cảm ứng

Tôi gọi chúng là thù địch, bởi vì mỗi tín đồ của một trong những bộ tiền xử lý coi nhiệm vụ của mình là ném những thứ tạp chất vào những người đại diện của những tín ngưỡng khác, chẳng hạn như. Sự thù địch này đặc biệt phổ biến trong số những người hâm mộ bộ tiền xử lý Sass, được coi là bộ tiền xử lý lâu đời nhất và mạnh nhất trong cả ba bộ tiền xử lý.

Để hoàn thiện, tôi muốn cung cấp một cái nhìn tổng quan ngắn gọn về từng bộ tiền xử lý:

Ít hơn

Trên thực tế, anh hùng của cuốn sách này. Bộ tiền xử lý phổ biến nhất tại thời điểm viết bài. Được thành lập vào năm 2009 bởi Alexis Sellier và được viết bằng JavaScript (ban đầu được viết bằng Ruby, nhưng Alexis đã có bước đi đúng đắn vào đúng thời điểm). Có mọi thứ khả năng cơ bản bộ tiền xử lý và thậm chí nhiều hơn thế nữa, nhưng không có cấu trúc và vòng lặp có điều kiện theo nghĩa thông thường đối với chúng ta. Ưu điểm chính là tính đơn giản, gần như tiêu chuẩn cho Cú pháp CSS và khả năng mở rộng chức năng thông qua hệ thống plugin.

Sass (SCSS)

Bộ tiền xử lý CSS mạnh mẽ nhất. Có cộng đồng nhà phát triển khá lớn. Được thành lập vào năm 2007 dưới dạng mô-đun cho HAML và được viết bằng Ruby (có cổng sang C++). Nó có phạm vi khả năng lớn hơn nhiều so với Less. Bản thân khả năng của bộ tiền xử lý được mở rộng nhờ thư viện La bàn đa chức năng, cho phép bạn vượt xa Khung CSS và làm việc, chẳng hạn như với các họa tiết ở chế độ tự động.

Có hai cú pháp:

Sass (Bảng định kiểu tuyệt vời về mặt cú pháp) là một cú pháp CSS đơn giản dựa trên nhận dạng. Được coi là lỗi thời.
SCSS (Sassy CSS) - dựa trên cú pháp CSS tiêu chuẩn.

bút cảm ứng

Bộ tiền xử lý CSS trẻ nhất nhưng đồng thời hứa hẹn nhất. Được thành lập vào năm 2010 bởi một nhân vật nổi tiếng trong giới của chúng tôi, TJ Holowaychuk. Họ nói rằng đây là bộ tiền xử lý thuận tiện và có khả năng mở rộng nhất, đồng thời nó cũng linh hoạt hơn Sass. Được viết bằng JavaScript. Hỗ trợ rất nhiều tùy chọn cú pháp từ giống CSS đến đơn giản hóa (thiếu: , ; , () và một số dấu ngoặc đơn).

CSS - đơn giản và công cụ có thể truy cập. Tuy nhiên, nó có những hạn chế, đặc biệt là khi nói đến việc duy trì mã hoàn chỉnh. Khi bạn cần sửa đổi hàng nghìn dòng kiểu trải rộng trên nhiều tệp, nhiệm vụ sẽ trở thành một thách thức.

Để khắc phục vấn đề này, các bộ tiền xử lý CSS đã được tạo ra để cho phép bạn kết hợp các kiểu một cách linh hoạt. Có một số tùy chọn (chẳng hạn như LESS và SASS), nhưng trong bài học này chúng ta sẽ xem xét LESS.

ÍT Biên tập viên

Tại thời điểm viết hướng dẫn này, chỉ có một trình soạn thảo hoàn toàn chuyên làm việc với các tệp LESS - ChrunchApp. Ứng dụng nàyđa nền tảng, được xây dựng trên Adobe Air, nó có thể chạy trên Windows, Mac OSX và Linux.

Đối với các trình soạn thảo khác (chẳng hạn như Dreamweaver, Coda, NotePad++ và SublimeText 2), có các plugin hoặc tiện ích bổ sung cho phép bạn cung cấp đánh dấu cú pháp LESS.

Sử dụng ÍT

LESS rất dễ sử dụng. Bạn chỉ cần thêm hai dòng vào thẻ đầu tài liệu HTML của bạn. Dòng đầu tiên chứa tên tệp .less của bạn và dòng thứ hai chứa kết nối của thư viện less.js (có thể tải xuống từ trang web chính thức).

Trong bài học của chúng tôi, chúng tôi sẽ chỉ ra một cách khác. Chúng tôi sẽ sử dụng trình biên dịch LESS: đối với Windows, chúng tôi có thể sử dụng WinLess và đối với Mac OSX, chúng tôi có thể sử dụng LESS.app.

Tạo một tệp .less trong thư mục làm việc. Sau đó mở trình biên dịch (WinLESS hoặc LESS.app) và nhập thư mục làm việc vào đó. trình biên dịch sẽ tìm thấy tất cả các tệp .less. Đó là tất cả. Bây giờ, bất cứ khi nào chúng ta thay đổi tệp .less, trình biên dịch sẽ tự động tạo mã CSS thông thường thành tệp .css được trình duyệt chấp nhận.

Tất cả những gì còn lại là buộc tập tin CSS vào tài liệu HTML:

Cú pháp LES

Không giống như CSS thông thường, LESS giống một ngôn ngữ lập trình hơn. Nó có tính động, do đó, thật hợp lý khi mong đợi nó sử dụng các biến, phép toán và phạm vi.

Biến

Trước tiên hãy xem xét các biến.

Khi làm việc với CSS, bạn có thể thường gặp phải tình huống trong đó một giá trị lặp lại được đặt thành nhiều khối trong một biểu định kiểu.

Class1 ( màu nền: #2d5e8b; ) .class2 ( màu nền: #fff; màu: #2d5e8b; ) .class3 ( viền: 1px Solid #2d5e8b; )

Mọi thứ đều tuyệt vời cho đến khi bạn phải sàng lọc 1000 phần mã giống hệt nhau trong toàn bộ biểu định kiểu để thay đổi giá trị. Tình huống này có thể phát sinh khi làm việc trên một dự án lớn.

Khi sử dụng bộ tiền xử lý LESS, vấn đề này có thể được giải quyết dễ dàng bằng cách sử dụng các biến. Các biến cho phép bạn lưu trữ các giá trị có thể được sử dụng lại trong biểu định kiểu.

@color-base: #2d5e8b; .class1 ( màu nền: @color-base; ) .class2 ( màu nền: #fff; color: @color-base; ) .class3 ( border: 1px Solid @color-base; )

Trong ví dụ trên, biến @color-base lưu giá trị #2d5e8b . Và khi cần thay đổi màu sắc, bạn sẽ chỉ cần thay đổi giá trị trong biến.

Bạn có thể sử dụng các giá trị khác trong biến:

@font-family: Georgia @dot-border: chấm @transition: tuyến tính @opacity: 0,5

Phụ gia

Trong LESS, bạn có thể sử dụng mixin để lưu trữ một bộ quy tắc và áp dụng chúng cho các bộ khác. Ví dụ:

Độ dốc ( nền: #eaeaea; nền: gradient tuyến tính(top, #eaeaea, #cccccc); nền: -o-Tuyến-gradient(top, #eaeaea, #cccccc); nền: -ms-Tuyến-gradient(top , #eaeaea, #cccccc); nền: -moz-tuyến tính-gradient(top, #eaeaea, #cccccc); nền: -webkit-tuyến tính-gradient(top, #eaeaea, #cccccc);

Trong ví dụ trên, chúng ta đang thiết lập màu gradient trong lớp .gradients. Sau đó, khi cần thêm gradient bạn chỉ cần chèn .gradients như thế này:

Hộp ( .gradients; đường viền: 1px liền khối #555; bán kính đường viền: 3px; )

Lớp .box kế thừa tất cả các khai báo từ .gradients . Do đó, biểu thức LESS ở trên tương đương với mã CSS thông thường sau:

Hộp ( nền: #eaeaea; nền: gradient-tuyến tính(trên cùng, #eaeaea, #cccccc); nền: -o-tuyến-gradient(trên cùng, #eaeaea, #cccccc); nền: -ms-tuyến tính-gradient(top , #eaeaea, #cccccc); nền: -moz-tuyến tính-gradient (trên cùng, #eaeaea, #cccccc); nền: -webkit-tuyến tính-gradient (trên cùng, #eaeaea, #cccccc); )

Khi làm việc với CSS3, bạn có thể sử dụng thư viện LESS ELements để công việc của bạn dễ dàng hơn. LESS Elements là một tập hợp các mixin CSS3 phổ biến thường được sử dụng trong tạo kiểu, chẳng hạn như bán kính đường viền, độ dốc, bóng đổ, v.v.

Để sử dụng LESS bạn chỉ cần thêm quy tắc @import vào file LESS. Bạn chỉ cần tải thư viện về và đặt nó vào thư mục làm việc của mình.

@import "elements.less";

Bây giờ bạn có thể sử dụng tất cả các lớp từ Elements.less . Ví dụ: để thêm bán kính góc viền là 3px vào phần tử div, bạn cần viết:

Div ( .rounded(3px); )

Quy tắc lồng nhau

Khi làm việc với mã CSS thông thường, cấu trúc mã sau khá phổ biến:

Điều hướng ( chiều cao: 40px; chiều rộng: 100%; nền: #455868; viền-dưới: 2px rắn #283744; ) điều hướng li ( chiều rộng: 600px; chiều cao: 40px; ) điều hướng li a ( color: #fff; line-height : 40px; bóng văn bản: 1px 1px 0px #283744;

Trong mã CSS thông thường, chúng tôi chọn con bằng cách chỉ định cha mẹ trong mỗi bộ quy tắc.

Trong LESS, bạn có thể cải thiện bộ quy tắc trên bằng cách lồng các phần tử con vào trong phần tử cha:

Nav ( chiều cao: 40px; chiều rộng: 100%; nền: #455868; viền dưới: 2px rắn #283744; li ( chiều rộng: 600px; chiều cao: 40px; a ( color: #fff; line-height: 40px; text- bóng: 1px 1px 0px #283744; ) )

Bạn cũng có thể sử dụng các lớp giả, ví dụ: di chuột, sử dụng ký tự dấu và (&). Giả sử chúng ta muốn thêm :hover vào thẻ liên kết:

A ( color: #fff; line-height: 40px; text-shadow: 1px 1px 0px #283744; &:hover ( Background-color: #000; color: #fff; ) )

Hoạt động

Bạn cũng có thể sử dụng các thao tác trong LESS. Cộng, trừ, nhân và chia đều có sẵn.

Giả sử phần tử B cao gấp đôi phần tử A:

@height: 100px .element-A ( chiều cao: @height; ) .element-B ( chiều cao: @height * 2; )

Đầu tiên chúng ta xác định biến @height và gán nó để biểu thị chiều cao của phần tử A.

Trong phần tử B, chúng ta chỉ cần nhân giá trị của biến với 2. Bây giờ, khi chúng ta thay đổi giá trị của biến @height, phần tử B sẽ luôn cao gấp đôi.

Khu vực tầm nhìn

LESS sử dụng khái niệm phạm vi. Các biến từ ngữ cảnh cục bộ được sử dụng trước tiên và nếu chúng không có ở đó, việc tìm kiếm sẽ được thực hiện ở phạm vi rộng hơn.

Tiêu đề ( @color: black; màu nền: @color; nav ( @color: blue; màu nền: @color; a ( color: @color; ) ) )

Trong ví dụ trên, tiêu đề có biến màu được đặt thành đen, nhưng nền của phần tử điều hướng sẽ có màu xanh lam vì biến @color nằm trong ngữ cảnh cục bộ.

Phần kết luận

Trong các bài học tiếp theo của loạt bài này, chúng ta sẽ xem xét một ví dụ về cách sử dụng LESS trong đời thực và một số khía cạnh hữu ích của bộ công cụ.

Trong bài viết này, chúng ta sẽ nói về các khả năng của bộ tiền xử lý Ít hơn, do một số lực chưa xác định nên hầu như không có ai sử dụng. Ngoài ra, chúng tôi sẽ nói về chức năng còn thiếu và cố gắng thêm nó.

Tôi khuyên bạn nên bắt đầu bằng một lời nhắc nhở nhỏ về những gì bạn không nên làm, ngay cả khi bạn thực sự muốn. Hãy xem khung Alesya, được phát triển bởi một người bạn dạy Less cho người khác. Hãy thử xem kỹ tệp ./core/functions.less . Mặc dù không, nhưng đừng theo liên kết mà chỉ nhìn vào ảnh chụp màn hình của một phần nhỏ của tệp này. Khi tôi nhìn thấy nó lần đầu tiên, tôi chỉ đơn giản là bị sốc.

Lý do là các chu kỳ dịch rất chậm, kết quả là tốc độ dịch của Less trong CSS giảm và thời gian dịch tăng lên. Pentium 4? Không có ý xúc phạm, nhưng nó bực bội.

Tôi sẽ trích dẫn một đoạn trong cuốn sách “HTML5 dành cho nhà thiết kế web” của tác giả Jeremy Keith, người cách đây không lâu đã trở thành người hùng trên các trang công khai trên VK:

Giả sử trên thế giới có một con quái vật độc ác ghét Internet và tất cả người dùng Internet. Người đàn ông này có lẽ không quan tâm đến việc nhúng tệp âm thanh vào một trang bắt đầu phát tự động là điều cực kỳ thô lỗ và ngu ngốc. Sử dụng thuộc tính tự động phát, bạn có thể thỏa mãn những ham muốn xấu xa sâu sắc của anh ta.

Nếu bạn từng sử dụng thuộc tính tự động phát như thế này, hãy biết rằng tôi sẽ tìm thấy bạn.

Do đó, nếu bạn cũng sử dụng Ít hơn, hãy biết rằng họ đang tìm kiếm bạn và sẽ sớm tìm thấy bạn.

Mở rộng bộ chọn

Chúng tôi có một công cụ ngắt dòng chảy điển hình trong thời đại của chúng tôi:

Clearfix ( &:trước, &:after ( content: " "; display: table; ) &:after ( clear: cả hai; ) )

Và một số bộ chọn ngụ ý việc sử dụng Clearfix. Tất nhiên, bạn có thể sử dụng .clearfix làm mixin và sản xuất nó ở mọi nơi số lượng lớn mã không cần thiết nhưng cần thiết. Tuy nhiên, bạn có thể tránh điều này bằng cách sử dụng tính năng mở rộng bộ chọn.

Ví dụ như thế này:

Thanh điều hướng ( &:extend(.clearfix all); ... ) .navbar-collapse ( &:extend(.clearfix all); ... ) .ad ( &:extend(.clearfix all); ... )

Kết quả là class.clearfix của chúng tôi bắt đầu liên lạc với bạn bè từ phần khác nhau phong cách của bạn mà không cần chia sẻ thêm dòng mã với bất kỳ ai:

Clearfix:trước, .clearfix:sau, .navbar:trước, .navbar:after, .navbar-collapse:trước, .navbar-collapse:sau, .ad:trước, .ad:after ( nội dung: " "; hiển thị: bảng; ) .clearfix:after, .navbar:after, .navbar-collapse:after, .ad:after ( clear: cả hai; )

Tất nhiên, bạn không nên lạm dụng điều này. Thành thật mà nói, tôi khuyên bạn chỉ nên sử dụng tiện ích mở rộng bộ chọn cho Clearfix và trong trường hợp áp dụng quy tắc: “Chà, nó thực sự cần thiết, tôi không thể làm gì cả, nếu không mọi chuyện sẽ tệ hơn”. Bạn không nên sử dụng phần mở rộng bộ chọn khi xảy ra thao tác với kiểu phần tử. Sai lầm phổ biến và ngu ngốc nhất:

Lớp ( color: #fff; nền: #fff; ) .new-class ( &:extend(.class); ) // .class, // .new-class ( // color: #fff; // nền: #fff; // )

Bạn không thể làm điều đó. Điều này thật ngốc nghếch. Tốt hơn nên sử dụng .class làm mixin:

Lớp ( color: #fff; nền: #fff; ) .new-class ( .class; ) // .class ( // color: #fff; // nền: #fff; // ) // .new-class ( // màu: #fff; // nền: #fff; // )

Nhớ lấy điều này!

Tùy chọn nhập

Vui lòng xem phần tài liệu "tùy chọn chỉ thị nhập".

Tôi sẽ chỉ mô tả ngắn gọn những thông số quan trọng nhất sau đây:

thẩm quyền giải quyết

Cho phép bạn sử dụng các tệp .less nhưng không hiển thị nội dung của chúng mà không có lệnh gọi rõ ràng. Một tùy chọn rất hữu ích nếu bạn sử dụng Bootstrap làm thư viện chứ không phải khung, đó là:

@import (tham khảo) "bower_comComponents/bootstrap/less/bootstrap"; .my-alert ( .alert; )

Việc sử dụng tham số này giúp có thể bao gồm các tệp không có phần mở rộng .less. Tham số này là không bắt buộc, vì mọi thứ sẽ hoạt động mà không cần nó, tuy nhiên, nếu bạn thích trật tự, nó sẽ rất hữu ích. Tham số này có thể được sử dụng khi kết nối các tệp có phần mở rộng khác .less, ví dụ: .variables, .mixins.

Bạn cần phải áp dụng nó như thế này:

@import (từ khóa) "tên tệp";

VỚI miêu tả cụ thể và các ví dụ có thể được tìm thấy trên các trang tài liệu. Vì vậy, một cách lịch sự, tôi gửi bạn, độc giả của tôi, để đọc tài liệu. Cảm giác khó quên :)

Câu điều kiện

Ít có điều kiện. Đúng, chúng chưa hoàn chỉnh khi so sánh với các bộ tiền xử lý khác, nhưng sự hiện diện của chúng vẫn không thể không vui mừng. Đối với tôi, chúng thậm chí còn tiện lợi hơn @if trong Sass, mặc dù không có sự khác biệt thực tế.

Mixin(@variable) ( & when (@variable = 1) ( content: "TRUE" ) & khi không (@variable = 1) ( content: "FALSE" ) .class-test ( .mixin(1); . mixin (2)

Kết quả chúng ta sẽ nhận được CSS sau:

Kiểm tra lớp ( nội dung: "TRUE"; nội dung: "FALSE"; )

Chuyện gì vừa xảy ra vậy? Ảo thuật?

Không thực sự. Từ khóa When ở đây thay thế từ khóa if thông thường trong tất cả các ngôn ngữ lập trình và chỉ có hai cổng logic: không - phủ định, và - đơn giản Và và thế là xong, không còn gì nữa. Tôi không thể làm điều gì đặc biệt thú vị với điều này, nhưng tôi sử dụng điều hành có điều kiệnđể mã không cần thiết không được tạo ra. Ví dụ, một tình huống như vậy là thuộc tính bán kính đường viền trong trình tạo kiểu nút. Tại sao bất kỳ thuộc tính nào sẽ được chỉ định lại một lần nữa trong quá trình tạo nếu giá trị của nó không đóng vai trò (0)? - Đúng rồi, không cần đâu.

Nội suy các biến

Có một thiết kế thú vị trong Less khi chúng ta lấy giá trị của một biến tùy thuộc vào những biến khác.

// Biến @clr-grey-100: #fafafa; @clr-grey-200: #f5f5f5; @clr-red-100: #ffebee; @clr-red-200: #ffcdd2; .mixin(@color, @nhiệt độ: 500) ( color: ~"@(clr-@(color)-@(information))"; nền: e("@(clr-@(color)-@(temporance) )"); ) .class-test ( .mixin(grey, 100); &-test ( .mixin(red, 200); ) )

Ví dụ này gọi một mixin có tham số là màu ( @màu sắc) và nhiệt độ của nó ( @nhiệt độ). Tiếp theo, chúng tôi tập hợp tất cả các biến thành một, nghĩa là nói một cách đơn giản, chúng tôi xây dựng một biến mới và nhận giá trị của nó. Quá trình khi một chuỗi, nói một cách tương đối, biến thành lệnh gọi một biến là nội suy các biến.

Lưu ý rằng trong ví dụ này chúng ta sử dụng dấu ngoặc nhọn sau con chó - điều này rất quan trọng.

Tại lối ra:

Kiểm tra lớp ( color: #fafafa; nền: #fafafa; ) .class-test-test ( color: #ffcdd2; nền: #ffcdd2; )

Nhân tiện, tôi không thể tìm thấy điều này trong Sass và Stylus. Có lẽ một độc giả chú ý có thể cho tôi biết? :)

Chu kỳ

Nhiều tín đồ Bộ tiền xử lý Sass và Stylus nhấn mạnh rằng Less không có vòng lặp, nhưng vẫn có một số vòng lặp, mặc dù không giống với của những người khác. Nó chỉ bất tiện khi sử dụng chúng.

Giả sử chúng ta có một danh sách các màu:

@list-red: #ffebee, #ffcdd2, #ef9a9a, #e57373, #ef5350, #f44336, #e53935, #d32f2f, #c62828, #b71c1c;

Ví dụ: hãy tạo một lớp cho mỗi màu:

Color-generator(@index: 1, @color) khi (@index Nhấp vào “+” ở cuối cửa sổ và chọn loại tệp để theo dõi ít hơn. Bật khoảnh khắc này, nếu mọi thứ được thực hiện chính xác thì ngay cả với cài đặt mặc định, IDE của chúng tôi sẽ giám sát ít tệp hơn trong dự án và biên dịch chúng theo thời gian thực khi chúng thay đổi và đặt chúng vào thư mục bên cạnh tệp nguồn đã biên dịch. Điều chính là đảm bảo rằng trong trường Chương trình, đường dẫn đến trình biên dịch ít hơn (mà chúng tôi đã cài đặt trong bảng điều khiển) được chỉ định.

Làm việc với LESS

Cuối cùng, hãy giải trí một chút và bắt đầu viết mã LESS. Như bạn sẽ thấy, mã này rất dễ đọc và dễ hiểu vì cú pháp rất giống với css thông thường, điều này làm giảm rào cản gia nhập đối với nhà phát triển khi sử dụng nó.

Các biến trong LESS hoạt động giống như trong PHP, JS và hầu hết các ngôn ngữ lập trình khác. Bạn có thể sử dụng chúng để lưu trữ một giá trị, sau đó sử dụng các biến thay vì chính giá trị đó bất cứ khi nào bạn cần.

@header-font: Georgia ; h1 , h2 , h3 , h4 ( font-family : @header-font; ) .large ( font-family :@header-font; )

Trong ví dụ trên, chúng ta khai báo biến @header-font và viết giá trị “Georgia” vào biến đó. Bây giờ chúng ta có thể sử dụng biến này bất cứ khi nào chúng ta muốn cài đặt phông chữ Georgia. Nếu chúng tôi quyết định rằng Trebuchet MS phù hợp hơn với các tiêu đề của chúng tôi thì chúng tôi sẽ không cần xem qua toàn bộ tệp mà chỉ cần thay đổi giá trị của biến.
Tôi đã tìm thấy một công dụng tuyệt vời của các biến trong việc xác định màu sắc của trang web. Vào những ngày xưa tốt đẹp (cách đây không lâu), tôi đã sử dụng một cái gì đó như thế này:

/* Màu sắc cho trang web của tôi #ff9900 - Cam - dùng cho các liên kết và các mục được đánh dấu #cccccc - Xám nhạt - dùng cho viền #333333 - Đen đậm - Dùng cho nền tối và màu văn bản tiêu đề #454545 - Đen giữa - Dùng cho văn bản chung màu */ thân ( nền : #333333 ; màu : #454545 ; ) a ( màu : #ff9900 ; ) màu : #333333 ; )

Không có gì sai khi ghi lại màu sắc của bạn như thế này, đó là thực hành tốt, vấn đề là tài liệu không liên quan gì đến chức năng của kiểu của bạn. Nếu bạn quyết định thay đổi màu sau dòng mã 2000 và sau đó đổi ý ở dòng 3567, việc sửa tất cả các màu và tài liệu sẽ cực kỳ khó khăn.
Với LESS, chúng tôi có thể sửa đổi và ghi lại quy trình làm việc của mình cùng một lúc.

/* Màu sắc cho trang web của tôi */ @color-orange: #ff9900 ; @color-gray_light: #cccccc ; @color-black_dark: #333333 ; @color-black_medium: #454545 ; nội dung ( nền : @color-black_dark; color : @color-black_medium; ) a ( color :@color-orange; ) h1 , h2 , h3 , h4 , h5 , h6 ( color : @color-black_dark; ) Phạm vi biến đổi

Phạm vi của các biến mô tả những nơi chúng có thể truy cập được. Nếu bạn xác định một biến ở đầu tệp LESS thì biến đó sẽ có sẵn cho bất kỳ mã nào được viết sau nó.
Bạn cũng có thể xác định một biến bên trong quy tắc CSS. Trong trường hợp này, các biến sẽ không thể truy cập được ngoài quy tắc này; chúng có thể được sử dụng cục bộ.

nút ( @color : #ff9900 ; color :@color; ) ( nền : @color; )

Trong ví dụ này, LESS sẽ không được chuyển đổi do lỗi @color không được xác định để sử dụng bên trong thành phần nút. Nếu một biến được khai báo bên ngoài một phần tử và bên trong một phần tử khác thì biến đó sẽ chỉ có thể truy cập được cục bộ.

@color: #222222 ; nút ( @color : #ffffff ; color :@color; ) ( nền : @color; ) Các biến trong biến

Nếu bạn đã viết mã bằng PHP thì bạn biết rằng bạn có thể khai báo tên biến trong một biến khác.

@color-chirstmas_red: #941 f1f ; @name-of-color: "color-chirstmas_red" ; màu : @@ tên màu ;

Cá nhân tôi không sử dụng điều này nhiều vì các biến trong biến gần như vô dụng nếu không có bao đóng, nhưng tôi chắc chắn sẽ có những ví dụ thông minh về việc sử dụng điều này.

Hằng số và biến

Điều quan trọng cần lưu ý là, trái ngược với những gì bạn vừa đọc, các biến trong LESS giống hằng số hơn. Điều này có nghĩa là chúng, không giống như các biến, chỉ có thể được xác định một lần.

Hoạt động

Bạn có thể đạt được khả năng kiểm soát cực kỳ chính xác bằng cách sử dụng các thao tác trong LESS. Ý tưởng rất đơn giản:

.button ( @unit : 3 px; đường viền :@unit Solid #ddd ; phần đệm : @unit * 3 ; lề : @unit * 2 ; )

Đoạn mã trên đặt biến @unit thành 3px. Sau đó, chúng tôi đặt giá trị này thành chiều rộng đường viền, phần đệm gấp ba lần chiều rộng này và lề gấp đôi chiều rộng này.
Bạn có thể sử dụng các phép tính nhân, chia, cộng và trừ. Để tạo một khối có đường viền tăng chiều rộng các cạnh theo chiều kim đồng hồ, bạn có thể sử dụng đoạn mã sau:

.box ( @base_unit : 1 px; đường viền : @base_unit @base_unit + 1 @base_unit + 2 @base_unit + 3 ) Quản lý màu sắc

Tính năng tôi yêu thích nhất ở LESS là quản lý màu sắc. Bạn có thể sử dụng các thao tác để trộn màu và một số chức năng đặc biệt để làm việc với màu.

Hoạt động màu

Nếu bạn muốn thay đổi giá trị của một màu, bạn có thể làm như vậy bằng cách bớt hoặc thêm một màu khác.

@color: #941 f1f ; nút ( nền : #941f1f + #222222 ; đường viền : #941f1f - #111111 ; )

Thao tác nền trên sẽ tăng mỗi giá trị HEX lên 2. Kết quả sẽ là “B64141” - phiên bản nhạt hơn của màu gốc. Thao tác khung sẽ giảm mỗi giá trị HEX xuống 1 và tạo ra nhiều hơn màu tối: “830E0E”.
Trong thực tế, có nhiều trường hợp chúng ta bắt đầu với Màu cơ bản và chúng ta cần một phiên bản hơi tối hoặc sáng hơn của nó.

@color-button: #d24444 ; đầu vào .submit ( color :#fff ; nền :@color-button; border :1 px Solid @color-button - #222 ; phần đệm :5 px 12 px; ) Chức năng màu

Có nhiều khả năng hơn để làm việc với màu sắc; LESS cho phép bạn thao tác chúng trên cấp độ liên kết. Bạn có thể làm sáng, làm tối, bão hòa, khử bão hòa và xoay màu. Hãy xem các ví dụ sau đây bằng hình ảnh để hiểu mỗi ví dụ làm gì.

@color: #3 d82d1 ; .left_box ( nền :lighten(@color, 20%) ; ) .right_box ( nền :darken(@color, 20%) ; ) Lồng nhau

Khi viết CSS, chúng tôi sử dụng kiểu xếp tầng. Để thay đổi lề của một đoạn văn chỉ trong một bài viết, bạn có thể sử dụng đoạn mã sau:

bài viết .post p ( lề : 0 0 12 px 0 ; )

Không có gì sai với cách tiếp cận này, nhưng nếu chúng ta cũng cần thay đổi kiểu liên kết, trích dẫn, tiêu đề, v.v. chỉ trong một bài viết, bạn mới cần sử dụng tiền tố “article.post” cho mỗi thành phần. Điều này làm cho việc viết mã trở nên nhàm chán và khó đọc hơn.
Trong LESS, chúng ta có thể lồng các quy tắc này vào nhau, tạo cho chúng ta một phiên bản phong cách ngắn hơn, hợp lý hơn. Ví dụ:

Article.post ( p( lề: 0 0 12px 0; ) a ( color: red; ) a:hover ( color: blue; ) img ( float:left; ) )

Việc thụt lề là không bắt buộc nhưng nó làm cho mã dễ đọc hơn. Mức độ lồng nhau không bị giới hạn.

A ( color:red; ) p ( lề:0px; ) bài viết ( a ( color: green; ) p ( color: #555; a ( color:blue; ) ) )

Mixin

Mixins trong LESS sẽ giúp bạn không phải gõ mã không cần thiết. Bạn đã bao giờ phải tạo khung tròn trong đó chỉ có các góc trên cùng được làm tròn?

.tab ( -webkit-border-top-left-radius : 6 px; -webkit-border-top-right-radius : 6 px; -moz-border-radius-topleft : 6 px; -moz-border-radius- bán kính trên cùng bên phải : 6 px; bán kính đường viền trên cùng bên trái : 6 px;

Và vì vậy mỗi lần... Với LESS, tất cả điều này có thể được thay đổi bằng cách tạo một mixin. Tạp chất là các phần tử có thể tái sử dụng và có thể được thêm vào bất kỳ phần tử nào theo quy tắc. Và bạn thậm chí không cần phải học cú pháp mới.

Rounded_top ( -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; bán kính đường viền trên cùng bên trái: 6px; bán kính đường viền trên cùng bên phải: 6px; ) .tab ( nền: #333; color:#fff; .rounded_top; ) .submit ( .rounded_top; )

Trong đoạn mã trên, chúng tôi đã xác định phần tử .rounded_top để làm tròn các góc trên cùng. Khi chúng tôi thêm nó vào bất kỳ phần tử nào khác dưới dạng mixin (xem .tab), về cơ bản chúng tôi đang nhập các quy tắc mà chúng tôi đã tạo cho nó. Nhờ cú pháp này, chúng ta có thể sử dụng bất kỳ phần tử nào làm mixin.

Các kiểu cho phần tử .submit là các góc tròn ở trên cùng, màu trắng và nền đỏ (giá trị #333 bị ghi đè).

Mixins với các thông số

Mặc dù các tham số mixins nghe có vẻ phức tạp nhưng chúng giải quyết vấn đề một cách rất đơn giản. Trong các ví dụ trên, bạn đã thấy cách chúng ta có thể xác định một phần tử có bán kính 6px ở các góc trên cùng. Nếu chúng ta muốn tạo một phần tử có bán kính 3px thì sao? Chúng ta có nên khai báo các mixin khác nhau cho tất cả các giá trị pixel không? Tất nhiên câu trả lời là không, chúng ta phải sử dụng mixins có tham số!
Chúng tương tự như các hàm vì chúng có thể thay đổi giá trị khi được gọi. Hãy viết lại ví dụ với bán kính đường viền để xem nó hoạt động như thế nào.

Rounded_top(@radius) ( -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border -radius-topright: @radius; bán kính đường viền trên cùng bên trái: @radius; bán kính đường viền trên cùng bên phải: @radius; .tab ( nền: #333; color:#fff; .rounded_top(6px); ) .submit ( .rounded_top(3px); )

Trong đoạn mã trên, bán kính của phần tử .tab là 6px và phần tử .submit sẽ có giá trị là 3px.

Giá trị tiêu chuẩn

Nếu bạn thường sử dụng cùng bán kính đường viền nhưng đôi khi cần một đường viền khác, bạn cần đặt mixin thành giá trị tiêu chuẩn.

Rounded_top(@radius:6px) ( -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz -border-radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius; .tab ( nền: #333; color:#fff; .rounded_top; ). gửi ( .rounded_top(3px); )

Trong ví dụ này, .tab sẽ nhận giá trị mặc định là 6px và .submit sẽ nhận giá trị mặc định là 3px.

Nhiều lựa chọn

Bạn cũng có thể sử dụng nhiều tham số để xác định các tạp chất phức tạp hơn.

Bán kính(@radius:6px) ( -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; ) .button(@radius:3px, @background: #e7ba64, @padding: 4px) ( .radius(@radius); nền:@background; đường viền: 1px Solid @background - #222; đệm: @padding; ) .read_more ( .button(0px); )

Trong ví dụ này, class.read_more được định dạng với phần đệm 4px, màu nền#e7ba64 và có bán kính đường viền là 0px.

Sử dụng tất cả các đối số cùng một lúc

Một lựa chọn khác khi sử dụng đối số là kết hợp chúng. Thuộc tính viết tắt trong CSS có nhiều giá trị được viết lần lượt.

div ( đường viền :1 px rắn #bbb ; )

Để cung cấp cho tất cả các phần tử bắt buộc một đường viền màu xám, bạn có thể sử dụng chức năng này:

Gray_border(@width: 1px, @type: Solid, @color: #bbb)( border:@arguments; ) div ( .gray_border(2px, dashed); )

@arguments là một từ khóa đặc biệt hiển thị từng tham số một theo một thứ tự nhất định. Kết quả của mã LESS ở trên sẽ là:

div ( border :2 px nét đứt #bbb ; ) Mixins tham số không có tham số

Bạn cũng có thể sử dụng mixin tham số mà không cần tham số. Điều này được sử dụng khi bạn không cần xuất một mixin trong CSS nhưng muốn các quy tắc của nó áp dụng cho thành phần mà nó được sử dụng.

Cảnh báo ( nền: đỏ; màu: trắng; đệm:5px 12px; ) .error_message ( .alert; lề: 0 0 12px 0; )

CSS của đoạn code trên sẽ như thế này:

.alert ( nền : đỏ; màu : trắng; phần đệm : 5 px 12 px; ) .error_message ( nền : đỏ; màu : trắng; phần đệm : 5 px 12 px; lề : 0 0 12 px 0 ; )

Để ẩn lớp .alert bạn cần đặt tham số thành trống.

Alert() ( nền: đỏ; màu: trắng; đệm:5px 12px; ) .error_message ( .alert; lề: 0 0 12px 0; )

CSS hoàn thành sẽ trông như thế này:

.error_message ( nền : đỏ; màu : trắng; phần đệm : 5 px 12 px; lề : 0 0 12 px 0 ; )

Điều này chủ yếu được sử dụng để giảm kích thước CSS tài liệu.

Không gian tên

Không gian tên trong các ngôn ngữ lập trình thường được sử dụng để nhóm các thành phần có chức năng tương tự nhau. Chúng ta có thể đạt được điều gì đó tương tự trong LESS bằng cách kết hợp mã của mình với mixin.

#my_framework ( p ( lề: 12px 0; ) a ( color:blue; text-trang trí: none; ) .submit ( nền: đỏ; màu: trắng; đệm:5px 12px; ) )

Khi bắt đầu làm việc trên một trang web mới dựa trên khung của bạn, bạn có thể thêm liên kết #my_framework và sử dụng nó mà không làm tắc nghẽn không gian tên.

Nút gửi ( #my_framework > .submit; )

Đây cũng là một cách tuyệt vời để có thể nhanh chóng thay đổi và tinh chỉnh các chủ đề. Nếu bạn đang phát triển một số chủ đề cho công ty của mình thì để thay đổi mẫu nhanh chóng, bạn có thể đặt tất cả chúng vào một tệp LESS bằng cách sử dụng các gói.

#fw_1 ( p ( lề: 12px 0; ) a ( color:blue; text-trang trí: none; ) .submit ( nền: đỏ; color: trắng; đệm:5px 12px; ) ) #fw_2 ( p ( lề: 8px 0; ) a ( color:red; text-trang trí: gạch chân; ) .submit ( nền: xanh; màu: trắng; đệm:8px 20px; ) ) .submit_button ( #fw_2 > .submit; )

Do đó, chúng tôi có cơ hội tăng tốc độ viết bố cục dự án của mình bằng cách sử dụng các mixin được chuẩn bị trước của riêng chúng tôi hoặc khung. Hơn nữa, sử dụng ít hơn - khả năng đọc, cấu trúc và logic trong phong cách của bạn tăng lên theo cấp độ lớn, điều này sẽ cải thiện khả năng hỗ trợ trang web trong tương lai.