Nếu bạn là một lập trình viên Front end, Lập trình viên Web bạn sẽ biết CSS có thể rất thú vị. Trong Sass, bạn có thể sử dụng các toán tử khác nhau để thực hiện các thao tác như nối chuỗi, nối màu, v.v.

 

Sass string

Sass add string

SASS là viết tắt của từ Syntactively Awesome Style Sheets. SASS là ngôn ngữ kịch bản và bộ tiền xử lý CSS, biên dịch mã thành CSS để giúp bạn viết CSS nhanh hơn, dễ dàng hơn, thanh lịch hơn. SASS bổ sung các tính năng và công cụ mới trên CSS cơ bản giúp bạn sắp xếp CSS tối ưu hơn, dễ duy trì, sửa chữa hơn. Bằng cách mở rộng mã CSS, SASS làm cho các dự án lớn thân thiện hơn.   Sass add string

 

SASS hiểu đơn giản là bộ tiền xử lý CSS và có cú pháp cũ hơn sử dụng thụt lề để tổ chức và tách các khối code. Về cơ bản, nó cung cấp một cách viết CSS đơn giản hơn, mở rộng chức năng của CSS. Các tệp SASS sử dụng dạng đuôi mở rộng “.sass” . Nhìn chung, đây là những ưu điểm mà các lập trình viên đã xác nhận cho cả SCSS và SASS

Sau thời gian dài sử dụng khi các file CSS của bạn lớn hơn, chúng sẽ khó quản lý, bảo trì và sắp xếp hơn. Đó là lúc mà bộ tiền xử lý CSS như SASS xuất hiện để giúp bạn tiết kiệm thời gian quản lý kho theme wordpress hơn. SASS giúp cho các lập trình viên front-end nâng cao các kỹ năng với các tính năng độc đáo. SASS mở rộng khả năng của CSS. Hôm nay chúng ta sẽ cùng tìm hiểu, cùng tham khảo SASS như một người mới bắt đầu để bạn dần quen với công cụ viết CSS thực tế này.

Sass string replace

Bây giờ bạn có biết về một số tính năng của SASS có thể thay đổi level lập trình thiết kế web front-end của bạn. SASS string replace làm cho CSS của bạn đơn giản hơn, đáng tin cậy hơn và có tổ chức hơn. Trên hết, học SASS cũng không hề khó khi đã biết CSS. Sass string replace

Tên hàm Mô tả
quote($string) Thêm cặp quote bao quanh chuỗi $string
unquote($string) Xóa các cặp quote ra khỏi chuỗi $string
str-length($string) Trả về tổng số ký tự của chuỗi $string
str-insert($string,$insert,$index) Thêm chuỗi $insert vào chuỗi $string tại vị trí $index
str-index($string, $substring) Kiểm tra vị trí xuất hiện chuỗi $subtring trong chuỗi $string
str-slice($string,$start-at,[$end-at]) Cắt chuỗi bắt đầu từ $start-at và kết thúc tại $end-at, trường hợp không truyền $end-at thì nó lấy đến cuối chuỗi.
to-lower-case($string) Chuyển chuỗi $string sang chữ in thường
to-upper-case($string) Chuyển chuỗi $string sang chữ in hoa

Strings in Sass

CSS hỗ trợ các chuỗi trích dẫn kép và đơn, cũng như các chuỗi không trích dẫn như Georgia, serif hoặc sans-serif. Sass hỗ trợ cả ba và thường biên dịch thành cùng một loại dấu ngoặc kép hoặc thiếu dấu ngoặc kép trong CSS.

Strings in Sass

Ví dụ: bạn đang sử dụng biến sass để giữ kiểu chữ của dòng tiêu đề chính, được đặt trên h1 của bạn như sau:

[code type=css] h1 {font-family: $headline-typeface;}
[/code]

Sử dụng các chuỗi trích dẫn không trích dẫn, trích dẫn đơn và trích dẫn kép trong các biến thiết kế web chuẩn seo của bạn:

[code type=css] $headline-typeface: Lucida Grande;
$headline-typeface: ‘Lucida Grande’;
$headline-typeface: “Lucida Grande”;
[/code]

Sẽ biên dịch thành:

[code type=css] h1 { font-family: Lucida Grande; }
h1 { font-family: ‘Lucida Grande’; }
h1 { font-family: “Lucida Grande”; }
[/code]

Nói cách khác, bất kỳ loại trích dẫn nào (hoặc không có trích dẫn) bạn đã sử dụng trong sass  sẽ xuất hiện trong tệp CSS kết quả của bạn.

5/5 - (1 bình chọn)

Sass string - Các tính năng của SASS giành cho front end

Minh Hiếu

Nguyễn Minh Hiếu (Website: sieutocviet.net)

Với hơn 3 năm kinh nghiệm Python / PHP / CSS / JS / WORDPRESS, 5 năm kinh nghiệm trong quản trị website tư vấn giải pháp SEO từ khóa, Marketing tối ưu nhất cho doanh nghiệp. Chuyên viên tư vấn sản phẩm: Hosting, Email doanh nghiệp, VPS, App web design.

Hiện đang là trưởng phòng kinh doanh tại Siêu Tốc Việt.