CSS Preprocessor là gì ? Ứng dụng như thế nào ?

CSS Preprocessor là gì ? Ứng dụng như thế nào ?

một trong 3 ngôn ngữ quan trọng trọng để hình thành nên 1 trang web tĩnh đó là: HTML, CSS, JAVASCIPT. Theo mình CSS đóng vai trò quan trọng nhất trong website, Theo bạn điều quan trong nhất khi một người không chuyên hay một khách hàng nhìn vào web site của bạn đó là gì ?. Theo mình đó là đẹp và website muốn đẹp cần phải có một giao diện đầy đủ như có màu sắc, được chia cột rõ ràng,…Thật không oan uổng khi nói rằng CSS chiếm hết 70% yếu tố giúp website bạn có đẹp hay không.
Nếu bạn đã từng lập trình bất kỳ một ngôn ngữ nào thì bạn sẽ cảm thấy rất là nhàm chán thao tác lặp đi lặp lại rất nhạt nhẽo và rất khó quản lý và quá nhiều khai báo dư thừa. Bạn muốn làm việc với css một chuyên nghiệp hơn, rõ ràng hơn, dễ quản lý hơn giống như khi bạn dùng các ngôn ngữ lập trình chuyên nghiệp như PHP, .NET, JAVA …. Chính vì thế mà CSS Preprocessor ra đời để đáp ứng các nhu cầu đó của bạn.

CSS Preprocessor là gì ?

CSS Preprocessor là các phiên bản mở rộng của ngôn ngữ CSS (ngôn ngữ tiền xử lý CSS) được viết xử lý trước sau đó sẽ biên dịch ra các đoạn mã CSS thông thường. Nhiệm vụ của các CSS Preprocessor là giúp bạn logic hóa và cấu trúc các đoạn mã CSS, từ đó đưa CSS trở nên gần hơn với 1 ngôn ngữ lập trình. Bạn có thể viết CSS theo thứ tự rõ ràng, quản lý các biến đã được định nghĩa sẵn, có thể tự động nén tập tin CSS lại để bạn tiết kiệm dung lượng. Hiện tại có thể có rất nhiều CSS Preprocessor nhưng có phỗ biến nhất trong số đó là SASS, LESS và Stylus.

Lợi ích của của CSS Preprocessor là gì?

• Tiết kiệm thời gian
• Dễ bảo trì, phát  triển
• Sử dụng lại các đoạn mã CSS

CSS Preprocessor sử dụng như thế nào

Bạn cần có lựa chọn cho mình 1 CSS Preprocessor phù hợp để lập trình, CSS Preprocessor hiện nay có rất nhiều như Less, Sass, Stylus, Turbine, Switch CSS, Myth…, nhưng điển hình trong đó và phổ biến nhất là Less và Sass.

Nhưng trình duyệt chỉ nhận CSS để chạy nên muốn dùng được các ngôn ngữ CSS Preprocessor thì các bạn phải dùng 1 bên thứ 3 để thông dịch chúng sang mã CSS. Tuỳ từng loại CSS Preprocessor mà có cách thông dịch khác nhau ví dụ như Less có thể chạy trực tiếp trên trình duyệt thông qua các trình thông dịch javascript, tuy nhiên điều này sẽ làm website của bạn chạy chậm hơn bình thường do mỗi lần chạy lại mất công compile CSS. Sass thì phải compile ra CSS mới có thể sử dụng trên trình duyệt, hiện chưa có compiler client side chính thức từ tác giả. Vì vậy khuyến cáo chung của tôi là compile toàn bộ ra CSS trước khi sử dụng.

CSS Preprocessor có gì ?

Sử dụng biến trong CSS Preprocessor  (Varibles)

Nếu các bạn đã từn sử dụng một ngôn ngữ lậo trình cao cấp  nào đó như javascript, PHP,… thì khái niệm biến có lẽ không có gì là xa lạ cả. Việc sử dụng biến cho phép giá trị được khai báo có thể sử dụng đi sử dụng lại nhiều lần

Ví dụ: khi bạn bạn có một cỡ font (font-size) bạn muốn quy định cho một số đoạn văn bản đặc biệt nào đó. thì chỉ cần gán nó cho một biến và khi muốn sử dụng lại bạn chỉ cần gọi tên biên đó ra là được và dĩ nhiên khi bạn muốn thay đổi kích cỡ đồng loạt cho các font chữ đặc biệt đó thì bạn chỉ cần thay đổi giá trị trong biến đó là được

Các biến trong SASS bắt đầu với ký hiệu $, ký hiệu LESS @ và không có tiền tố trong Stylus. Cả hai trong SASS và LESS, giá trị được gán với dấu hai chấm (:), và bằng dấu bằng (=) trong Stylus.

$font-size: 16px;
div {
font-size: $font-size;
}

@font-size: 16px;
div {
font-size: @font-size;
}

font-size = 16px
div
font-size font-size

div {
 font-size: 16px;
 }

Quy tắc xếp chồng (Nested Rules)

Nếu bạn đã từng lập trừng các ngôn ngữ có cấu trúc lệnh như javascript, PHP, .NET… thì chắc chắn sẽ biết đến câu lệnh lồng.

Nó quy định thức bậc của phần tử cha so với phần tử con. Tăng tính hiển thị rõ ràng trong việc viết code và quản lý CSS.

