Thực đơn
trang chủTập tin và thư mục

Bộ tiền xử lý CSS: Đánh giá, lựa chọn, ứng dụng

Tuyệt đối tất cả các nhà thiết kế bố cục có kinh nghiệm đều sử dụng bộ tiền xử lý. Không có ngoại lệ. Nếu bạn muốn thành công trong hoạt động này, đừng quên những chương trình này. Thoạt nhìn, chúng có thể gây ra nỗi kinh hoàng thầm lặng cho người mới bắt đầu - điều này quá giống với lập trình! Trên thực tế, bạn có thể hiểu tất cả các khả năng của bộ tiền xử lý CSS trong khoảng một ngày và nếu bạn cố gắng thì sau vài giờ. Họ sẽ làm cho cuộc sống của bạn dễ dàng hơn nhiều trong tương lai.

Bộ tiền xử lý CSS ra đời như thế nào

Để hiểu rõ hơn về các tính năng của công nghệ này, chúng ta hãy đi sâu vào lịch sử phát triển cách trình bày trực quan của các trang web.

Khi việc sử dụng Internet rộng rãi lần đầu tiên bắt đầu, không có bảng định kiểu nào tồn tại. Việc thực thi các tài liệu chỉ phụ thuộc vào trình duyệt. Mỗi người trong số họ có phong cách riêng được sử dụng để xử lý các thẻ nhất định. Theo đó, các trang trông khác nhau tùy thuộc vào trình duyệt bạn mở chúng. Kết quả là sự hỗn loạn, nhầm lẫn và các vấn đề cho các nhà phát triển.

Năm 1994, nhà khoa học người Na Uy Haakon Lie đã phát triển một bảng định kiểu có thể được sử dụng để thiết kế vẻ bề ngoài các trang tách biệt khỏi tài liệu HTML. Ý tưởng này đã thu hút sự chú ý của đại diện tập đoàn W3C, những người ngay lập tức bắt tay vào cải tiến nó. Vài năm sau, phiên bản đầu tiên của đặc tả CSS được phát hành. Sau đó, nó không ngừng được cải tiến và hoàn thiện... Nhưng khái niệm vẫn như cũ: mỗi phong cách đều có những đặc tính nhất định.

Cách sử dụng bảng CSS luôn gây ra một số vấn đề. Ví dụ, các nhà thiết kế bố cục thường gặp khó khăn với việc sắp xếp và nhóm các thuộc tính và không phải mọi thứ đều đơn giản như vậy với tính kế thừa.

Và sau đó đến hai phần nghìn. Các nhà phát triển front-end chuyên nghiệp ngày càng bắt đầu tham gia vào lĩnh vực đánh dấu, những người có tính linh hoạt và công việc năng động với phong cách. CSS tồn tại vào thời điểm đó yêu cầu hỗ trợ tiền tố và theo dõi cho các tính năng trình duyệt mới. Sau đó, các chuyên gia JavaScript và Ruby bắt tay vào công việc, tạo ra các bộ tiền xử lý - các tiện ích bổ sung cho CSS để bổ sung thêm các tính năng mới cho nó.

CSS cho người mới bắt đầu: Tính năng của bộ tiền xử lý

Họ thực hiện một số chức năng:

  • thống nhất các tiền tố và hack của trình duyệt;
  • đơn giản hóa cú pháp;
  • làm cho nó có thể làm việc với các bộ chọn lồng nhau mà không gặp lỗi;
  • cải thiện logic kiểu dáng.

Tóm lại: bộ tiền xử lý bổ sung logic lập trình vào các khả năng của CSS. Bây giờ việc tạo kiểu được thực hiện không phải bằng cách liệt kê các kiểu thông thường mà bằng cách sử dụng một số kiểu kỹ thuật đơn giản và cách tiếp cận: biến, hàm, mixin, vòng lặp, điều kiện. Ngoài ra, nó đã có thể sử dụng toán học.

Nhận thấy sự phổ biến của các tiện ích bổ sung như vậy, W3C bắt đầu dần dần bổ sung các tính năng từ chúng vào mã CSS. Ví dụ: đây là cách nó xuất hiện trong thông số kỹ thuật hàm tính toán(), được nhiều trình duyệt hỗ trợ. Dự kiến ​​sẽ sớm có thể thiết lập các biến và tạo mixin. Tuy nhiên, điều này sẽ xảy ra trong tương lai xa và các bộ tiền xử lý đã có sẵn và hoạt động hoàn hảo.

Bộ tiền xử lý CSS phổ biến. Sass

Được phát triển vào năm 2007. Ban đầu nó là một thành phần của Haml, một công cụ tạo mẫu HTML. Tùy chọn quản lý mới phần tử CSS Các nhà phát triển Ruby on Rails thích nó và bắt đầu phân phối nó ở khắp mọi nơi. Xuất hiện ở Sass số lượng lớn các tính năng hiện có trong bất kỳ bộ tiền xử lý nào: biến, lồng các bộ chọn, mixin (tuy nhiên, tại thời điểm đó, không thể thêm đối số cho chúng).

Khai báo biến trong Sass

Các biến được khai báo bằng dấu $. Bạn có thể lưu trữ các thuộc tính và tập hợp của chúng trong đó, ví dụ: “$borderSolid: 1px màu đỏ đậm;”. Trong ví dụ này, chúng tôi đã khai báo một biến có tên là borderSolid và lưu trữ giá trị 1px màu đỏ trong đó. Bây giờ, nếu trong CSS chúng ta cần tạo đường viền màu đỏ rộng 1px, chúng ta chỉ cần chỉ định biến này sau tên thuộc tính. Sau khi khai báo, các biến không thể thay đổi được. Một số chức năng tích hợp có sẵn. Ví dụ: hãy khai báo biến $redColor với giá trị #FF5050. Bây giờ trong mã CSS, trong thuộc tính của một số phần tử, chúng ta sử dụng nó để đặt màu phông chữ: p ( color: $redColor; ). Bạn muốn thử nghiệm với màu sắc? Sử dụng các chức năng làm tối hoặc làm sáng. Điều này được thực hiện như thế này: p ( color: darken($redColor, 20%); ). Kết quả là màu đỏ sẽ nhạt hơn 20%.

Làm tổ

