Sass Mẹo và công cụ thực hành tốt nhất dành cho nhà phát triển

Giống như cách jQuery cách mạng hóa vanilla JavaScript, Sass đã cách mạng hóa vanilla CSS. Hầu hết các nhà phát triển học Sass đều đồng ý rằng họ sẽ không bao giờ muốn quay lại. Nhiều người cũng đồng ý rằng vấn đề lớn nhất với các nhà phát triển mới là đường họ sử dụng Sass, không phải Sass.

Tôi đã lướt web và biên soạn bài viết này của thực hành tốt nhất để viết mã Sass có thể mở rộng và tái sử dụng. Đề xuất là từ ý kiến ​​của riêng tôi và từ các trang web đáng tin cậy như Nguyên tắc Sass.

Bạn chắc chắn không cần phải thực hiện tất cả các tính năng này vào quy trình làm việc của mình. Nhưng ít nhất cũng đáng để giải trí những ý tưởng này và suy ngẫm về những lợi ích tiềm năng.

Tổ chức tập tin

Nơi tốt nhất để bắt đầu phát triển Sass là tổ chức tệp. Nếu bạn đã sử dụng mã mô-đun thì bạn nên hiểu giá trị của nhập khẩu và các hạt (sẽ nói thêm về những điều này sau).

Nhưng bây giờ hãy xem ví dụ về cấu trúc tệp này từ DoCSSa. Tôi đã tạo lại cấu trúc tệp này mà bạn có thể thấy bên dưới:

Đây chỉ là một gợi ý và đó là một trong nhiều cách bạn có thể sắp xếp các tệp của mình. Bạn có thể tìm các phương thức khác sử dụng các cấu trúc thư mục khác nhau như “toàn cầu” cho SCSS trên toàn trang web và “trang” cho SCSS dành riêng cho trang.

Hãy xem qua kiểu tổ chức được đề xuất này để kiểm tra mục đích của từng thư mục:

• / toàn cầu - chứa các tệp Sass được áp dụng trên toàn trang web như kiểu chữ, màu sắc và lưới
• /các thành phần - chứa các tệp Sass với các kiểu thành phần như nút, bảng hoặc trường nhập
• / phần - chứa các tệp Sass dành riêng cho các trang hoặc khu vực cụ thể trên một trang (có thể hoạt động tốt hơn khi kết hợp vào thư mục / thành phần /)
• / đồ dùng - chứa các tiện ích của bên thứ ba như Chuẩn hóa có thể được cập nhật động với các công cụ như Bower.
• main.scss - tệp Sass chính trong thư mục gốc nhập tất cả các tệp khác.

Đây chỉ là một điểm khởi đầu cơ bản và có rất nhiều chỗ để mở rộng với ý tưởng của riêng bạn.

Nhưng cho dù bạn chọn tổ chức SCSS như thế nào, điều quan trọng là bạn phải có một số tổ chức với một tệp (hoặc thư mục) riêng cho các thư viện như Chuẩn hóa cần được cập nhật, cộng với các thành phần trong các phần của Sass cho dự án của bạn.

Sass partials là rất quan trọng đối với thực tiễn tốt nhất hiện đại. Chúng được nhóm thiết kế của Zurb và nhiều nhà phát triển frontend chuyên nghiệp khác khuyên dùng.

Dưới đây là trích dẫn từ trang web của Sass giải thích về các phần:

“Bạn có thể tạo các tệp Sass một phần có chứa các đoạn CSS nhỏ mà bạn có thể đưa vào các tệp Sass khác. Đây là một cách tuyệt vời để mô đun hóa CSS của bạn và giúp giữ mọi thứ dễ dàng hơn để duy trì. Một phần chỉ đơn giản là một tệp Sass được đặt tên với dấu gạch dưới hàng đầu. Bạn có thể đặt tên cho nó giống như _partial.scss. Dấu gạch dưới cho Sass biết rằng tệp chỉ là một phần của tệp và nó không nên được tạo thành tệp CSS. Sass partials được sử dụng với @ nhập khẩu chỉ thị.”

Ngoài ra hãy xem các bài viết khác liên quan đến cấu trúc tệp Sass:

• Cách tôi cấu trúc các dự án Sass của tôi
• Thẩm mỹ Sass: Tổ chức Kiến trúc và Phong cách
• Cấu trúc thư mục giúp bạn duy trì mã của mình

Chiến lược nhập khẩu

