Tại sao nên sử dụng LESS thay vì CSS?

Có ba bộ tiền xử lý CSS chính trên thị trường hiện nay, Sass, Less và Stylus. Trong bài đăng này, chúng tôi sẽ so sánh hai bộ tiền xử lý dường như được sử dụng rộng rãi nhất trong số các nhà phát triển, Sass vs Less. Bằng cách chuyển sang bộ tiền xử lý có thể giúp hợp lý hóa quy trình phát triển của bạn

Bộ tiền xử lý CSS là gì?

Viết CSS có thể trở thành những nhiệm vụ khá lặp đi lặp lại và nhỏ chẳng hạn như phải tra cứu các giá trị màu hex, đóng thẻ của bạn, v.v. có thể trở nên tốn thời gian. Và đó là nơi một bộ tiền xử lý phát huy tác dụng. Bộ tiền xử lý CSS về cơ bản là một ngôn ngữ kịch bản mở rộng CSS và sau đó biên dịch nó thành CSS thông thường

Ashley Nolan đã thăm dò ý kiến ​​của các nhà phát triển trong một nghiên cứu điển hình để xem họ ưa thích bộ tiền xử lý nào hơn. 689 người đã bình chọn cho Sass trong khi Ít hơn nhận được 140 phiếu bầu

Nguồn. Khảo sát năm 2015 từ Ashleynolan. đồng. Vương quốc Anh Tuyên bố miễn trừ trách nhiệm. đây chỉ là những phản hồi từ một phần nhỏ các nhà phát triển

Và nếu chúng ta xem Google Xu hướng cho "Sass" (ngôn ngữ lập trình) và "Less" (ngôn ngữ lập trình) thì có vẻ như có nhiều hoạt động hơn với Sass

Nguồn. xu hướng Google

Ưu điểm khi sử dụng bộ tiền xử lý

Khi bạn đã thành thạo CSS, có rất nhiều lợi thế khi sử dụng bộ tiền xử lý. Một trong những điều lớn nhất có lẽ là không phải lặp lại chính mình. Nói cách khác, nó làm cho CSS của bạn trở nên khô khan

Dưới đây là một số lợi thế khác

1. Mã sạch hơn với các phần và biến có thể tái sử dụng
2. Tiết kiệm thời gian cho bạn
3. Dễ dàng duy trì mã hơn với các đoạn mã và thư viện
4. Tính toán và logic
5. Có tổ chức hơn và dễ cài đặt

Sass vs ít hơn

Sass và Less đều là những tiện ích mở rộng CSS rất mạnh. Bạn có thể nghĩ về chúng giống như một ngôn ngữ lập trình được thiết kế để làm cho CSS dễ bảo trì hơn, dễ sử dụng hơn và có thể mở rộng hơn. Cả Sass và Less đều tương thích ngược nên bạn có thể dễ dàng chuyển đổi các tệp CSS hiện có của mình chỉ bằng cách đổi tên phần mở rộng tệp

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
    color: @light-blue;
}

1 thành

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
    color: @light-blue;
}

2 hoặc

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
    color: @light-blue;
}

3, tương ứng. Ít dựa trên JavaScript và Sass dựa trên Ruby

Cài đặt và thiết lập

Có một số cách để cài đặt và bắt đầu sử dụng bộ tiền xử lý. Bạn có thể sử dụng ứng dụng của bên thứ ba hoặc bạn có thể cài đặt nó từ dòng lệnh

Ứng dụng bên thứ ba

Nếu bạn chỉ đang chuyển đổi sang bộ tiền xử lý thì chúng tôi thực sự khuyên bạn nên sử dụng trình biên dịch của bên thứ ba vì điều này sẽ tăng tốc mọi thứ. Dưới đây là danh sách một số cái phổ biến hơn, được liệt kê không theo thứ tự cụ thể

Nguồn. chuẩn bị

CompilerSass languageLess languageMacWindowsCodeKitKoalaHammerLiveReloadPreprosScoutCrunch