$link-color: #3b5998;
$link-hover: #f90202;
ul {
    margin: 0;
    li { float: left; } 
    a {
        color: $link-color;
        &:hover { color: $link-hover; } 
    }
}

@link-color: #999; 
@link-hover: #229ed3; 
ul { 
    margin: 0; 
    li { float: left; } 
    a { 
        color: @link-color; 
        &:hover { color: @link-hover; } 
    } 
}

link-color = #999 
link-hover = #229ed3 
ul 
    margin 0 
    li 
        float left 
    a 
        color link-color 
    &:hover 
        color link-hover

ul {
    margin: 0;
}

ul li {
    float: left;
}

ul a {
    color: #999;
}

ul a:hover {
    color: #229ed3;
}

Hàm trong CSS Preprocessor (Mixins)

Mixin có công dụng giống như bạn khai báo hàm trong các ngôn ngữ lập trình.

Ví dụ: Ngôn ngữ php

function ten_ham($giatri_1, $gia_tri2){
$var bien_1 = $giatri_1;
$var bien_2 = $giatri_2;
}

Khi bạn có 1 đoạn CSS với nhiều thuộc tính(margin, padding, float, font-size….) tuy nhiên bạn muôn dùng đoạn CSS đó với giá trị của các thuộc tính là thay đổi so với đoạn CSS trước đó nhưng cấu trúc về các thuộc tính (số lượng thuộc tính) vẫn được giữ nguyên thì Mixin trong CSS Preprocessor sẽ giúp bạn làm điều đó. Thông qua việc truyền các tham số vào trong Mixin bạn có thể thay đổi giá trị của các thuộc tính trong đoạn css mà bạn đã quy định.

Cách tạo và sử dụng được mô tả như trong ví dụ sau

@mixin bordered($width) {
    border: $width solid #ddd;
    &:hover {
        border-color: #999;
    }
}

h1 {
    @include bordered(5px);
}

bordered (@width) {
    border: @width solid #ddd;
    &:hover {
        border-color: #999;
    }
}

h1 {
    .bordered(5px);
}

bordered(w) 
border: 
    w solid #ddd 
    &:hover border-color: #999 
    h1 bordered(5px)

h1 {
    border: 5px solid #ddd;
}

h1:hover {
    border-color: #999;
}

 Tính kế thừa trong CSS Preprocessor (Extends)

Đây là một ứng dụng rất hữu ích CSS Preprocessor. Ví dụ như bạn có 1 class đã được khai báo trước đó bây giờ bạn muốn dùng lại tất cả css của class đó cho class mới và mở rộng hơn (thêm nhiều thuộc tính hơn cho class mới) thì Extends sẽ giúp bạn làm điều này.

.block {
    margin: 10px 5px;
}

p {
    @extend .block;
    border: 1px solid #eee;
}

ul,
ol {
    @extend .block;
    color: #333;
    text-transform: uppercase;
}

.block {
    margin: 10px 5px;
}

p {
    &:extend(.block);
    border: 1px solid #eee;
}

ul,
ol {
    &:extend(.block);
    color: #333;
    text-transform: uppercase;
}

bordered(w) 
border: 
    w solid #ddd 
    &:hover border-color: #999 
    h1 bordered(5px)

.block,
p,
ul,
ol {
    margin: 10px 5px;
}

p {
    border: 1px solid #eee;
}

ul,
ol {
    color: #333;
    text-transform: uppercase;
}

Hệ thống màu sắc trong CSS Preprocessor (Color Operations)

Trong CSS Preprocessor Hỗ trợ hệ thống màu sắc để hiển thị. như làm màu sáng hơn so với màu hiện tại hay trộn nhiều màu sắc với nhau… Tùy vào từng bộ khác nhau CSS Preprocessor mà có hỗ trợ là khác nhau.Tuy rằng tính năng này không thực sự hữu ích nhưng có vẫn hơn không đúng không nào.

saturate($color, $amount)
desaturate($color, $amount)
lighten($color, $amount)
darken($color, $amount)
adjust-hue($color, $amount)
opacify($color, $amount)
transparentize($color, $amount)
mix($color1, $color2[, $amount])
grayscale($color)
complement($color)

saturate(@color, @amount)
desaturate(@color, @amount)
lighten(@color, @amount)
darken(@color, @amount)
fadein(@color, @amount)
fadeout(@color, @amount)
fade(@color, @amount)
spin(@color, @amount)
mix(@color1, @color2, @weight)
grayscale(@color)
contrast(@color)

red(color)
green(color)
blue(color)
alpha(color)
dark(color)
light(color)
hue(color)
saturation(color)
lightness(color)

Imports (Liên kết ngoài)

Khi  file CSS Preprocessor quá dài việc theo dõi và chỉnh sửa trở lên khó khăn. bạn muốn chua ra thành nhiều file nhỏ hơn để dễ quản lý. tính năng Imports sẽ giúp bạn nhúng các file đó vào 1 file cho bạn tiện theo dõi

@import "library";
@import "mixins/mixin.scss";
@import "reset.css";

@import "library"
@import "mixins/mixin.less"
@import "reset.css"

@import "library"
@import "mixins/mixin.styl"
@import "reset.css

đang cập nhật.....