Không đủ để có thể nói về giá trị của nhập khẩu Sass và partials. Tổ chức mã là chìa khóa để có được cấu trúc nhập và quy trình làm việc chỉ hoạt động.

Nơi tốt nhất để bắt đầu là một bảng toàn cầu có chứa nhập khẩu, biến và mixin với nhau. Nhiều nhà phát triển thích tách các biến và mixin nhưng điều này thuộc về ngữ nghĩa.

Hãy nhớ rằng mixins là một cách nhập, hoặc thay vì sao chép mã Sass. Chúng cực kỳ mạnh mẽ nhưng không nên được sử dụng với “tĩnh” mã. Hãy nhớ rằng có một sự khác biệt giữa mixins, extends và giữ chỗ, tất cả đều có công dụng của chúng trong phát triển Sass.

Mixins được sử dụng tốt nhất với các giá trị động được truyền vào mixin để thay đổi mã. Ví dụ: kiểm tra mixin Sass này để tạo độ dốc nền giữa hai màu.

@mixin linearGradient ($ top, $ bottom) nền: $ top; / * Các trình duyệt cũ * / nền: -moz-linear-gradient (trên cùng, $ top 0%, $ bottom 100%); / * FF3.6 + * / nền: -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, dừng màu (0%, $ top), dừng màu (100%, $ dưới)); / * Chrome, Safari4 + * / nền: -webkit-linear-gradient (trên cùng, $ top 0%, $ bottom 100%); / * Chrome10 +, Safari5.1 + * / nền: -o-linear-gradient (trên cùng, $ top 0%, $ bottom 100%); / * Opera 11.10+ * / nền: -ms-linear-gradient (trên cùng, $ top 0%, $ bottom 100%); / * IE10 + * / nền: gradient tuyến tính (xuống dưới, $ top 0%, $ bottom 100%); / * W3C * / bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# 000000", GradientType = 0); / * IE6-9 * /

Mixin có hai giá trị: màu trên cùng và màu dưới cùng. Bạn có thể viết các mixin khác nhau cho các loại gradient khác nhau bao gồm 3 hoặc 4+ màu khác nhau. Điều này cho phép bạn nhập và sao chép mã mixin trong khi thay đổi các tham số cho các tùy chọn tùy chỉnh.

Ví dụ từ Code Responsible trông như thế này:

.nút @include linearGradient (#cccccc, # 666666); 

Liên quan đến mixin là trình giữ chỗ của Sass, chủ yếu hữu ích với chỉ thị mở rộng. Nó được thừa nhận là phức tạp hơn mixins, nhưng đây có thể là một cách để kết hợp các bộ chọn với nhau mà không cần viết lại mã thừa.

Mặc dù Sass chỉ có một phương thức @import, tôi đã bao gồm các mixins và giữ chỗ để chứng minh tính linh hoạt của mã có thể được viết trong một tệp nhưng được bao gồm ở bất kỳ đâu.

Khi xây dựng cấu trúc nhập, chỉ cần nhớ tuân theo các khái niệm về mã hóa DRY (Đừng lặp lại chính mình).

Quy ước đặt tên

Các quy tắc chung cho quy ước đặt tên áp dụng cho các biến, hàm và mixin. Khi đặt tên bất cứ thứ gì trong Sass, bạn nên sử dụng tất cả các chữ cái viết thường có dấu gạch ngang để phân tách.

Cú pháp mã Sass thực sự dựa trên bộ quy tắc hướng dẫn CSS. Dưới đây là một số thực tiễn tốt nhất được đề nghị ghi nhớ:

• hai (2) chỗ thụt lề, không có tab
• lý tưởng, các dòng rộng 80 ký tự trở xuống
• ý nghĩa của việc sử dụng khoảng trắng
• sử dụng các bình luận để giải thích các hoạt động CSS

Đây không phải là các mục bắt buộc cho mã Sass hợp lệ. Nhưng những đề xuất này đến từ các nhà phát triển chuyên nghiệp, những người đã tìm thấy các quy tắc này cung cấp trải nghiệm mã hóa thống nhất nhất.

Nhưng liên quan đến các quy ước đặt tên, bạn có thể kết thúc bằng hai cấu trúc khác nhau: một cho tên Sass và một cho tên lớp CSS. Một số nhà phát triển thích BEM hơn các đề xuất Sass. Không ai nhiều hơn, hoặc ít hơn, đúng; chỉ khác nhau với các quy trình vận hành khác nhau.

Vấn đề là BEM không chuyển tốt đến các biến Sass hoặc mixins vì chúng không có cấu trúc khối / phần tử / công cụ sửa đổi (BEM). Cá nhân tôi thích sử dụng các quy ước đặt tên Sass nhưng bạn có thể thử mọi thứ từ camelCase đến cú pháp nội bộ của riêng bạn.

Khi tổ chức các biến và mixins của bạn, bạn nên chia chúng theo danh mục, sau đó liệt kê chúng theo thứ tự bảng chữ cái. Điều này làm cho việc chỉnh sửa dễ dàng hơn rất nhiều vì bạn biết chính xác nơi để tìm thứ gì đó.

Ví dụ: để thay đổi màu liên kết, bạn sẽ mở tệp biến của mình (có thể _variabled.scss) và xác định vị trí phần cho các biến màu. Sau đó tìm liên kết theo tên (liên kết tiêu đề, liên kết văn bản, v.v.) và cập nhật màu. Đơn giản!

Để có ý tưởng về cách bạn có thể cấu trúc mục lục cho các tệp Sass của mình, hãy xem tệp cài đặt của Foundation.

 // Cài đặt nền tảng cho trang web // ----------------------------- // // Mục lục: // // 1 Toàn cầu // 2. Điểm dừng // 3. Lưới // 4. Kiểu chữ cơ sở // 5. Trình trợ giúp kiểu chữ Bản đồ // 1. Toàn cầu // --------- $ global-font-size: 100 %; $ toàn cầu-chiều rộng: rem-calc (1200); $ toàn cầu-lineheight: 1,5; // v.v

Một thực hành đặt tên khác liên quan đến điểm dừng đáp ứng. Khi đặt tên điểm dừng Sass, hãy cố gắng tránh các tên cụ thể của thiết bị. Tốt hơn là viết các tên như nhỏ, med, lg và xlg vì chúng liên quan đến nhau.

Điều này tốt hơn cho các mối quan hệ nội bộ giữa các điểm dừng, nhưng cũng tuyệt vời cho các nhóm nơi các nhà phát triển có thể không biết thiết bị nào liên quan đến nhau.

Đối với việc thực sự đặt tên, chúng tôi khuyên bạn nên càng cụ thể càng tốt mà không có các biến quá dài. Bạn nên thông qua các quy ước đặt tên trên toàn trang web dễ nhớ trong khi mã hóa.

Đưa ra các quy ước đặt tên cụ thể cho mọi thứ như màu sắc, lề, ngăn xếp phông chữ và chiều cao dòng. Những cái tên không chỉ có thể nhanh chóng được gọi lại mà còn làm cho công việc của bạn dễ dàng hơn khi viết tên biến mới cần khớp với cú pháp hiện có.

Nhưng có một ranh giới giữa độ đặc hiệu và tích chập. Thực hành sẽ giúp bạn tìm thấy dòng đó và viết tên dễ nhớ hơn giúp sao chép mã vào các dự án khác dễ dàng hơn.

Làm tổ và vòng

Hai kỹ thuật Sass này rất khác nhau trong hành động, nhưng cả hai đều có khả năng bị lạm dụng nếu không được sử dụng cẩn thận.

Làm tổ là quá trình thêm các bộ chọn lồng nhau với nhau thông qua thụt lề để tạo tính đặc hiệu hơn với ít mã hơn. Sass có một hướng dẫn lồng trong đó minh họa các ví dụ về mã lồng trong hành động. Nhưng thật dễ dàng để được mang đi với làm tổ. Nếu bạn quá nhiệt tình, bạn có thể kết thúc bằng mã giống như thế này:

body div.content div.container Khác body div.content div.container div.articles [ body div.content div.container div.articles> div.post canh 

Quá cụ thể và gần như không thể ghi đè, loại mã này đánh bại mục đích của các biểu định kiểu xếp tầng.

Đọc lướt hướng dẫn SitePoint này, bạn sẽ tìm thấy ba quy tắc vàng để lồng nhau:

• Không bao giờ đi quá 3 cấp độ sâu.
• Đảm bảo đầu ra CSS sạch và có thể tái sử dụng.
• Sử dụng lồng nhau khi nó có ý nghĩa, không phải là một tùy chọn mặc định.

Nhà phát triển Josh Broton đề xuất lồng nhau khi cần thiết, thụt lề phần còn lại làm quy tắc cú pháp chung.

Việc thụt lề bộ chọn của bạn sẽ không gây ra bất kỳ hiệu ứng CSS xếp tầng nào. Nhưng bạn sẽ có một thời gian dễ dàng hơn để lướt qua tệp Sass của bạn xác định chính xác các lớp liên quan đến nhau.

Vòng lặp cũng có thể bị lạm dụng nếu không được áp dụng đúng cách. Ba vòng Sass là @ cho, @trong khi, và @mỗi. Tôi sẽ không đi vào chi tiết về cách tất cả chúng hoạt động nhưng nếu bạn quan tâm hãy xem bài đăng này.

Thay vào đó tôi muốn che mục đích sử dụng các vòng lặp và cách chúng hoạt động trong Sass. Chúng nên được sử dụng để tiết kiệm thời gian viết mã có thể được tự động. Ví dụ: đây là đoạn mã từ bài đăng Clubmate hiển thị một số mã Sass theo sau là đầu ra:

/ * Mã Sass * / @for $ i từ 1 đến 8 $ width: trăm (1 / $ i) .col - # $ i width: $ width;  / * đầu ra * / .col-1 width: 100%; .col-2 width: 50%; .col-3 width: 33.333%; .col-4 width: 25%;  .col-5 width: 20%; .col-6 width: 16.666%; .col-7 width: 14.285%; .col-8 width: 12.5%;

Các lớp cột này có thể được sử dụng cùng với một hệ thống lưới. Bạn thậm chí có thể thêm nhiều cột hoặc xóa một số chỉ bằng cách chỉnh sửa mã vòng lặp.

Vòng lặp Nên không phải được sử dụng để nhân đôi bộ chọn hoặc thuộc tính cho bộ chọn; đó là những gì mixins dành cho.

Ngoài ra, khi lặp có một thứ gọi là bản đồ Sass lưu trữ khóa: cặp giá trị của dữ liệu. Người dùng nâng cao nên tận dụng những điều này bất cứ khi nào có thể.

Nhưng các vòng lặp Sass thông thường rất đơn giản và hiệu quả trong việc cung cấp đầu ra mã mà không lặp lại. Lý do tốt nhất để sử dụng các vòng lặp là với Thuộc tính CSS thay đổi dữ liệu đầu ra.

Đây là một cách tốt để kiểm tra xem vòng lặp của bạn có hữu ích không: hãy tự hỏi chính mình nếu có cách nào khác để xuất CSS bạn cần với ít dòng mã hơn. Nếu không thì cú pháp vòng lặp có lẽ là một ý tưởng tuyệt vời.

Nếu bạn đã từng bối rối hoặc muốn phản hồi về các vòng lặp lồng hoặc Sass, bạn nên đăng câu hỏi trong / r / sass / hoặc / r / css /, các cộng đồng Reddit đang hoạt động với các nhà phát triển Sass rất am hiểu.

Mô đun hóa

Việc thực hành viết Sass mô-đun là một điều cần thiết tuyệt đối cho hầu hết các dự án (tôi muốn tranh luận, mọi dự án). Modularization là quá trình chia nhỏ một dự án thành các mô-đun nhỏ hơn. Điều này có thể được thực hiện trong Sass bằng cách sử dụng hạt.

Ý tưởng đằng sau Sass mô-đun là viết các tệp SCSS riêng lẻ với mục đích cụ thể nhắm mục tiêu nội dung toàn cầu (kiểu chữ, lưới) hoặc các thành phần trang (tab, biểu mẫu).

Định nghĩa mô-đun Sass khá rõ ràng và đưa ra một gợi ý rất cụ thể: nhập mô-đun không bao giờ nên xuất mã.

Ý tưởng về đầu ra bắt buộc cho tất cả các mô-đun sẽ là một cơn ác mộng đối với việc tối ưu hóa. Thay vào đó, bạn nên tạo các mô-đun riêng lẻ và chỉ gọi những người bạn cần. Các mô-đun có thể được xác định bởi các mixin hoặc hàm, nhưng cũng có thể tạo các mô-đun có chứa bộ chọn.

Tuy nhiên, một bài viết của Sass Way đề nghị viết tất cả các bộ chọn là mixins và chỉ gọi chúng khi cần thiết. Cho dù bạn chấp nhận điều này hay không cuối cùng là sự lựa chọn của bạn. Tôi nghĩ rằng nó phụ thuộc vào quy mô của dự án và sự thoải mái của bạn với việc xử lý mixins.

Trích dẫn John Long từ bài đăng của mình trên The Sass Way:

“Đối với tôi, các mô-đun đã trở thành các đơn vị cơ bản hoặc khối xây dựng của các dự án Sass của tôi.”

Nếu bạn thực sự tìm kiếm một thói quen Sass, tôi khuyên bạn nên đi theo mô-đun đầy đủ. Hãy thử xây dựng hầu hết mọi thứ dưới dạng một phần mô-đun được đưa vào tệp CSS chính. Lúc đầu, quy trình làm việc này có vẻ khó khăn nhưng nó có ý nghĩa ở quy mô lớn hơn - đặc biệt là với các dự án lớn.

Thêm vào đó, việc sao chép các mô-đun từ dự án này sang dự án khác dễ dàng hơn nhiều khi chúng nằm trong các tệp riêng biệt. Mềm dẻo và mã tái sử dụng là nền tảng của sự phát triển mô-đun.

Để tìm hiểu thêm về các mô-đun Sass và kỹ thuật mô đun hóa, hãy xem các bài đăng sau:

• Mô-đun CSS: Chào mừng bạn đến tương lai
• Ưu và nhược điểm của Modass Sass
• Tổ chức CSS mô-đun với SMACSS & SASS

Tìm quy trình làm việc hoàn hảo của bạn

Mỗi nhóm và nhà phát triển cá nhân có các hoạt động riêng của họ hoạt động tốt nhất. Bạn nên áp dụng các thực tiễn phù hợp nhất với cá nhân bạn hoặc chọn áp dụng các phương pháp phù hợp nhất với nhóm của bạn một cách chuyên nghiệp.

Cũng xem xét sử dụng Gulp hoặc Grunt để tự động hóa dự án và giảm thiểu mã của bạn. Điều này sẽ tiết kiệm rất nhiều lao động thủ công và các công cụ tự động hóa bây giờ chắc chắn là một phần của các thực tiễn tốt nhất để phát triển lối vào hiện đại.

Lướt qua các thư viện nguồn mở như SCSS của Foundation trên GitHub để tìm hiểu thêm về các hoạt động tốt nhất được sử dụng bởi các thư viện khác.

Điều về thực hành tốt nhất là họ thực sự cải thiện công việc của bạn hầu hết thời gian, nhưng có nhiều lựa chọn thay thế. Chỉ cần thử mọi thứ và xem họ cảm thấy như thế nào. Bạn sẽ luôn học hỏi để những thực hành tốt nhất của bạn có thể thay đổi nhanh chóng trong suốt 5 năm.

Một đề nghị cuối cùng tôi có cho toàn bộ quá trình Sass là đưa ra quyết định với sự rõ ràng trong tâm trí. Viết mã giúp công việc của bạn dễ dàng hơn. Đừng quá phức tạp hóa một dự án nếu có cách đơn giản hơn để thực hiện.

Sass có nghĩa là để nâng cao trải nghiệm phát triển CSS, vì vậy làm việc với sự rõ ràng và thực hành tốt nhất để có được trải nghiệm tốt nhất có thể.

Gói lại

Sự tắc nghẽn trong quy trình làm việc Sass có thể được sửa chữa bằng cách điều chỉnh các kiểu mã và làm theo các thực tiễn tốt nhất. Tôi đã phác thảo một số gợi ý trong bài đăng này được đưa ra từ blog Sass và các nhà phát triển chuyên nghiệp.

Cách tốt nhất để tìm hiểu thêm là áp dụng các thực tiễn này vào quy trình làm việc của bạn và xem những gì hoạt động. Theo thời gian, bạn sẽ thấy rằng một số hoạt động có lợi hơn những hoạt động khác, trong trường hợp đó bạn nên giữ bất cứ thứ gì hoạt động và bỏ đi những gì không.

Kiểm tra các liên kết này để tìm thêm mẹo và thực tiễn tốt nhất để phát triển Sass:

• Hướng dẫn Sass
• Tầm nhìn cho Sass của chúng tôi
• 8 mẹo giúp bạn tận dụng tối đa Sass
• Mở rộng trong Sass mà không tạo ra một mớ hỗn độn
• Thực hành tốt nhất Sass - Làm tổ sâu hơn 3 cấp