Preprocessor CSS: tổng quan, lựa chọn, ứng dụng

Tuyệt đối tất cả các nhà thiết kế web có kinh nghiệm sử dụng 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 về các chương trình này. Ngay từ cái nhìn đầu tiên, họ có thể gây ra một kinh dị yên tĩnh mới làm quen - nó quá giống với các chương trình! Trong thực tế, bạn có thể đối phó với tất cả các tính năng của CSS tiền xử lý trong khoảng một ngày, và nếu bạn cố gắng, sau đó một vài giờ. Trong tương lai, họ sẽ đơn giản hóa đáng kể cuộc sống của bạn.

Làm thế nào đã làm CSS Preprocessor

Để hiểu rõ hơn về đặc điểm của công nghệ này, nghiên cứu kỹ một thời gian ngắn vào lịch sử của bài trình bày hình ảnh của trang web.

Khi chỉ mới bắt đầu sử dụng khổng lồ của Internet, không có style sheets không tồn tại. Thực hiện các văn bản phụ thuộc hoàn toàn vào trình duyệt. Mỗi trong số họ có phong cách riêng của họ, đã được sử dụng để điều trị một số thẻ. Theo đó, các trang tìm kiếm khác nhau tùy thuộc vào thứ tự mà trình duyệt bạn mở chúng. Kết quả - sự hỗn loạn, lẫn lộn, khó khăn cho các nhà phát triển.

Năm 1994, nhà khoa học Na Uy Håkon Lie phát triển một style sheet có thể được sử dụng cho sự xuất hiện của các trang riêng biệt với HTML-tài liệu. Ý tưởng priglanulas thành viên của W3C, người ngay lập tức đặt ra để hoàn thành. Một vài năm sau đó, ông đã công bố một phiên bản đầu tiên của đặc tả CSS. Sau đó, cô đã không ngừng được cải thiện, được hoàn thiện ... Tuy nhiên, khái niệm vẫn đều giống nhau: mỗi phong cách thiết lập thuộc tính nhất định.

Sử dụng bảng CSS luôn luôn là vấn đề. Ví dụ, các nhà thiết kế web thường có vấn đề với phân loại và nhóm tính năng, và thừa kế không phải là quá đơn giản.

Và sau đó đến hai nghìn. Dấu hiệu đang ngày càng bắt đầu tham gia vào các nhà phát triển front-end chuyên nghiệp, mà quan trọng là phải có phong cách làm việc linh hoạt và năng động. Tồn tại các vị trí thời gian yêu cầu tiền tố CSS và theo dõi hỗ trợ các tính năng mới của trình duyệt. Sau đó, bằng JavaScript, và các chuyên gia của Ruby đã xuống để kinh doanh, tạo ra một tiền xử lý - kiến trúc thượng tầng cho CSS, tính năng mới được thêm vào nó.

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

Họ có một số chức năng:

• thống nhất tiền tố trình duyệt và kaki;

• đơn giản hóa cú pháp;

• cung cấp cho các cơ hội để làm việc với selectors lồng nhau mà không có lỗi;

• cải thiện phong cách logic.

Nói tóm lại: Preprocessor thêm khả năng logic lập trình CSS. Bây giờ, phong cách không được thực hiện trong danh sách thông thường của phong cách và với một vài kỹ thuật đơn giản và phương pháp: biến, chức năng, myxinidae, chu kỳ điều kiện. Bên cạnh đó, khả năng sử dụng toán học.

Thấy sự phổ biến của các add-ins, W3C đã bắt đầu dần dần thêm khả năng của họ trong các mã CSS. Ví dụ, trong các đặc điểm kỹ thuật nên chức năng có calc (), được hỗ trợ bởi nhiều trình duyệt. Người ta cho rằng ngay sau đó sẽ có thể thiết lập các biến và tạo ra một myxinidae. Tuy nhiên, điều này sẽ xảy ra trong tương lai xa, và preprocessors đã ở đây và đã làm việc tốt.

Phổ biến preprocessors CSS. Sass

Được thiết kế vào năm 2007. Ban đầu là một thành phần Haml - một mẫu HTML. Các tính năng mới cho các yếu tố CSS kiểm soát phát triển thưởng thức trên Ruby on Rails, mà bắt đầu lan rộng khắp nơi. Các Sass một số lượng lớn các tính năng mà hiện nay bao gồm trong bất kỳ tiền xử lý: biến, nhúng của selectors, myxinidae (sau đó, tuy nhiên, những lý lẽ không thể được thêm vào).

biến khai báo trong Sass

Các biến khai báo với $ dấu. Họ có thể duy trì tính và bộ của họ, ví dụ: "$ borderSolid: 1px màu đỏ rắn;". Trong ví dụ này, chúng tôi tuyên bố một biến gọi là borderSolid và lưu nó đánh giá cao đỏ 1px solid. Bây giờ, nếu trong CSS chúng ta cần phải tạo ra một chiều rộng đường viền màu đỏ của 1px, chỉ cần chỉ ra rằng biến sau tên tài sản. Sau khi công bố các biến không thể thay đổi. Có một số chức năng built-in. Ví dụ, khai báo một biến với một giá trị của $ redcolor # FF5050. Bây giờ, trong các mã CSS trong các thuộc tính của bất kỳ nguyên tố, sử dụng nó để thiết lập màu chữ: p {color: $ redColor; }. Bạn có muốn thử nghiệm với các màu sắc? Sử dụng chức năng tối hoặc làm sáng. Này được thực hiện như vậy: p {color: tối ($ redColor, 20%); }. Kết quả là, các redColor màu sẽ nhẹ hơn 20%.