Trước đây, cần phải sử dụng các cấu trúc dài và phức tạp để biểu thị sự lồng nhau. Hãy tưởng tượng rằng chúng ta có một div chứa p và đến lượt nó lại chứa một span. Đối với div chúng ta cần đặt màu phông chữ thành đỏ, cho p - vàng, cho span - hồng. Trong CSS thông thường, việc này sẽ được thực hiện như thế này:

Bằng cách sử dụng Bộ tiền xử lý CSS mọi thứ được làm đơn giản và gọn gàng hơn:

Các phần tử theo nghĩa đen được “lồng” vào nhau.

Các chỉ thị tiền xử lý

Bạn có thể nhập tệp bằng lệnh @import. Ví dụ: chúng ta có một tệp phông chữ.sass, tệp này khai báo kiểu cho phông chữ. Chúng tôi đưa nó vào tệp style.sass chính: @import ‘fonts’. Sẵn sàng! Thay vì một tập tin lớn với các kiểu, chúng tôi có một số kiểu có thể được sử dụng để nhanh chóng và dễ dàng truy cậpđến các thuộc tính cần thiết.

cá hagfish

Một trong những ý tưởng thú vị nhất. Cho phép đặt toàn bộ tập hợp thuộc tính trên một dòng. Chúng hoạt động như sau:

@mixin lớnFont (

họ phông chữ: 'Time New Roman';

cỡ chữ: 64px;

chiều cao dòng: 80px;

độ dày phông chữ: đậm;

Để áp dụng mixin cho một thành phần trên trang, hãy sử dụng lệnh @include. Ví dụ: chúng tôi muốn áp dụng nó cho tiêu đề h1. Kết quả là cấu trúc sau: h1 ( @include: LargeFont; )

Tất cả các thuộc tính từ mixin sẽ được gán cho phần tử h1.

Bộ tiền xử lý ít hơn

Cú pháp Sass gợi nhớ đến lập trình. Nếu bạn đang tìm kiếm một tùy chọn phù hợp hơn cho người mới bắt đầu học CSS, hãy xem Ít hơn. Nó được tạo ra vào năm 2009. tính năng chính- hỗ trợ riêng để các nhà thiết kế bố cục không quen với lập trình có thể làm chủ nó dễ dàng hơn.

Các biến được khai báo bằng ký hiệu @. Ví dụ: @fontSize: 14px;. Nesting hoạt động theo nguyên tắc tương tự như trong Sass. Mixins được khai báo như sau: .largeFont() ( font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: đậm; ). Để kết nối, bạn không cần sử dụng các chỉ thị tiền xử lý - chỉ cần thêm một mixin mới được tạo vào các thuộc tính của phần tử đã chọn. Ví dụ: h1 ( .largeFont; ).

bút cảm ứng

Một bộ tiền xử lý khác. Được tạo ra vào năm 2011 bởi cùng một tác giả đã mang đến cho thế giới Jade, Express và các sản phẩm hữu ích khác.

Các biến có thể được khai báo theo hai cách - rõ ràng hoặc ngầm định. Ví dụ: font='Time New Roman'; - đây là một lựa chọn ngầm. Nhưng $font = ‘Times New Roman’ là rõ ràng. Mixins được khai báo và bao gồm ngầm. Cú pháp là: redColor() màu đỏ. Bây giờ chúng ta có thể thêm nó vào phần tử, ví dụ: h1 redColor();.

Thoạt nhìn, Stylus có vẻ khó hiểu. Dấu ngoặc đơn và dấu chấm phẩy "gốc" ở đâu? Nhưng một khi bạn đi sâu vào nó, mọi thứ sẽ trở nên rõ ràng hơn nhiều. Tuy nhiên, hãy nhớ rằng việc phát triển lâu dài với bộ tiền xử lý này có thể khiến bạn không còn sử dụng cú pháp CSS cổ điển nữa. Điều này đôi khi gây ra vấn đề khi bạn cần làm việc với các kiểu “thuần túy”.

Bạn nên chọn bộ tiền xử lý nào?

Nó thực sự... không quan trọng. Tất cả các tùy chọn đều cung cấp các khả năng gần như giống nhau, chỉ có cú pháp khác nhau đối với mỗi tùy chọn. Chúng tôi khuyên bạn nên làm như sau:

  • nếu bạn là một lập trình viên và muốn làm việc với các kiểu dưới dạng mã, hãy sử dụng Sass;
  • nếu bạn là nhà thiết kế bố cục và muốn làm việc với các kiểu như bố cục thông thường, hãy chú ý đến Ít hơn;
  • nếu bạn thích sự tối giản, hãy sử dụng bút Stylus.

Đối với tất cả các tùy chọn, có sẵn một số lượng lớn các thư viện thú vị có thể đơn giản hóa việc phát triển hơn nữa. Người dùng Sass nên kiểm tra Compass, một công cụ mạnh mẽ với nhiều tính năng tích hợp. Ví dụ, sau khi cài đặt nó, bạn sẽ không bao giờ phải lo lắng về tiền tố của nhà cung cấp. Làm cho việc làm việc với lưới dễ dàng hơn. Có những tiện ích để làm việc với màu sắc và họa tiết. Một số mixin đã được công bố có sẵn. Hãy dành một vài ngày cho sản phẩm này - nhờ đó bạn sẽ tiết kiệm được rất nhiều công sức và thời gian trong tương lai.

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 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.

Cú pháp đặc biệt(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. Bằng các tùy chọn ghi thay thế, chúng tôi muốn nói đến 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ộ xử lý trước chuyển đổi sang ngôn ngữ nguồn mà không cần 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ì một 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 nê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 vào trong một bộ chọn khác, 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, sử dụng tạp chất(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. Có, việc này có thể được sắp xếp vào CSS thuần túy, nhưng kết hợp với các tính năng khác, 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, cú pháp gần như chuẩn cho 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ý tiện lợi 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 là một ngôn ngữ đơn giản có chủ ý. Với sự gia tăng nhanh chóng của các ứng dụng web phức tạp, sự xuất hiện của các vị trí nhà phát triển front-end và số lượng yêu cầu mới ngày càng tăng, sự đơn giản này đang nhanh chóng biến mất. Đối với những người mới bắt đầu, bộ tiền xử lý CSS (đặc biệt là Sass, LESS và Stylus) mở rộng khả năng tạo kiểu của bạn với chức năng bổ sung như biến, lồng và mixins—cho phép bạn kiểm soát nhiều hơn đối với một lượng lớn phong cách.

Hiện đang thiếu các bài viết thúc đẩy việc sử dụng bộ tiền xử lý và cung cấp hướng dẫn nhanh theo họ thì không phải trong những năm gần đây, và nhiều điểm đã được mô tả khá rõ ràng. Vì vậy, hãy tập trung vào những gì thường bị bỏ qua và xem có thể làm gì để chống lại các giải pháp đầu cuối.

Giới thiệu (tùy chọn)

Như đã lưu ý trong phần giới thiệu, những thứ như Sass, LESS và Stylus cung cấp cho chúng ta chức năng bổ sung ngoài CSS, nhưng các tệp được viết bằng các ngôn ngữ này phải được biên dịch thành CSS trước khi trình duyệt có thể cố gắng phân tích cú pháp bất kỳ thứ gì trong đó. Nói chung, quá trình biên dịch được tự động hóa theo cách giảm thiểu mọi tác động đến quy trình làm việc.

Sử dụng bất kỳ bộ tiền xử lý nào được liệt kê, bạn có thể hưởng lợi từ những điều sau:

Tính biểu cảm: Mỗi bộ tiền xử lý chứa một tập hợp các quy ước tiết kiệm thời gian, bản chất của chúng nằm ở tính tùy chọn hoặc từ chối các quy tắc chấm câu khác nhau. Tùy thuộc vào sở thích của bạn, kiểu có thể được giải phóng khỏi dấu ngoặc đơn, dấu chấm phẩy và/hoặc dấu phẩy thông thường. Ngoài ra, tất cả chúng đều hỗ trợ việc lồng các bộ chọn.

Chức năng nâng cao: Những ngôn ngữ này, ở những mức độ khác nhau, mang đến những khả năng bổ sung để định hình phong cách của chúng ta; Điều này bao gồm mixins (các đoạn mã có thể tái sử dụng có thể nhận các đối số tùy chọn), phần mở rộng (kế thừa lớp) và hỗ trợ biến.

Tiện ích bổ sung:Để mở rộng kho vũ khí tiêu chuẩn, nhiều tiện ích bổ sung khác nhau được sử dụng rộng rãi. Sass có Compass, Stylus có Nib, và mặc dù đó là một câu chuyện khác, Bootstrap, không cần giới thiệu, được xây dựng bằng LESS.

Lợi ích thực sự

Trên thực tế, lợi ích chính của bộ tiền xử lý nằm ở việc tốn ít công sức hơn - không phải về mặt thể chất (ít nhấn phím thường xuyên hơn) mà là về mặt tinh thần. Bộ tiền xử lý cung cấp cho bạn cơ hội hiệu quả loại bỏ một số gánh nặng tẻ nhạt trong tâm trí và ít chuyển đổi hơn giữa Các ứng dụng khác nhau, đó là điển hình cho sự phát triển front-end. Bạn có ý nghĩa màu sắc được sử dụng thường xuyên không? Lưu trữ nó trong một biến thay vì tìm kiếm nó xung quanh dự án hoặc lưu trữ nó trong bộ nhớ của bạn. Cần một sự thay đổi màu sắc đơn giản và có thể dự đoán được? SASS có một tập hợp các thao tác màu không làm gì khác ngoài việc loại bỏ nhu cầu tiếp cận bộ chọn màu gần nhất.

Bằng cách triển khai bộ tiền xử lý, bạn có cơ hội tập trung trực tiếp vào phong cách viết. Môn số học thiết kế đáp ứng hoạt động trực tiếp bên trong tệp kiểu mà không cần chuyển sang máy tính. La bàn có thể chăm sóc các họa tiết cho bạn. Việc tách các kiểu thành các tệp mô-đun và sau đó kết hợp chúng mà không ảnh hưởng đến hiệu suất diễn ra liền mạch.

Ý tưởng chính là: những ngôn ngữ này cho phép bạn tập trung vào giải quyết vấn đề, thay vì bị phân tâm bởi các công cụ và chuyển đổi ngữ cảnh.

Biên soạn không đau

Rào cản chính để bắt đầu sử dụng CSS bộ tiền xử lý thường không phải là sự thiếu hiểu biết về việc nó tốt hay xấu - mọi người sợ hãi trước lời đề nghị cài đặt một gói bằng cách sử dụng dòng lệnh hoặc tùy chỉnh phối cảnh xem biểu thức. May mắn thay, tất cả những vấn đề này có thể tránh được nếu đột nhiên thiết bị đầu cuối không phải là điểm mạnh của bạn.

Ngay trong trình duyệt

Không chắc chắn lắm? Hãy xem việc triển khai các bộ tiền xử lý trên trình duyệt này.

Khai thác sức mạnh thực sự của bộ tiền xử lý CSS là một cuộc phiêu lưu. Có vô số ngôn ngữ, cú pháp và hàm, tất cả đều sẵn sàng để sử dụng ngay bây giờ.

Trong bài viết này chúng ta sẽ xem xét nhiều khả năng khác nhau và lợi ích của việc sử dụng ba bộ tiền xử lý khác nhau: Sass, LESS và Stylus.

Giới thiệu

Bộ tiền xử lý tạo CSS hoạt động trong tất cả các trình duyệt.

Bộ tiền xử lý CSS3 là các ngôn ngữ được viết với mục đích duy nhất là thêm các tính năng thú vị, sáng tạo vào CSS mà không phá vỡ khả năng tương thích của trình duyệt. Họ thực hiện điều này bằng cách biên dịch mã chúng tôi viết thành CSS đơn giản để có thể sử dụng trong bất kỳ trình duyệt nào từ thời đồ đá. Có hàng nghìn tính năng mà bộ tiền xử lý mang lại và trong bài viết này, chúng ta sẽ xem xét một số tính năng đã xuất bản và một số tính năng chưa được xuất bản. Hãy bắt đầu.

Cú pháp

Hầu hết phần quan trọng Viết mã bằng bộ tiền xử lý CSS là hiểu cú pháp. Thật may mắn cho chúng ta, cú pháp (hoặc có thể) giống với CSS thông thường cho cả ba bộ tiền xử lý.

SASS&ÍT

Sass và LESS sử dụng cú pháp CSS tiêu chuẩn. Điều này làm cho việc chuyển đổi dễ dàng hơn tập tin hiện có CSS vào bộ tiền xử lý. Sass sử dụng phần mở rộng .scss và LESS sử dụng phần mở rộng .less. Tập tin cơ sở Sass hoặc LESS có thể được cấu hình như thế này:

/* style.scss hoặc style.less */
h1 (
màu: #0982C1;
}

Như bạn có thể nhận thấy, đây chỉ là CSS đơn giản có thể biên dịch tốt trong cả Sass và LESS.

Điều quan trọng cần lưu ý là Sass cũng có cú pháp cũ hơn bỏ qua dấu chấm phẩy và dấu ngoặc nhọn. Mặc dù tính năng này vẫn còn tồn tại nhưng nó không được dùng nữa và chúng tôi sẽ không sử dụng nó trong ví dụ này. Cú pháp sử dụng phần mở rộng .sass và trông như thế này:

/* style.sass */
h1
màu: #0982c1

bút cảm ứng

Cú pháp của Stylus dài dòng hơn nhiều. Bằng cách sử dụng phần mở rộng tệp .styl, Stylus chấp nhận cú pháp CSS tiêu chuẩn nhưng cũng chấp nhận một số biến thể khác trong đó dấu ngoặc đơn, dấu hai chấm và dấu chấm phẩy là tùy chọn. Ví dụ:

/* style.style */
h1 (
màu: #0982C1;
}
/*bỏ dấu ngoặc vuông*/
h1
màu: #0982C1;
/*bỏ dấu hai chấm và dấu chấm phẩy */
h1
màu #0982C1

Việc sử dụng các biến thể khác nhau trong cùng một biểu định kiểu cũng được chấp nhận, vì vậy phần sau sẽ biên dịch không có lỗi.

H1 (
màu #0982c1
}
h2
cỡ chữ: 1,2em

Biến

Các biến có thể được khai báo và sử dụng trong toàn bộ style sheet. Chúng có thể có bất kỳ ý nghĩa nào, đó là Giá trị CSS(chẳng hạn như màu sắc, số [bao gồm đơn vị] hoặc văn bản.) và chúng có thể được tham chiếu ở mọi nơi trong biểu định kiểu của chúng tôi.

Sass

Các biến Sass được thêm bằng ký tự $, giá trị và tên được phân tách bằng dấu chấm phẩy, giống như Thuộc tính CSS.

$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: chấm;
thân hình(
màu sắc: $mainColor;
đường viền: 1px $borderStyle $mainColor;
chiều rộng tối đa: $siteWidth;
}

ÍT HƠN

Các biến LESS hoàn toàn giống với các biến Sass, ngoại trừ tên biến được thêm ký hiệu @.

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: chấm;
thân hình(
màu sắc: @mainColor;
đường viền: 1px @borderStyle @mainColor;
chiều rộng tối đa: @siteWidth;
}

bút cảm ứng

Các biến bút stylus không yêu cầu thêm vào, mặc dù nó cho phép sử dụng ký hiệu $. Như thường lệ, không bắt buộc phải có dấu chấm phẩy ở cuối nhưng có dấu bằng giữa giá trị và biến. Cần lưu ý rằng Stylus (0.22.4) sẽ biên dịch nếu chúng ta thêm ký hiệu @ vào tên biến, nhưng không áp dụng giá trị khi tham chiếu. Nói cách khác, đừng làm điều đó.

Màu chính = #0982c1
chiều rộng trang web = 1024px
$borderStyle = chấm
thân hình
màu sắc chínhMàu sắc
đường viền 1px $borderStyle mainColor
trang web có chiều rộng tối đa

CSS được biên dịch

Mỗi tệp trên sẽ được biên dịch bằng cùng một CSS. Bạn có thể sử dụng trí tưởng tượng của mình để xem các biến hữu ích như thế nào. Chúng ta sẽ không cần phải thay đổi một màu và lặp lại nó hai mươi lần hoặc muốn thay đổi độ rộng của trang web và phải tìm kiếm xung quanh để tìm nó. Đây là CSS sau khi biên dịch:

Thân hình (
màu: #0982c1;
đường viền: 1px chấm #0982c1;
chiều rộng tối đa: 1024px;
}

Tệp đính kèm

Nếu chúng ta cần tham chiếu nhiều phần tử có cùng phần tử gốc trong CSS, việc viết đi viết lại phần tử gốc có thể rất tẻ nhạt.

Phần (
lề: 10px;
}
phần điều hướng (
chiều cao: 25px;
}
phần điều hướng a (
màu: #0982C1;
}
phần điều hướng a:hover (
trang trí văn bản: gạch chân;
}

Thay vào đó, bằng cách sử dụng bộ tiền xử lý, chúng ta có thể viết các bộ chọn con bên trong dấu ngoặc đơn của cha. Ngoài ra, & biểu thị bộ chọn cha.

Sass, LESS và bút stylus

Cả ba bộ tiền xử lý đều có cùng cú pháp cho các bộ chọn lồng nhau.

Phần (
lề: 10px;
điều hướng(
chiều cao: 25px;
Một (
màu: #0982C1;
&:bay lượn (
trang trí văn bản: gạch chân;
}
}
}
}

CSS được biên dịch

Đây là CSS được biên dịch từ đoạn mã trên. Nó giống hệt như khi chúng tôi bắt đầu - thật tiện lợi!

Phần (
lề: 10px;
}
phần điều hướng (
chiều cao: 25px;
}
phần điều hướng a (
màu: #0982C1;
}
phần điều hướng a:hover (
trang trí văn bản: gạch chân;
}

Mixin

Mixins là các hàm cho phép chúng ta sử dụng lại các thuộc tính trong stylesheet của mình. Thay vì xem qua toàn bộ biểu định kiểu và thay đổi thuộc tính nhiều lần, giờ đây chúng ta có thể chỉ cần thay đổi nó bên trong mixin của mình. Điều này có thể thực sự hữu ích cho kiểu phần tử cụ thể và tiền tố của nhà cung cấp. Khi mixin được gọi từ bộ chọn CSS, các đối số của mixin sẽ được nhận dạng và các kiểu trong mixin sẽ được áp dụng cho bộ chọn.

Sass

/* Lỗi trộn Sass với đối số (tùy chọn) $borderWidth, mặc định là 2px nếu không được chỉ định */
Lỗi @mixin($borderWidth: 2px) (
đường viền: $borderWidth Solid #F00;
màu: #F00;
}
.Lỗi chung(
phần đệm: 20px;
lề: 4px;
@include lỗi(); /* Áp dụng các kiểu từ lỗi mixin */
}
.lỗi đăng nhập(
trái: 12px;
vị trí: tuyệt đối;
trên cùng: 20px;
lỗi @include(5px); /* Áp dụng các kiểu từ lỗi mixin với đối số $borderWidth bằng 5px*/
}

ÍT HƠN

/* ÍT lỗi trộn lẫn với đối số (tùy chọn) @borderWidth, mặc định là 2px nếu không được chỉ định */
.error(@borderWidth: 2px) (
đường viền: @borderWidth Solid #F00;
màu: #F00;
}
.Lỗi chung(
phần đệm: 20px;
lề: 4px;
.lỗi(); /* Áp dụng các kiểu từ lỗi mixin */
}
.lỗi đăng nhập(
trái: 12px;
vị trí: tuyệt đối;
trên cùng: 20px;
.error(5px); /* Áp dụng các kiểu từ lỗi mixin với đối số @borderWidth bằng 5px */
}

bút cảm ứng

/* Lỗi kết hợp bút cảm ứng với đối số (tùy chọn) borderWidth mặc định là 2px nếu không được chỉ định */
lỗi(borderWidth= 2px) (
đường viền: borderWidth Solid #F00;
màu: #F00;
}
.Lỗi chung(
phần đệm: 20px;
lề: 4px;
lỗi(); /* Áp dụng các kiểu từ lỗi mixin */
}
.lỗi đăng nhập(
trái: 12px;
vị trí: tuyệt đối;
trên cùng: 20px;
lỗi (5px); /* Áp dụng các kiểu từ lỗi mixin với đối số borderWidth bằng 5px */
}

CSS được biên dịch

Tất cả các bộ tiền xử lý đều soạn cùng một mã:

Lỗi chung (
phần đệm: 20px;
lề: 4px;
đường viền: 2px liền khối #f00;
màu: #f00;
}
.lỗi đăng nhập(
trái: 12px;
vị trí: tuyệt đối;
trên cùng: 20px;
đường viền: 5px liền khối #f00;
màu: #f00;
}

Di sản

Khi viết CSS theo cách cũ, chúng ta có thể sử dụng đoạn mã sau để áp dụng cùng một kiểu cho nhiều phần tử cùng một lúc:

P,
ul,
ồ (
/* tạo kiểu ở đây */
}

Điều này hoạt động rất tốt, nhưng nếu chúng ta cần tạo kiểu riêng cho các phần tử, thì phải tạo một bộ chọn khác cho mỗi phần tử và nó có thể nhanh chóng trở nên lộn xộn và khó bảo trì hơn. Để chống lại điều này, bạn có thể sử dụng tính kế thừa. Kế thừa là khả năng của người khác Bộ chọn CSS kế thừa các thuộc tính của bộ chọn khác.

Sass&Stylus

.khối(
lề: 10px 5px;
phần đệm: 2px;
}
P(
@mở rộng
đường viền: 1px liền khối #EEE;
}
ul, ồ (
màu: #333;
chuyển đổi văn bản: chữ hoa;
}

CSS đã biên dịch (Sass &Stylus)

.block, p, ul, ol (
lề: 10px 5px;
phần đệm: 2px;
}
P(
đường viền: 1px liền khối #EEE;
}
ul, ồ (
màu: #333;
chuyển đổi văn bản: chữ hoa;
}

ÍT HƠN

LESS không thực sự hỗ trợ kế thừa phong cách như Sass và Stylus. Thay vì thêm nhiều bộ chọn vào một tập hợp thuộc tính, nó xử lý tính kế thừa như một mixin không có đối số và nhập các kiểu vào bộ chọn của chính nó. Nhược điểm của việc này là các thuộc tính được lặp lại trong biểu định kiểu đã biên dịch của bạn. Đây là cách bạn thiết lập nó:

Khối (
lề: 10px 5px;
phần đệm: 2px;
}
P(
.khối; /* Kế thừa kiểu dáng từ ".block" */
đường viền: 1px liền khối #EEE;
}
ul, ồ (
.khối; /* Kế thừa kiểu dáng từ ".block" */
màu: #333;
chuyển đổi văn bản: chữ hoa;
}

CSS đã biên dịch (LESS)

.khối(
lề: 10px 5px;
phần đệm: 2px;
}
P(
lề: 10px 5px;
phần đệm: 2px;
đường viền: 1px liền khối #EEE;
}
ul,
ồ (
lề: 10px 5px;
phần đệm: 2px;
màu: #333;
chuyển đổi văn bản: chữ hoa;
}

Như bạn có thể thấy, các kiểu từ .block đã được chèn vào các bộ chọn mà chúng tôi muốn thừa kế. Điều quan trọng cần lưu ý là mức độ ưu tiên có thể trở thành vấn đề ở đây, vì vậy hãy cẩn thận.

Nhập khẩu

Trong cộng đồng CSS, việc nhập CSS không được tán thành vì nó yêu cầu nhiều yêu cầu HTTP. Tuy nhiên, việc nhập bằng bộ tiền xử lý hoạt động khác. Nếu bạn nhập một tệp từ bất kỳ bộ tiền xử lý nào trong số ba bộ xử lý trước, nó sẽ bao gồm việc nhập theo đúng nghĩa đen tại thời điểm biên dịch, chỉ tạo một tệp. Hãy nhớ rằng việc nhập tệp .css thông thường sẽ biên dịch bằng @import "file.css" theo mặc định; mã số. Ngoài ra, các mixin và biến có thể được nhập và sử dụng trong biểu định kiểu chính của bạn. Nhập khẩu tạo nên sự sáng tạo tập tin riêng biệt rất hữu ích cho tổ chức.

Sass, LESS và bút stylus

/* loại tệp) */
thân hình(
nền: #EEE;
}
@import "reset.css";
@import "file.(type)";
P(
nền: #0982C1;
}

CSS được biên dịch

@import "reset.css";
thân hình(
nền: #EEE;
}
P(
nền: #0982C1;
}

Chức năng của màu sắc

Các hàm màu được tích hợp vào các hàm chuyển đổi màu tại thời điểm biên dịch. Điều này có thể cực kỳ hữu ích để tạo độ dốc, màu di chuột tối hơn, v.v.

Sass

làm sáng ($ màu, 10%); /* trả về màu nhạt hơn 10% so với $color */
làm tối ($ màu, 10%); /* trả về màu đậm hơn $color 10% */
bão hòa ($ màu, 10%); /* trả về màu bão hòa hơn 10% so với $color */
khử bão hòa ($ màu, 10%); /* trả về màu ít bão hòa hơn 10% so với $color */
thang độ xám ($ màu); /* trả về thang độ xám của $color */
bổ sung ($ màu); /* trả về màu bổ sung của $color */
đảo ngược ($ màu); /* trả về màu đảo ngược của $color */
trộn($color1, $color2, 50%); /* trộn $color1 với $color2 với trọng số 50% */

Đây chỉ là danh sách ngắn các hàm màu có sẵn trong Sass, bạn có thể tìm thấy danh sách đầy đủ các hàm màu Sass có sẵn bằng cách đọc tài liệu Sass.

Chức năng màu sắc có thể được sử dụng ở bất cứ nơi nào màu sắc được sử dụng. Đây là một ví dụ:

$màu: #0982C1;
h1 (
nền: $color;
đường viền: 3px làm tối đặc($color, 50%);
}

ÍT HƠN

làm sáng(@color, 10%); /* trả về màu nhạt hơn 10% so với @color */
làm tối(@color, 10%); /* trả về màu đậm hơn 10% so với @color */
bão hòa(@color, 10%); /* trả về màu bão hòa hơn 10% so với @color */
khử bão hòa(@color, 10%); /* trả về màu ít bão hòa hơn 10% so với @color */
quay(@color, 10); /* trả về màu có sắc độ lớn hơn 10 độ so với @color */
quay(@color, -10); /* trả về màu có sắc độ nhỏ hơn 10 độ so với @color */
trộn(@color1, @color2); /* trả về kết hợp của @color1 và @color2 */

Bạn có thể tìm thấy danh sách tất cả các hàm LESS bằng cách đọc Tài liệu LESS.

Dưới đây là ví dụ về cách sử dụng hàm màu trong LESS:

@color: #0982C1;
h1 (
màu nền;
đường viền: 3px đậm đặc(@color, 50%);
}

bút cảm ứng

làm sáng(màu sắc, 10%); /* trả về màu nhạt hơn 10% so với "color" */
làm tối(màu sắc, 10%); /* trả về màu đậm hơn "color" 10% */
bão hòa (màu, 10%); /* trả về màu bão hòa hơn 10% so với "color" */
khử bão hòa (màu, 10%); /* trả về màu ít bão hòa hơn 10% so với "color" */

Danh sách đầy đủ Bạn có thể tìm thấy tất cả các tính năng màu của Stylus bằng cách đọc tài liệu về Stylus.

Dưới đây là ví dụ về cách sử dụng các tính năng màu của bút cảm ứng:

Màu = #0982C1
h1
màu nền
đường viền đậm đặc 3px (màu, 50%)

Hoạt động

Làm toán trong CSS khá hữu ích và giờ đây hoàn toàn có thể thực hiện được. Thật đơn giản và đây là cách thực hiện:

Sass, LESS và bút stylus

thân hình(
lề: (14px/2);
trên cùng: 50px + 100px;
phải: 100px - 50px;
trái: 10 * 10;
}

Ứng dụng thực tế

Chúng tôi đã đề cập đến rất nhiều chức năng và khả năng mới mà bộ tiền xử lý có thể thực hiện, nhưng chúng tôi chưa đề cập đến bất kỳ điều gì thiết thực hoặc thiết thực. Đây danh sách ngắn các ứng dụng thế giới thực, trong đó việc sử dụng bộ tiền xử lý là cứu cánh.

Tiền tố nhà cung cấp

Đây là một trong những lý do nên sử dụng bộ tiền xử lý và vì một lý do rất chính đáng - nó tiết kiệm rất nhiều thời gian và công sức. Việc tạo một mixin để xử lý tiền tố của nhà cung cấp thật dễ dàng và tiết kiệm rất nhiều thao tác lặp lại cũng như chỉnh sửa khó khăn. Đây là cách thực hiện:

Sass

@mixin bán kính đường viền($values) (
-webkit-border-radius: giá trị $;
-moz-biên giới-bán kính: giá trị $;
bán kính đường viền: $values;
}
div(
@include bán kính đường viền (10px);
}

ÍT HƠN

.border-radius(@values) (
-webkit-biên giới-bán kính: @values;
-moz-biên giới-bán kính: @values;
bán kính đường viền: @values;
}
div(
.bán kính biên giới(10px);
}

bút cảm ứng

bán kính đường viền(giá trị) (
-webkit-border-bán kính: giá trị;
-moz-biên giới-bán kính: giá trị;
bán kính đường viền: giá trị;
}
div(
bán kính đường viền (10px);
}

CSS được biên dịch

div(
-webkit-biên giới-bán kính: 10px;
-moz-biên giới-bán kính: 10px;
bán kính đường viền: 10px;
}

văn bản 3D

Làm giả văn bản 3D bằng cách sử dụng nhiều bóng văn bản là một ý tưởng thông minh. Vấn đề duy nhất là việc thay đổi màu sắc sau thực tế rất khó khăn và rườm rà. Bằng cách sử dụng các hàm mixin và màu sắc, chúng ta có thể tạo văn bản 3D và thay đổi màu sắc một cách nhanh chóng!

Sass

@mixin text3d($color) (
màu: $color;
bóng văn bản: 1px 1px 0px làm tối($color, 5%),
2px 2px 0px làm tối($color, 10%),
3px 3px 0px làm tối($color, 15%),
4px 4px 0px tối ($color, 20%),
4px 4px 2px #000;
}
h1 (
cỡ chữ: 32pt;
@include text3d(#0982c1);
}

ÍT HƠN

.text3d(@color) (
màu: @color;
bóng văn bản: 1px 1px 0px làm tối(@color, 5%),
2px 2px 0px tối(@color, 10%),
3px 3px 0px làm tối(@color, 15%),
4px 4px 0px tối(@color, 20%),
4px 4px 2px #000;
}
khoảng(
cỡ chữ: 32pt;
.text3d(#0982c1);
}

bút cảm ứng

văn bản3d (màu)
màu sắc: màu sắc
bóng văn bản: 1px 1px 0px làm tối(màu, 5%), 2px 2px 0px làm tối(màu, 10%), 3px 3px 0px làm tối(màu, 15%), 4px 4px 0px làm tối(màu, 20%), 4px 4px 2px #000
spa
cỡ chữ: 32pt
văn bản3d(#0982c1)

Tôi quyết định viết bóng của văn bản Stylus trên một dòng vì tôi đã bỏ qua dấu ngoặc nhọn.

CSS được biên dịch

khoảng(
cỡ chữ: 32pt;
màu: #0982c1;
bóng văn bản: 1px 1px 0px #097bb7,
2px 2px 0px #0875ae,
3px 3px 0px #086fa4,
4px 4px 0px #07689a,
4px 4px 2px #000;
}

Kết quả cuối cùng

Cột

Sử dụng các phép toán số và biến trên các cột là một ý tưởng mà tôi đã nảy ra khi lần đầu tiên chơi với bộ tiền xử lý CSS. Bằng cách khai báo độ rộng mong muốn trong một biến, chúng ta có thể dễ dàng thay đổi nó trong quá trình thực hiện mà không cần phải tính nhẩm. Đây là cách nó được thực hiện:

Sass

$siteWidth: 1024px;
$gutterWidth: 20px;
$sidebarWidth: 300px;
thân hình(
lề: 0 tự động;
chiều rộng: $siteWidth;
}
.nội dung(
nổi: trái;
chiều rộng: $siteWidth - ($sidebarWidth+$gutterWidth);
}
.sidebar(
nổi: trái;
lề trái: $gutterWidth;
chiều rộng: $sidebarWidth;
}

ÍT HƠN

@siteWidth: 1024px;
@gutterWidth: 20px;
@sidebarWidth: 300px;
thân hình(
lề: 0 tự động;
chiều rộng: @siteWidth;
}
.nội dung(
nổi: trái;
chiều rộng: @siteWidth - (@sidebarWidth+@gutterWidth);
}
.sidebar(
nổi: trái;
lề trái: @gutterWidth;
chiều rộng: @sidebarWidth;
}

bút cảm ứng

trang webWidth = 1024px;
gutterWidth = 20px;
sidebarWidth = 300px;
thân hình(
lề: 0 tự động;
chiều rộng: siteWidth;
}
.nội dung(
nổi: trái;
chiều rộng: siteWidth - (sidebarWidth+gutterWidth);
}
.sidebar(
nổi: trái;
lề trái: gutterWidth;
chiều rộng: thanh bênWidth;
}

CSS được biên dịch

thân hình(
lề: 0 tự động;
chiều rộng: 1024px;
}
.nội dung(
nổi: trái;
chiều rộng: 704px;
}
.sidebar(
nổi: trái;
lề trái: 20px;
chiều rộng: 300px;
}

Trang trí đáng chú ý

Có khá nhiều điều kỳ quặc khi sử dụng bộ tiền xử lý CSS. Tôi sẽ liệt kê một số điều thú vị, nhưng nếu bạn thực sự muốn tìm tất cả chúng, tôi khuyên bạn nên xem qua tài liệu hoặc tốt hơn nữa, chỉ cần bắt đầu sử dụng bộ tiền xử lý trong mã hóa hàng ngày của bạn.

Báo cáo lỗi

Nếu bạn đã viết CSS trong một khoảng thời gian vừa phải, tôi chắc chắn rằng bạn đã đến lúc mắc lỗi ở đâu đó và bạn không thể tìm thấy nó. Nếu bạn giống tôi, có lẽ bạn đã dành cả ngày vò đầu bứt tóc và bình luận về nhiều điều khác nhau để truy tìm con bọ.

Bộ tiền xử lý CSS báo cáo lỗi. Nó đơn giản. Nếu có điều gì đó không ổn với mã của bạn, nó sẽ cho bạn biết vị trí và nếu bạn may mắn: tại sao. Bạn có thể xem bài đăng trên blog này nếu bạn muốn biết cách báo cáo lỗi trong các bộ tiền xử lý khác nhau.

Hôm nay tôi muốn nói về lý do và cách thức chúng ta sử dụng Bộ tiền xử lý bút stylus trong quá trình phát triển Yandex.Mail, đồng thời mô tả phương pháp chúng tôi sử dụng để làm việc với các kiểu cho IE. Nó rất dễ thực hiện bằng cách sử dụng bộ tiền xử lý và làm cho việc hỗ trợ IE trở nên đơn giản và thuận tiện. Chúng tôi thiết kế cho việc này thư viện đặc biệt, mà chúng tôi cũng sẽ chia sẻ - if-ie.styl.

Đây chỉ là bài viết đầu tiên trong loạt bài về cách sử dụng bộ tiền xử lý Stylus trong Yandex.Mail mà chúng tôi đang chuẩn bị xuất bản.

Chúng tôi đã sử dụng bộ tiền xử lý như thế nào

Mặc dù bề ngoài Yandex.Mail trông giống như một ứng dụng một trang, nhưng bên trong nó chứa một số lượng lớn các khối khác nhau, các sửa đổi và bối cảnh của chúng trong đó các khối và sửa đổi này có thể xuất hiện.

Ngoài ra, nó đã có hơn ba mươi chủ đề thiết kế. Có những chủ đề có nền sáng và có nền tối, có những chủ đề chỉ khác nhau về màu sắc và cũng có những chủ đề trong đó gần như toàn bộ giao diện được đúc từ nhựa dẻo bằng tay (http://habrahabr.ru /company/yandex/blog/110556/ ). Một số chủ đề chỉ có một hình nền và ở những nơi khác, nền có thể thay đổi - ngẫu nhiên hoặc tùy thuộc vào thời gian trong ngày và thời tiết.

Vì tất cả những điều này, nhiều biến thể trong cách trình bày trực quan của giao diện xuất hiện, điều này buộc chúng ta phải tiếp cận quá trình phát triển khác đi một chút và tìm kiếm các công cụ phù hợp hơn để giải quyết vấn đề.

Khi lần đầu tiên ra mắt giao diện neo2, chúng tôi đã chọn một giải pháp quen thuộc - công cụ tạo mẫu của Bộ công cụ Mẫu 2, với kịch bản có phần không chuẩn khi sử dụng nó để tạo CSS thay vì HTML. Lúc đầu, chúng tôi chỉ cần các biến, nhưng theo thời gian, các chủ đề trở nên phức tạp hơn và cuối cùng hóa ra một công cụ như vậy thật bất tiện. Cú pháp rườm rà, thiếu các chức năng dành riêng cho CSS và cảm giác chung khi sử dụng công cụ này cho các mục đích khác khiến chúng tôi tìm kiếm các lựa chọn khác. Chúng tôi nhận ra rằng chúng tôi không thể làm được nếu không có bộ tiền xử lý.

Lựa chọn tiền xử lý

Chúng tôi đã chọn giữa ba tùy chọn: Sass, Less và Stylus. Quá trình này khá đơn giản: chúng tôi lấy một số khối hiện có rồi cố gắng thiết kế lại chúng bằng cách sử dụng từng bộ tiền xử lý.

Còn rất nhiều thứ hữu ích khác trong Stylus, nhưng chính những thứ được đề cập ở trên đã khiến chúng tôi ưu tiên lựa chọn nó.

Tất nhiên, bên cạnh những ưu điểm thì bút Stylus cũng có những nhược điểm. Và cái chính là cú pháp linh hoạt - các tác giả của bộ tiền xử lý coi đây là ưu điểm chính của nó. Để theo đuổi sự linh hoạt, họ chỉ triển khai hoàn toàn cú pháp dựa trên thụt lề, trong khi tùy chọn “a la CSS” bằng cách nào đó được đặt ở trên cùng và bạn sẽ không thể lấy và đổi tên .css thành .styl - không phải tất cả CSS các tùy chọn viết sẽ hoạt động và trong Stylus. Nhưng chúng tôi quyết định rằng những khả năng mà bộ tiền xử lý này mang lại cho chúng tôi sẽ làm cho những thiếu sót của nó ít nghiêm trọng hơn, vì vậy chúng tôi phải chấp nhận một số tính thất thường của trình phân tích cú pháp (và bắt đầu sử dụng cú pháp dựa trên thụt lề).

Tóm tắt câu chuyện về sự lựa chọn, điều đáng chú ý là Sass và Stylus là hai lựa chọn gần như tương đương nhau. Mỗi người trong số họ đều có những ưu điểm và tính năng độc đáo riêng, cũng như những nhược điểm. Nếu bạn đang sử dụng một trong những bộ tiền xử lý này và hài lòng với mọi thứ thì thật tuyệt, bạn không cần phải nghĩ đến việc tìm kiếm một bộ tiền xử lý mới. Nhưng nếu bạn vừa mới tiếp cận được sự lựa chọn hoặc cảm thấy choáng ngợp với bộ tiền xử lý mà mình đang sử dụng, hãy thử so sánh tất cả các lựa chọn. Cách tốt nhấtĐể thực hiện việc này, hãy thử từng bộ tiền xử lý cho tác vụ riêng của nó. Sau khi phát triển một phần dự án của bạn trên từng bộ tiền xử lý, bạn sẽ hiểu khả năng nào của chúng là quan trọng đối với bạn và khả năng nào không. Đừng quên rằng bộ tiền xử lý không chỉ là một cú pháp khác mà còn là một cách tiếp cận khác: với cách thiết kế lại như vậy, bạn có thể đồng thời cấu trúc lại mã, thực hiện điều gì đó tối ưu hơn so với CSS đơn giản.

Tuy nhiên, chúng tôi cần cho bạn biết về một chức năng nữa hóa ra lại rất hữu ích đối với chúng tôi như là một phần trong quá trình chuyên đề hóa Yandex.Mail. Đây là chức năng rgba-ie. Trên thực tế, hàm này chỉ có thể được gọi là rgba , nhưng Stylus có một lỗi: các hàm được định nghĩa trong JS không thể bị ghi đè giống như các hàm được định nghĩa trong Stylus, vì vậy chúng tôi phải tạo một hàm mới.

Cô ấy đang làm gì? Các IE cũ hơn không hỗ trợ các giá trị màu được chỉ định ở định dạng rgba. Do đó, thông thường các nhà phát triển chỉ định các màu tương ứng hai lần - đầu tiên cho IE cũ ở định dạng hex thông thường, sau đó cho tất cả các trình duyệt thông thường ở rgba mong muốn - hoặc sử dụng Modernizr và sử dụng nó và lớp .rgba, đặt các màu tương ứng trong đó cần thiết. Nhưng đối với các bản dự phòng trong IE, mỗi lần chúng ta vẫn phải tính toán màu sắc gần đúng của những gì chúng ta sẽ phân hủy nó thành. Thông thường, đây sẽ là màu mong muốn được phủ lên trên nền trang hoặc nền phần tử ở giữa, với màu rgba được áp dụng phía trên nó.

Hàm rgba-ie từ if-ie.styl đơn giản hóa rất nhiều nhiệm vụ này: sao chép các khả năng của hàm rgba thông thường, chúng ta nhận được một tham số tùy chọn khác có thể được truyền cho hàm - màu nền cho dự phòng. Theo mặc định, tham số này được đặt thành #FFF.

Ví dụ đơn giản:

Màu foo: rgba-ie(0,0,0,0.5)

Trong các trình duyệt thông thường, màu này sẽ là rgba(0,0,0,0.5) thông thường, nhưng trong IE nó sẽ chuyển thành #808080 - nghĩa là màu tương ứng được phủ lên trên màu trắng.

Hơn ví dụ phức tạp, với nền đích làm đối số cuối cùng (và sử dụng một trong các tính năng của Bút cảm ứng - thay vào đó là khả năng chỉ định ba chữ số màu r , g và b ở dạng hex):

Nền Foo: rgba-ie(#FFDE00, .42, #19C261)

Trong ví dụ này, đối với các trình duyệt thông thường, màu sẽ là rgba(255,222,0,0.42) nhưng IE sẽ nhận được đúng #7ace38 .

Đồng thời, có thể đặt dự phòng mặc định bằng biến $default_rgba_fallback.

Do đó, bạn có thể đơn giản hóa cuộc sống của mình rất nhiều nếu sử dụng chức năng rgba-ie thay vì rgba thông thường - trong trường hợp này bạn gần như không phải nhớ về IE.

thẻ:

Thêm thẻ