Có lẽ bạn cảm thấy thoải mái hơn với CLI, vì vậy đây là cách cài đặt Sass và Ít hơn

ngổ ngáo

Để chạy Sass, bạn cần cài đặt Ruby. Trên các phiên bản Linux và OSX mới hơn, Ruby đã được cài đặt sẵn. Bạn có thể cài đặt Sass bằng lệnh sau.

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
    color: @light-blue;
}

4

Ngoài ra còn có các thư viện khác, chẳng hạn như libSass hiện đưa Sass lên NodeJS mà không cần Ruby

Trên Windows, trước tiên bạn cần cài đặt Ruby. Nếu bạn đang dùng Mac, Ruby đã được cài đặt sẵn

1. Mở thiết bị đầu cuối hoặc dấu nhắc lệnh của bạn
2. Cài đặt Sass bằng lệnh

   @nice-blue: #5B83AD;
   @light-blue: @nice-blue + #111;
   
   #header {
       color: @light-blue;
   }
   

   4

Ít hơn

Ít hơn được viết bằng JavaScript nên bạn sẽ cần NodeJS để chạy nó

1. Trên Linux và Mac, bạn có thể cài đặt nó bằng lệnh

   @nice-blue: #5B83AD;
   @light-blue: @nice-blue + #111;
   
   #header {
       color: @light-blue;
   }
   

   6
2. Sau đó, bạn có thể sử dụng lệnh

   @nice-blue: #5B83AD;
   @light-blue: @nice-blue + #111;
   
   #header {
       color: @light-blue;
   }
   

   7 để biên dịch thành CSS

Trên Windows, bạn sẽ cần cài đặt trình cài đặt NodeJS

1. Mở dấu nhắc lệnh của bạn
2. Chạy

   @nice-blue: #5B83AD;
   @light-blue: @nice-blue + #111;
   
   #header {
       color: @light-blue;
   }
   

   8
3. Sau đó, bạn có thể sử dụng lệnh

   @nice-blue: #5B83AD;
   @light-blue: @nice-blue + #111;
   
   #header {
       color: @light-blue;
   }
   

   7 để biên dịch thành CSS

Trình chỉnh sửa mã - Đánh dấu cú pháp

Sau khi bạn đã cài đặt mọi thứ, có thể bạn sẽ muốn thiết lập một plugin hoặc tiện ích mở rộng trong trình chỉnh sửa mã của mình để làm nổi bật cú pháp Sass hoặc Ít hơn với các màu phù hợp. Dưới đây là danh sách những cái phổ biến bên dưới, không theo thứ tự cụ thể

Nguồn. GitHub

Trình chỉnh sửa mãSassLessSublimeTextSass BundleLess-sublimeNotepad++Notepad-plus-plusLess-for-Notepad-plusplusVisualStudioSassyStudioCSS is LessTextMateSCSS. tmbundleLess. tmbundleEclipseNền tảng EclipseEclipse for Less

Ngoài ra còn có các khung bên thứ ba phổ biến khác mà bạn có thể sử dụng cùng với các bộ tiền xử lý, chẳng hạn như Bourbon

Biến

Với bộ tiền xử lý, bạn có lợi thế hơn so với CSS truyền thống vì bạn có thể sử dụng các biến. Bạn có thể lưu trữ những thứ như màu sắc, phông chữ hoặc bất kỳ giá trị nào bạn muốn sử dụng lại sau này. Xem các ví dụ bên dưới

Ví dụ về phông chữ Sass

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
    font: 100% $font-stack;
    color: $primary-color;
}

đầu ra CSS

body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

Ví dụ ít màu hơn

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
    color: @light-blue;
}

đầu ra CSS

#header {
    color: #6c94be;
}

hỗn hợp

Mixin được sử dụng để bao gồm một loạt các thuộc tính hoặc khai báo nhóm với nhau

Ví dụ bán kính đường viền Sass

Trong Sass, bạn sử dụng