Các Sass nhiều built-in chức năng. Trị giá ít nhất đọc chúng, nhưng tốt hơn - để học hỏi.

làm tổ

Trước đây, để chỉ làm tổ đã phải sử dụng một thiết kế dài và khó chịu. Hãy tưởng tượng rằng chúng tôi có một div, mà là p, và trong đó, đến lượt nó, thiết lập khoảng thời gian. Cho div, chúng ta cần phải thiết lập màu chữ đỏ, cho p - màu vàng, cho nhịp - màu hồng. Trong một CSS điển hình nó sẽ được thực hiện như sau:

div {

color: red;

}

div p {

màu: màu vàng;

}

div p khoảng {

màu: màu hồng;

}

Với CSS tiền xử lý tất cả trở nên dễ dàng hơn và nhỏ gọn hơn:

div {

color: red;

p {

màu: màu vàng;

.span {

màu: màu hồng;

}

}

}

Elements nghĩa là "đầu tư" một số khác.

chỉ thị tiền xử lý

Sử dụng chỉ thị @import thể import các file. Ví dụ, chúng ta có tập tin fonts.sass rằng tuyên bố phong cách cho phông chữ. Kết nối nó với các style.sass tập tin chính: @import 'phông chữ'. Xong! Thay vì một tập tin lớn duy nhất với phong cách chúng tôi có một vài mà có thể được sử dụng để truy cập nhanh và dễ dàng để các thuộc tính cần thiết.

myxinidae

Một trong những ý tưởng thú vị nhất. Nó cho phép một dòng hỏi một tập hợp các thuộc tính. Hoạt động như sau:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Myxinidae để áp dụng cho các phần tử trên trang web, sử dụng @include chỉ thị. Ví dụ, chúng ta muốn áp dụng nó vào các tiêu đề h1. Chúng tôi có cơ cấu như sau: h1 {@include: largeFont; }

Tất cả các thuộc tính của myxinidae được giao một yếu tố h1.

Preprocessor Less

Cú pháp Sass nhớ lại chương trình. Nếu bạn đang tìm kiếm một lựa chọn mà là phù hợp hơn cho người mới bắt đầu học CSS, tìm kiếm ít hơn. Nó được tạo ra vào năm 2009. Các tính năng chính - Hỗ trợ cho các cú pháp có nguồn gốc CSS, vì vậy không quen với Imposer lập trình nó sẽ được dễ dàng hơn để học hỏi.

Các biến được khai báo bằng cách sử dụng biểu tượng @. Ví dụ: @fontSize: 14px;. công trình làm tổ trên các nguyên tắc tương tự như trong Sass. Myxinidae được công bố như sau: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; }. Để kết nối với nó không phải là cần thiết để sử dụng chỉ thị tiền xử lý - chỉ cần thêm myxinidae mới được tạo ra trong các thuộc tính của phần tử được chọn. Ví dụ: h1 {.largeFont; }.

Stylus

Một tiền xử lý. Tạo ra vào năm 2011 bởi cùng một tác giả, mà đã làm 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 trong hai cách - hoặc rõ ràng hoặc ngầm. Ví dụ: font = 'Times New Roman'; - một lựa chọn tiềm ẩn. Nhưng $ font = 'Times New Roman' - rõ ràng. Myxinidae được khai báo và ngầm được kết nối. Cú pháp như sau: redColor () màu đỏ. Bây giờ chúng ta có thể thêm các mục, ví dụ: redColor h1 ();.

Stylus trên Thoạt nhìn nó có vẻ khó hiểu. Đâu là dấu ngoặc và dấu chấm phẩy "bản địa"? Nhưng nó là cần thiết để lao vào nó, tất cả trở nên rõ ràng hơn nhiều. Hãy nhớ rằng, tuy nhiên, sự phát triển lâu dài của tiền xử lý này có thể "cai sữa" bạn sử dụng cú pháp CSS cổ điển. Điều này đôi khi gây ra vấn đề khi phải làm việc với một phong cách "tinh khiết".

Preprocessor gì chọn cái nào?

Trong thực tế, nó là ... nó không quan trọng. Tất cả các phiên bản có tính năng tương tự chỉ là cú pháp của mỗi khác. Chúng tôi khuyên bạn nên tiến hành như sau:

• nếu bạn - lập trình viên và muốn làm việc với phong cách cả trong mã, sử dụng Sass;
• nếu bạn - một coder và muốn làm việc với phong cách như với cách bố trí truyền thống, chú ý đến các Ít;
• nếu bạn muốn tối giản, sử dụng Stylus.

Đối với tất cả các biến thể của vô số các thư viện thú vị mà có thể đơn giản hóa hơn nữa phát triển. Người dùng Sass nên chú ý đến các 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 bạn cài đặt nó, bạn sẽ không bao giờ phải lo lắng về tiền tố phiên bản nhà cung cấp. Đơn giản hoá việc với lưới. Có những công cụ để làm việc với hoa, sprites. Một loạt đã công bố myxinidae. Cung cấp cho công cụ này một vài ngày - vì vậy bạn sẽ tiết kiệm rất nhiều thời gian và nỗ lực trong tương lai.