#header {
    color: #6c94be;
}

0

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

.box {
    @include border-radius(10px);
}

đầu ra CSS

.box {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

Ví dụ thuộc tính ít đường viền hơn

.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu a {
    color: #111;
    .bordered;
}

.post a {
    color: red;
    .bordered;
}

đầu ra CSS

#menu a {
    color: #111;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

.post a {
    color: red;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

làm tổ

Nesting là một lợi thế rất lớn so với CSS vì nó tạo ra một hệ thống phân cấp trực quan, tương tự như những gì bạn đã quen với HTML. Trong các ví dụ, bạn có thể thấy lớp hoặc div cần ít sự lặp lại hơn như thế nào vì nó hiện đang theo cách tiếp cận theo tầng

ngổ ngáo

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li {
        display: inline-block;
    }

    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

đầu ra CSS

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
}

nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

Ít hơn

body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

0

đầu ra CSS

body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

1

Nhập khẩu

CSS tiêu chuẩn

#header {
    color: #6c94be;
}

1 cho phép bạn chia thành nhiều tệp. Vấn đề với điều này là nó tạo ra các yêu cầu HTTP bổ sung. Sass và Less làm việc hơi khác một chút. Thay vì tạo một yêu cầu HTTP khác, chúng kết hợp các tệp thành một. Tương tự như phép nối

ngổ ngáo

Giả sử bạn có một tệp tên là

#header {
    color: #6c94be;
}

2. Trong

#header {
    color: #6c94be;
}

3 của bạn, bạn có thể đưa nó lên đầu bằng cách sử dụng cách sau.

#header {
    color: #6c94be;
}

4 Không cần gia hạn

Ít hơn

body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

2

Gia hạn

Đây là một tính năng mạnh mẽ khác. Nó cho phép bạn chia sẻ các thuộc tính từ bộ chọn này sang bộ chọn khác

ngổ ngáo

Trong Sass, bạn sử dụng

#header {
    color: #6c94be;
}

5

body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

3

đầu ra CSS

body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

4

Ít hơn

Trong Ít bạn sử dụng

#header {
    color: #6c94be;
}

6

body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

5

đầu ra CSS

body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

6

hoạt động

Không giống như CSS, bạn có thể thực hiện tất cả các loại thao tác trong cả Sass và Less

Ví dụ tính toán lưới Sass

body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

7

đầu ra CSS

body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

8

Ví dụ căn bậc hai nhỏ hơn

body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

9

đầu ra CSS

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
    color: @light-blue;
}

0

Đó chỉ là một vài trong số những lợi ích bạn nhận được từ việc sử dụng bộ tiền xử lý. Hầu hết các ví dụ trên được lấy từ tài liệu chính thức của Sass and Less

Phát triển tích cực

Cả Sass và Less đều hoạt động khá tích cực trên GitHub, bạn có thể xem một số hoạt động gần đây bên dưới

Hoạt động GitHubSassÍt hơn# vấn đề đang mở138208# yêu cầu kéo đang chờ xử lý118# cam kết trong 30 ngày qua2912

Bản tóm tắt

Như bạn có thể thấy, các bộ tiền xử lý CSS rất mạnh và chúng có thể giúp hợp lý hóa quá trình phát triển của bạn, đặc biệt nếu bạn có nền tảng lập trình. Mặc dù có vẻ như Sass được sử dụng rộng rãi hơn, nhưng thực sự không có bộ tiền xử lý nào tốt hơn bộ tiền xử lý kia. Nó thường thuộc về nhà phát triển và những gì họ cảm thấy thoải mái khi sử dụng. Cả hai đều có các tiện ích mở rộng giàu tính năng có thể giúp CSS của bạn dễ bảo trì, dễ sử dụng và có thể mở rộng hơn

Lợi thế của LESS so với CSS là gì?

LESS có tốt hơn CSS không?

Tại sao mọi người sử dụng LESS và sass thay vì CSS?

Việc sử dụng LESS trong CSS là gì?