Chọn bộ tiền xử lý CSS. Bộ tiền xử lý CSS và lợi ích của việc sử dụng chúng
Bài viết NetTuts+ được viết bởi Johnathan Croom vào năm 2012.
Mục tiêu chính của bài viết là chỉ ra lợi ích của việc sử dụng bất kỳ bộ tiền xử lý nào trong số ba bộ tiền xử lý được mô tả trong đó: Sass, LESS và Stylus. Bài đánh giá này hoàn hảo cho những người mới bắt đầu khám phá khía cạnh này của thiết kế web.
Trong bài viết này, chúng ta sẽ xem xét những ưu điểm và lợi ích của việc sử dụng ba bộ tiền xử lý khác nhau - Sass, LESS và Stylus.
Giới thiệuBộ tiền xử lý CSS được tạo ra với một mục tiêu: tăng thêm sức mạnh và tính linh hoạt cho các biểu định kiểu CSS mà không phá vỡ khả năng tương thích giữa nhiều trình duyệt. Tất cả các bộ tiền xử lý biên dịch mã được tạo bằng cú pháp của chúng thành mã CSS tiêu chuẩn mà bất kỳ trình duyệt nào, dù cổ xưa đến đâu, cũng có thể hiểu và sử dụng ( trình duyệt) không phải.
Có rất nhiều lợi ích mà bộ tiền xử lý mang lại cho các bảng định kiểu CSS và trong bài viết này chúng ta sẽ chỉ xem xét một vài lợi ích trong số đó, cả những lợi ích được biết đến và ít phổ biến hơn. Hãy bắt đầu với việc xem xét.
Cú phápPhần quan trọng nhất khi viết mã bằng bất kỳ bộ tiền xử lý CSS nào là cú pháp của nó. Thật may mắn cho chúng ta, cú pháp của cả ba bộ tiền xử lý mà chúng ta sẽ xem xét đều giống CSS.
SASS & ÍTCả hai bộ tiền xử lý Sass và LESS đều có cú pháp CSS tiêu chuẩn. Điều này làm cho nhiệm vụ chuyển đổi mã CSS hiện có thành cú pháp của bất kỳ bộ tiền xử lý nào trở nên đơn giản và nhanh chóng. Sass sử dụng phần mở rộng cho các tập tin của nó
| 1 | .scss |
| 1 | .ít hơn |
Một tệp điển hình theo cú pháp Sass hoặc LESS được hiển thị bên dưới:
/* style.scss hoặc style.less */ h1 ( color : #0982c1 ; )Bạn có thể thấy rõ đây là cú pháp CSS bình thường, chuyển đổi hoàn hảo sang Sass (SCSS) hoặc LESS.
Điều quan trọng cần lưu ý là Sass (SCSS) cũng có phiên bản cú pháp Sass cũ hơn, bỏ qua dấu chấm phẩy và dấu ngoặc nhọn.
Mặc dù cú pháp này vẫn có thể được sử dụng trong thực tế nhưng nó đã lỗi thời và chúng tôi sẽ không sử dụng nó trong các ví dụ của mình.
Cú pháp Sass ( phiên bản cũ) như sau:
/* style.sass */ h1 màu : 0982c1 Bút cảm ứngĐối với các tập tin của nó, bộ tiền xử lý này sử dụng phần mở rộng
| 1 | .phong cách |
Ví dụ cú pháp bút stylus:
/* Cú pháp giống CSS */ h1 ( color : #0982C1 ; ) /* bỏ dấu ngoặc nhọn */ h1 color : #0982C1 ; /* bỏ qua dấu ngoặc nhọn, dấu hai chấm và dấu chấm phẩy */ h1 color #0982C1Tất cả các tùy chọn cú pháp hiển thị ở trên đều hợp lệ và sẽ mang lại mã CSS chính xác khi biên dịch. Ví dụ: mã này sẽ biên dịch thành CSS tiêu chuẩn mà không có lỗi:
h1 ( color #0982c1 ) h2 cỡ chữ : 1 .2em BiếnTrong bộ tiền xử lý, các biến được khai báo và sử dụng trong các tệp kiểu CSS. Các biến có thể nhận bất kỳ giá trị nào được cho phép trong CSS (màu sắc, số hoặc văn bản) và có thể được tham chiếu từ bất kỳ đâu trong tài liệu CSS.
SassTrong bộ tiền xử lý Sass, một biến được khai báo bằng ký hiệu
| 1 | $ |
Các biến trong LESS giống hệt như trong Sass, ngoại trừ tên biến được đặt trước bởi một ký hiệu
| 1 | @ |
Các biến trong Stylus không cần bất kỳ dấu nào để khai báo mà vẫn có thể sử dụng ký hiệu
, nhưng khi biến này được gọi trong mã, giá trị của biến không được thay thế.Nói cách khác, thao tác sau không được thực hiện:
mainColor = #0982c1 siteWidth = 1024px $ borderStyle = màu thân chấm mainColor border 1px $ borderStyle mainColor max-width siteWidth CSS được biên dịchMỗi tệp ví dụ được biên dịch thành cùng một mã CSS. Bạn có thể sử dụng trí tưởng tượng của mình để tưởng tượng các biến số có thể hữu ích như thế nào.
Nhờ chúng, bạn không cần phải đặt giá trị màu và sau đó lặp lại giá trị đó 20 lần trong mã CSS. Hoặc nhiệm vụ là thay đổi độ rộng của trang web và để làm được điều này, bạn cần phải “lục lọi” qua mã để tìm kiếm giá trị này.
Dưới đây là mã CSS sau khi biên dịch:
phần thân ( color : #0982c1 ; border : 1px chấm #0982c1 ; max-width : 1024px ; )Nếu mã CSS của bạn được giao nhiệm vụ truy cập nhiều phần tử có cùng phần tử gốc cùng một lúc, thì việc viết đi viết lại phần tử gốc đó thật tẻ nhạt.
Ví dụ như thế này:
Thay vào đó, bằng cách sử dụng sức mạnh của bộ tiền xử lý, chúng ta có thể đặt tất cả các bộ chọn con bên trong dấu ngoặc đơn của phần tử cha. Ngoài ra, biểu tượng
| 1 | & |
Cả ba bộ tiền xử lý đều có cú pháp giống hệt nhau cho các bộ chọn lồng nhau:
phần ( lề : 10px ; điều hướng ( chiều cao : 25px ; a ( color : #0982C1 ; &:hover ( text-trang trí : gạch chân ; ) ) ) ) CSS đã biên dịchDưới đây là đầu ra CSS được biên dịch của mã ở trên. So sánh với mã mà chúng tôi đã viết lúc đầu - hoàn toàn giống nhau. Nhưng thật tiện lợi khi tận dụng được bộ tiền xử lý!
phần ( lề : 10px ; ) điều hướng phần ( chiều cao : 25px ; ) điều hướng phần a ( color : #0982C1 ; ) điều hướng phần a :hover ( text-trang trí : gạch dưới ; ) mixins| 1 | mixin |
Việc sử dụng mixin đặc biệt đáng giá khi tạo kiểu cụ thể cho các thành phần hoặc đặt tiền tố trình duyệt. Khi một mixin được gọi bên trong bộ chọn CSS, các đối số của mixin đó sẽ được phân tích cú pháp, sau đó kiểu của nó sẽ được áp dụng cho bộ chọn đã gọi nó.
Ghi chú trình dịch: trong các ví dụ bên dưới, cần chú ý đến sự khác biệt trong cú pháp khai báo và gọi một mixin bên trong bộ chọn CSS cho cả ba bộ tiền xử lý.
Sass /* Sass mixin có tên lỗi với đối số $borderWidth có giá trị mặc định là 2px */ @mixin error ($ borderWidth : 2px ) ( border : $ borderWidth Solid #F00 ; color : #F00 ; ) .generic-error ( đệm : 20px ; lề : 4px ; @include error(); .login-error ( left : 12px ; location : tuyệt đối ; top : 20px ; @include error(5px); ) LESS /* LESS lỗi có tên mixin với đối số $borderWidth, mặc định to 2px */ .error (@borderWidth : 2px ) ( border : @ borderWidth Solid #F00 ; color : #F00 ; ) .generic-error ( đệm : 20px ; lề : 4px ; .error( ); /* Kết nối một mixin lỗi được đặt tên */ ) .login-error ( left : 12px ; vị trí : tuyệt đối ; top : 20px ; .error(5px); /* Kết nối một lỗi có tên mixin với giá trị của đối số $borderWidth bằng 5px ; nghĩa là, giá trị của đối số bị ghi đè */ ) Lỗi đặt tên kiểu /* Stylus mixin với đối số $borderWidth, có giá trị mặc định là 2px */ error (borderWidth = 2px ) ( border : borderWidth Solid #F00 ; màu : #F00 ; ) .generic-error ( đệm : 20px ; lề : 4px ; error(); /* Kết nối một mixin có tên error */ ) .login-error ( left : 12px ; location : tuyệt đối ; top : 20px ; error(5px); /* Một lỗi được gọi là mixin được kết nối với giá trị của đối số $borderWidth bằng 5px; nghĩa là giá trị của đối số bị ghi đè */ ) CSS được biên dịchKết quả biên dịch từ cả ba bộ tiền xử lý sẽ có cùng một mã CSS:
.generic-error ( đệm : 20px ; lề : 4px ; đường viền : 2px rắn #f00 ; màu : #f00 ; ) .lỗi đăng nhập ( trái : 12px ; vị trí : tuyệt đối ; trên cùng : 20px ; đường viền : 5px rắn #f00 ; màu : #f00 ) Kế thừaKhi viết các kiểu CSS theo cách “cổ điển”, để áp dụng các thuộc tính giống nhau cho nhiều thành phần trong tài liệu HTML, chúng ta sẽ tạo mã như sau:
p , ul , ol ( /* một số kiểu ở đây */ )Mọi thứ đều hoạt động tuyệt vời. Nhưng nếu bạn cần viết kiểu riêng cho bất kỳ bộ chọn nào trong số này, bạn sẽ cần tạo các quy tắc riêng cho từng bộ chọn. Và ngay lập tức mã stylesheet trở nên cẩu thả và khó bảo trì.
Ngược lại với điều này, kế thừa được áp dụng. Kế thừa là khả năng một số bộ chọn CSS kế thừa các thuộc tính từ bộ chọn khác.
Ghi chú trình dịch: lưu ý cú pháp tương tự để kết nối (khai báo) kế thừa bên trong bộ chọn CSS bằng cách sử dụng lệnh
| 1 | @mở rộng |
Bộ tiền xử lý LESS không hỗ trợ đầy đủ tính kế thừa giống như Sass hoặc Stylus. Thay vì thêm nhiều bộ chọn vào một tập thuộc tính, tính kế thừa được coi là một mixin không có đối số.
Kiểu được nhập cho mỗi bộ chọn. Nhược điểm của phương pháp này là sự lặp lại liên tục của các dòng thuộc tính theo kiểu CSS được biên dịch.
Đây là mã LESS có tính kế thừa có thể trông như thế nào:
.block ( lề : 10px 5px ; phần đệm : 2px ; ) p ( .block; border : 1px solid #EEE ; ) ul , ol ( .block; /* Kế thừa các thuộc tính từ lớp selector.block */ color : #333 ; text -transform : chữ hoa ; ) CSS đã biên dịch .block ( lề : 10px 5px ; đệm : 2px ; ) p ( lề : 10px 5px ; đệm : 2px ; viền : 1px rắn #EEE ; ) ul , ol ( lề : 10px 5px ; phần đệm: 2px; màu sắc: #333;Như bạn có thể thấy rõ từ mã, kiểu lớp
. Nhập khẩuTrong cộng đồng CSS để nhập kiểu bằng lệnh
| 1 | @nhập khẩu |
Trong bất kỳ bộ tiền xử lý nào trong số ba bộ tiền xử lý, việc nhập một tệp vào trong một tệp khác sẽ chèn mã từ tệp này sang tệp kia một cách hiệu quả khi được biên dịch, dẫn đến một tệp CSS duy nhất.
Ghi chú người dịch: nói cách khác, trong bộ tiền xử lý, việc nhập là cần thiết để biên dịch một tệp từ nhiều tệp. Trong CSS tiêu chuẩn, việc nhập sẽ dẫn đến việc thay thế một mã này vào một mã khác.
Xin lưu ý rằng khi biên dịch tệp có kết nối tiêu chuẩn bằng lệnh
| 1 | @import "file.css" |
Các hàm “Color” được thiết kế để chuyển đổi màu sắc trong quá trình biên dịch. Những chức năng như vậy cực kỳ hữu ích khi tạo độ dốc, làm tối màu khi
| 1 | bay lượn |
Đoạn mã trên chỉ là một danh sách ngắn các tính năng màu trong Sass. Danh sách đầy đủ tất cả các chức năng có sẵn có tại Tài liệu Sass.
Bạn có thể sử dụng chức năng “Màu sắc” ở bất cứ nơi nào bạn cần để làm việc với màu sắc trong mã. Một ví dụ đơn giản - một biến có màu được khai báo, chức năng làm mờ màu sẽ được áp dụng sau trong mã
| 1 | làm tối đi |
Bạn có thể tìm thấy danh sách các hàm tiền xử lý LESS trên trang web chính thức của dự án Tài liệu LESS.
Dưới đây là một ví dụ về cách sử dụng các hàm “color” trong LESS:
@color : #0982C1 ; h1 ( nền : @ color ; đường viền : 3px làm tối đặc (@ color , 50% ); ) Làm sáng bút stylus (@color , 10% ); /* trả về màu nhạt hơn 10% so với $color */ tối hơn (@color , 10% ); /* trả về màu đậm hơn 10% so với $color */ bão hòa (@color , 10% ); /* trả về màu bão hòa hơn 10% so với $color */ desaturate (@color , 10% ); /* trả về màu ít bão hòa hơn 10% so với $color */Danh sách đầy đủ tất cả các chức năng màu của bộ tiền xử lý Stylus được trình bày trên trang web của dự án Tài liệu Stylus.
Và một ví dụ sử dụng chức năng “color” trong Stylus:
color = #0982C1 h1 màu nền viền 3px đậm đặc (color , 50%)Nhờ các bộ tiền xử lý, việc thực hiện các phép tính số học bên trong mã CSS giờ đây trở nên đơn giản và dễ dàng. Tính năng này thường hữu ích.
Ghi chú người dịch: điều đáng nói là hàm từ CSS3 có tên
| 1 | calc() |
Vì vậy, chúng tôi đã xem xét những điểm chính về những gì cả ba bộ tiền xử lý có thể làm và cách thức thực hiện. Tuy nhiên, chúng ta vẫn chưa đề cập đến ứng dụng thực tế của những khả năng này. Dưới đây là danh sách các ứng dụng web thực sự sử dụng bộ tiền xử lý, cải thiện đáng kể toàn bộ mã.
Tiền tố trình duyệtMột trong những ví dụ nổi bật nhất về lợi ích của việc sử dụng bộ tiền xử lý là viết các thuộc tính với tiền tố trình duyệt bằng cách sử dụng chúng. Khi chúng tôi tạo một mixin hỗ trợ tiền tố trình duyệt, chúng tôi sẽ tránh khỏi công việc thường ngày.
Ví dụ: hãy tạo một mixin làm tròn góc khối cho cả ba bộ tiền xử lý:
Sass @mixin bán kính đường viền ($ value ) ( -webkit-border-radius : $ value ; -moz-border-radius : $ value ; border-radius : $ value ; ) div ( @ bao gồm bán kính đường viền (10px); ) LESS .bán kính đường viền (@values ) ( -webkit-border-radius : @ value ; -moz-border-radius : @ value ; bán kính đường viền : @ giá trị ; ) div ( .border-radius(10px); ) Bán kính đường viền bút stylus (giá trị) ( -webkit-border-radius : giá trị ; -moz-border-radius : giá trị ; bán kính đường viền : value ; ) div ( border-radius(10px); ) CSS div đã biên dịch ( -webkit- border-radius : 10px ; -moz-border-radius : 10px ; border-radius : 10px ) Văn bản 3DTạo hiệu ứng 3D cho văn bản bằng thuộc tính CSS
| 1 | bóng văn bản |
Bằng cách sử dụng các hàm mixin và màu sắc, chúng ta có thể tạo văn bản 3D và thay đổi màu của nó một cách nhanh chóng:
Sass @mixin text3d ($color) ( color: $color; text-shadow: 1px 1px 0px làm tối ($color, 5%), 2px 2px 0px làm tối ($color, 10%), 3px 3px 0px làm tối ($color, 15% ), 4px 4px 0px làm tối ( $ color , 20% ), 4px 4px 2px #000 ) h1 ( font-size : 32pt ; @include text3d(#0982c1); ) LESS .text3d (@color ) ( color : @ color ; bóng văn bản : 1px 1px 0px làm tối (@ color , 5% ), 2px 2px 0px làm tối (@ color , 10% ), 3px 3px 0px làm tối (@ color , 15% ), 4px 4px 0px làm tối (@ color , 20% ), 4px 4px 2px #000 ; ) span ( font-size : 32pt ; .text3d(#0982c1); ) Stylus text3d (color ) color : color text-shadow : 1px 1px 0px làm tối (color , 5%) , 2px 2px 0px làm tối (màu, 10%), 3px 3px 0px làm tối (màu, 15%), 4px 4px 0px làm tối (màu, 20%), 4px 4px 2px #000 span cỡ chữ: 32pt text3d (#0982c1)Trong ví dụ về Stylus, tôi đã chọn tùy chọn viết thuộc tính
| 1 | bóng văn bản |
Tôi nghĩ đến việc sử dụng các biến và giá trị số cho các biến này khi lần đầu tiên tôi bắt đầu làm quen với khả năng của bộ tiền xử lý CSS. Việc khai báo độ rộng cho bố cục bên trong một biến khiến nhiệm vụ thay đổi độ rộng đó ( Nếu cần) đơn giản và nhanh chóng:
Sass $siteWidth: 1024px; $gutterWidth: 20px; $sidebarWidth: 300px; body (margin: 0 auto; width: $siteWidth;).content(float:left;width:$siteWidth - ($sidebarWidth +$gutterWidth);).sidebar(float:left;margin-left:$gutterWidth;width: $sidebarWidth ; ) LESS @siteWidth : 1024px ; @gutterWidth : 20px ; @sidebarWidth : 300px ; body (lề: 0 tự động; chiều rộng: @siteWidth;).content(float:left;width:@siteWidth - (@sidebarWidth +@gutterWidth);).sidebar(float:left;margin-left:@gutterWidth;width: @sidebarWidth ; ) Trang web bút stylusWidth = 1024px ; gutterWidth = 20px; sidebarWidth = 300px; body ( lề : 0 tự động ; chiều rộng : siteWidth ; .content ( float : left ; width : siteWidth - (sidebarWidth + gutterWidth ); ) .sidebar ( float : left ; Margin-left : gutterWidth ; width : sidebarWidth ; ) Nội dung CSS đã biên dịch ( lề : 0 auto ; chiều rộng : 1024px ; ) .content ( float : left ; width : 704px ; ) .sidebar ( float : left ; Margin-left : 20px ; width : 300px ; ) Một số thủ thuật tiền xử lýCó một số thủ thuật khi làm việc với bộ tiền xử lý CSS. Trong bài viết này tôi sẽ chỉ nói về một số trong số họ. Nhưng nếu chủ đề này làm bạn quan tâm, tôi khuyên bạn nên đọc kỹ tài liệu chính thức hoặc thậm chí tốt hơn, chỉ cần bắt đầu sử dụng bộ tiền xử lý hàng ngày khi bạn viết mã.
Thông báo lỗiNếu bạn đã viết mã CSS trong một thời gian dài, chắc chắn bạn đã gặp phải tình huống lỗi len lỏi vào mã mà bạn không thể tìm thấy. Nếu bạn rơi vào tình huống tương tự, thì tôi có thể vui mừng vì bạn - có một cách để giải quyết vấn đề như vậy.
Bộ tiền xử lý CSS có thể báo cáo lỗi trong mã và khiến chúng thực hiện việc đó khá dễ dàng. Trong trường hợp này, chính bộ tiền xử lý sẽ cho bạn biết lỗi nằm ở đâu trong mã CSS ( và mọi người đều hạnh phúc).
Nếu bạn quan tâm đến tính năng tương tự trong cả ba bộ tiền xử lý thì bài viết này mô tả chi tiết cách thực hiện thiết lập này.
Quá trình viết HTML và CSS có thể hơi phức tạp và đòi hỏi lặp đi lặp lại nhiều tác vụ giống nhau. Các tác vụ như đóng thẻ trong HTML hay đơn điệu duyệt qua các giá trị màu thập lục phân trong CSS.
Những nhiệm vụ khác nhau như vậy thường nhỏ và làm giảm hiệu quả một chút. May mắn thay, những điều này và một số điểm kém hiệu quả khác đã được các bộ tiền xử lý nhận ra và thách thức.
Bộ tiền xử lý là một chương trình lấy một kiểu dữ liệu và chuyển đổi nó thành một kiểu dữ liệu khác. Trong trường hợp HTML và CSS, một số ngôn ngữ tiền xử lý phổ biến nhất là Haml và Sass. Haml được chuyển đổi sang HTML và Sass được chuyển đổi sang CSS.
Kể từ khi thành lập, trong khi giải quyết một số vấn đề phổ biến nhất, Haml và Sass đã tìm ra nhiều cách bổ sung để mở rộng khả năng của HTML và CSS. Không chỉ bằng cách loại bỏ các nhiệm vụ không hiệu quả mà còn bằng cách tạo ra các phương pháp giúp việc phát triển trang web trở nên dễ dàng và logic hơn. Bộ tiền xử lý cũng đã trở nên phổ biến do có nhiều khung công tác hỗ trợ chúng; một trong những phổ biến nhất là La bàn.
HamlCodeKit cũng hỗ trợ các bộ tiền xử lý khác mà bạn có thể thấy hữu ích.
loại tài liệuPhần đầu tiên của việc viết tài liệu bằng Haml là biết nên sử dụng loại tài liệu nào. Khi làm việc với tài liệu HTML, loại tài liệu chính sẽ là HTML5. Trong Haml, các loại tài liệu được xác định bằng ba dấu chấm than (!!!), theo sau là một nội dung cụ thể nếu cần.
Loại tài liệu mặc định trong Haml là HTML 1.0 Transitional. Vì vậy, để làm cho nó giống HTML5, bạn cần chuyển số năm sau dấu chấm than (!!! 5).
HTML sẵn sàng
Khai báo các phần tử
Một trong những đặc điểm nổi bật của Haml là cú pháp và cách khai báo và lồng các phần tử. Các phần tử HTML thường chứa thẻ mở và thẻ đóng, nhưng phần tử Haml chỉ có một thẻ mở. Các phần tử bắt đầu bằng dấu phần trăm (%) và sau đó thụt lề sẽ xác định việc lồng nhau. Việc thụt lề trong Haml có thể được thực hiện bằng một hoặc nhiều khoảng trắng, nhưng điều quan trọng là việc thụt lề vẫn được giữ nguyên. Các tab và dấu cách không thể được kết hợp và cùng một số tab hoặc dấu cách phải giống nhau trong toàn bộ tài liệu.
Việc loại bỏ nhu cầu mở và đóng thẻ cũng như cấu trúc thụt lề bắt buộc sẽ tạo ra một bố cục dễ theo dõi. Bất cứ lúc nào, đánh dấu có thể được xem và thay đổi nhanh chóng mà không gặp khó khăn.
%body %header %h1 Xin chào thế giới! %section %p Lorem ipsum dolor ngồi amet.
HTML đã biên dịch
Chào thế giới!
Lorem ipsum dolor ngồi amet.
Xử lý văn bảnVăn bản trong Haml có thể được đặt trên cùng dòng với phần tử được khai báo hoặc thụt vào bên dưới phần tử. Văn bản không thể vừa nằm trên cùng một dòng với phần tử đã khai báo vừa được lồng bên dưới nó; phải có lựa chọn này hoặc lựa chọn khác. Ví dụ trên có thể được viết lại như sau:
%body %header %h1 Xin chào thế giới! %section %p Lorem ipsum dolor ngồi amet.
Thuộc tínhCác thuộc tính, giống như các phần tử, được khai báo hơi khác trong Haml. Các thuộc tính được khai báo ngay sau phần tử, trong dấu ngoặc nhọn hoặc dấu ngoặc đơn, tùy thuộc vào việc bạn muốn sử dụng cú pháp Ruby hay HTML. Thuộc tính kiểu Ruby sẽ sử dụng cú pháp băm tiêu chuẩn bên trong(), trong khi thuộc tính kiểu HTML sẽ sử dụng cú pháp HTML tiêu chuẩn bên trong().
%img(:src => "shay.jpg", :alt => "Shay Hou") %img(src: "shay.jpg", alt: "Shay Hou") %img(src="shay.jpg" alt="Shay Hou") !}
HTML đã biên dịch
Nếu muốn, các lớp và mã định danh có thể được khai báo giống như các thuộc tính khác, nhưng chúng cũng có thể được xử lý hơi khác một chút. Thay vì liệt kê các thuộc tính lớp và id với giá trị của chúng bên trong dấu ngoặc đơn, giá trị có thể được chỉ định trực tiếp sau phần tử. Sử dụng dấu chấm cho các lớp hoặc hàm băm cho mã định danh, một giá trị có thể được thêm ngay sau phần tử.
Ngoài ra, các thuộc tính có thể được trộn lẫn bằng cách kết hợp với nhau theo một định dạng thích hợp. Các lớp phải được phân tách bằng dấu chấm và các thuộc tính khác có thể được thêm bằng cách sử dụng một trong các định dạng đã nêu trước đó.
%section.feature %section.feature.special %section#hello %section#hello.feature(role="khu vực")
HTML đã biên dịch
Các lớp và định danh trong
Trong trường hợp một lớp hoặc mã định danh được sử dụng trong , thì %div có thể được bỏ qua và giá trị của lớp hoặc mã định danh có thể được đưa trực tiếp vào. Một lần nữa, các lớp phải được xác định bằng dấu chấm và mã định danh bằng hàm băm.
Tuyệt vời.tuyệt vời.bài học #bắt đầu.bài học
HTML đã biên dịch
Thuộc tính Boolean
Các thuộc tính Boolean được xử lý giống như trong Ruby hoặc HTML, tùy thuộc vào cú pháp được sử dụng.
%input(:type => "checkbox", :checked => true) %input(type="checkbox" đã chọn=true) %input(type="checkbox" đã chọn)
HTML đã biên dịch
Thoát văn bản
Một trong những lợi ích của Haml là khả năng tính toán và chạy Ruby, nhưng đây không phải lúc nào cũng là hành động mong muốn. Văn bản và dòng mã có thể được thoát bằng dấu gạch chéo ngược (\), cho phép văn bản được hiển thị rõ ràng mà không cần thực thi.
Trong ví dụ bên dưới, mẫu đầu tiên = @author được Ruby thực thi, lấy tên tác giả từ ứng dụng. Mẫu thứ hai bắt đầu bằng dấu gạch chéo ngược thoát khỏi văn bản và được in nguyên trạng mà không cần thực thi.
Tác giả = @author \= @author
HTML đã biên dịch
Shay Hou = @author
Các lựa chọn thay thế thoát văn bảnĐôi khi, việc thoát văn bản là không đủ và cần có Ruby để tạo ra kết quả mong muốn. Một ví dụ phổ biến cho việc này là cố gắng thêm dấu chấm ngay sau liên kết nhưng không phải là một phần của văn bản liên kết. Việc đặt dấu chấm trên một dòng mới là không được chấp nhận vì nó sẽ được coi là giá trị lớp trống, gây ra lỗi biên dịch. Việc thêm dấu gạch chéo ngược trước dấu chấm sẽ thoát khỏi ký tự nhưng đặt khoảng trắng giữa từ cuối cùng và dấu chấm. Một lần nữa, không tạo ra kết quả mong muốn.
Trong những trường hợp này, trình trợ giúp Ruby sẽ rất hữu ích. Ví dụ bên dưới sử dụng trình trợ giúp để đặt dấu chấm ngay sau từ cuối cùng nhưng nằm ngoài văn bản liên kết.
%p Shay - = thành công "." làm tốt lắm %a(:href => "#")
HTML đã biên dịch
Shay - Làm tốt.
Bình luậnGiống như các phần tử và thuộc tính, các nhận xét được xử lý hơi khác trong Haml. Mã có thể được nhận xét khá đơn giản bằng cách sử dụng một dấu gạch chéo lên (/). Các dòng đơn có thể được nhận xét bằng cách sử dụng dấu gạch chéo ở đầu và các khối mã có thể được nhận xét bằng cách lồng dưới dấu gạch chéo.
%div / Dòng nhận xét Dòng hiện tại / %div Khối nhận xét
HTML đã biên dịch
Dòng hiện tại
Bình luận có điều kiệnNhận xét có điều kiện cũng được xử lý khác nhau trong Haml. Để tạo một nhận xét có điều kiện, hãy sử dụng dấu ngoặc vuông () xung quanh điều kiện. Các dấu ngoặc vuông này phải được đặt ngay sau dấu gạch chéo.
/ %script(:src => "html5shiv.js")
HTML đã biên dịch
Bình luận im lặng
Haml cũng cung cấp khả năng tạo ra những bình luận im lặng đặc biệt. Nhận xét im lặng khác với nhận xét HTML cơ bản ở chỗ, sau khi được biên dịch, mọi nội dung trong nhận xét im lặng sẽ bị xóa hoàn toàn khỏi trang đó và không xuất hiện trong kết quả. Nhận xét im lặng bắt đầu bằng dấu gạch nối, theo sau là dấu băm (-#). Cũng như các nhận xét khác, nhận xét im lặng có thể được sử dụng để xóa một hoặc nhiều dòng bằng cách lồng nhau.
%div -# Đã xóa dòng Dòng hiện tại
HTML đã biên dịch
Dòng hiện tại
Bộ lọcHaml cung cấp một số bộ lọc cho phép bạn sử dụng các loại đầu vào khác nhau trong Haml. Bộ lọc bắt đầu bằng dấu hai chấm, theo sau là tên của bộ lọc, ví dụ: :markdown, với tất cả nội dung để lọc tệp đính kèm bên dưới nó.
Bộ lọc chungDưới đây là một số bộ lọc phổ biến, bao gồm cả bộ lọc phổ biến nhất: css và: javascript.
- :cdata
- :cà phê
- :đã trốn thoát
- :javascript
- :ít hơn
- :đánh dấu
- :maruku
- :đơn giản
- :bảo tồn
- :ruby
- :ngổ ngáo
- :ssss
- :dệt may
:javascript $("button").on("click", function(event) ( $("p").hide("slow"); ));
HTML đã biên dịch
$("button").on("click", function(event) ( $("p").hide("slow"); ));
Bộ lọc CSS và Sass
:css .container ( lề: 0 tự động; chiều rộng: 960px; ) :sass .container lề: 0 chiều rộng tự động: 960px
HTML đã biên dịch
.container ( lề: 0 tự động; chiều rộng: 960px; )
Nội suy RubyNhư đã đề cập trước đó, Haml có thể đánh giá Ruby và đôi khi có thể có trường hợp Ruby phải được đánh giá trong văn bản thuần túy. Trong trường hợp này, Ruby phải được nội suy bằng cách gói mã được yêu cầu trong Ruby.
Dưới đây là một ví dụ về Ruby được nội suy như một phần của tên lớp.
%div(:class => "student-#(@student.name)")
HTML đã biên dịch
SCSS và Sass
SCSS và Sass là các ngôn ngữ tiền xử lý biên dịch sang CSS. Chúng hơi giống Haml và giúp việc viết mã dễ dàng hơn trong khi cung cấp rất ít điều khiển. Về mặt cá nhân, SCSS và Sass có cùng nguồn gốc, nhưng về mặt kỹ thuật thì chúng có cú pháp khác nhau.
Để cho ngắn gọn, Haml và Sass là các bộ tiền xử lý duy nhất được đề cập trong hướng dẫn này. Chúng cũng được chọn vì chúng được xây dựng bằng Ruby và phù hợp trực tiếp với các ứng dụng Ruby on Rails. Họ cũng nhận được sự ủng hộ to lớn từ cộng đồng.
Khi chọn sử dụng bộ tiền xử lý nào, điều quan trọng là phải xem xét điều gì là tốt nhất cho nhóm và dự án của bạn. Các dự án được xây dựng bằng Node.js có thể được hưởng lợi nhiều hơn từ Jade và Stylus. Tuy nhiên, khía cạnh quan trọng nhất cần xem xét là nhóm của bạn đã quen sử dụng những gì. Thực hiện nghiên cứu của bạn cho từng dự án và chọn giải pháp sáng suốt nhất.
Tài nguyên và liên kết- Haml - Ngôn ngữ đánh dấu trừu tượng HTML
- Sass - Bảng định kiểu có cú pháp tuyệt vời
- Sân chơi Sass trên SassMeister
CSS hiện đại rất mạnh mẽ và khi kết hợp với các bộ tiền xử lý, nó thường là một cỗ máy chiến đấu để thiết kế nội dung trên các trang. Bài viết cung cấp hướng dẫn mở rộng về Sass/SCSS kèm theo các ví dụ. Sau khi đọc phần này, bạn sẽ học cách sử dụng mixin, biến và chỉ thị để giúp bạn kiểm soát nhiều hơn các kiểu của mình.
Lưu ý Tất cả mã Sass/SCSS được biên dịch sang CSS để trình duyệt có thể hiểu và hiển thị chính xác. Hiện tại, các trình duyệt không hỗ trợ làm việc trực tiếp với Sass/SCSS hoặc bất kỳ bộ tiền xử lý CSS nào khác và đặc tả CSS tiêu chuẩn không cung cấp chức năng tương tự.
Tại sao nên sử dụng Sass/SCSS thay vì CSS?Sass không năng động. Bạn sẽ không thể tạo và/hoặc tạo hiệu ứng động cho các thuộc tính và giá trị CSS trong thời gian thực. Nhưng bạn có thể tạo chúng theo cách hiệu quả hơn và để các thuộc tính tiêu chuẩn (như hoạt ảnh CSS) mượn chúng từ đó.
Cú phápSCSS không thực sự thêm bất kỳ tính năng mới nào vào CSS ngoài cú pháp mới thường giúp giảm thời gian viết mã.
Điều kiện tiên quyếtCó 5 bộ tiền xử lý CSS: Sass, SCSS, Less, Stylus và PostCSS.
Bài viết này chủ yếu đề cập đến SCSS, tương tự như Sass. Bạn có thể đọc thêm về các bộ tiền xử lý này trên Stack Overflow (bản gốc) hoặc trên qaru (bản dịch sang tiếng Nga).
SASS - (.sass) Về mặt cú pháp Một bảng kiểu S tuyệt vời.
SCSS - (.scss) Sass y C xếp chồng các bảng kiểu S.
Phần mở rộng .sass và .scss tương tự nhau nhưng vẫn không giống nhau. Đối với người hâm mộ dòng lệnh, đây là phương pháp chuyển đổi:
# Chuyển đổi từ Sass sang SCSS $ sass-convert style.sass style.css # Chuyển đổi từ SCSS sang Sass $ sass-convert style.scss style.sass
Sass là thông số kỹ thuật đầu tiên cho SCSS có phần mở rộng tệp .sass. Sự phát triển của nó bắt đầu từ năm 2006, nhưng sau đó một cú pháp thay thế với phần mở rộng .scss đã được phát triển.
Xin lưu ý Các bộ tiền xử lý khác có chức năng tương tự như SCSS, nhưng cú pháp có thể khác. Ngoài ra, mọi thứ hoạt động trong CSS cũng sẽ hoạt động hoàn hảo trong Sass và SCSS.
BiếnSass/SCSS cho phép bạn làm việc với các biến. Trong CSS, chúng được biểu thị bằng dấu gạch ngang kép (--) và trong bộ tiền xử lý, chúng được biểu thị bằng ký hiệu đô la ($).
số $: 1; $màu: #ff0000; $text: "tproger mãi mãi."; $text: "Nó mãi mãi." !mặc định; $no: null;
Bạn có thể gán giá trị mặc định cho các biến chưa có giá trị bằng cách thêm thẻ !default vào cuối giá trị. Trong trường hợp này, nếu biến đã được gán một giá trị thì nó sẽ không thay đổi; nếu biến trống, nó sẽ được gán giá trị được chỉ định mới.
#container ( nội dung: $text; )
Các biến trong Sass có thể được gán cho bất kỳ thuộc tính nào.
Quy tắc lồng nhauCác phần tử CSS lồng nhau tiêu chuẩn sử dụng khoảng trắng:
/* Các quy tắc lồng nhau */ #A ( color: red; ) #A #B ( color: green; ) #A #B #C p ( color: blue; )
Các phần tử lồng nhau tương tự sử dụng SCSS:
/* Các quy tắc lồng nhau */ #A ( color: red; #B ( color: green; #C p ( color: blue; ) ) )
Như bạn có thể thấy, cú pháp trông rõ ràng hơn và ít lặp lại hơn.
Điều này đặc biệt hữu ích khi quản lý bố cục quá tải. Bằng cách này, sự căn chỉnh trong đó các thuộc tính lồng nhau được viết bằng mã sẽ khớp chặt chẽ với cấu trúc bố cục thực tế của ứng dụng.
Phía sau, bộ tiền xử lý vẫn đang biên dịch nó thành mã CSS tiêu chuẩn (hiển thị ở trên) để có thể hiển thị trong trình duyệt. Chúng tôi chỉ đang thay đổi cách viết CSS.
Ký hiệu và #p ( color: đen; a ( font-weight: đậm; &:hover ( color: red; ) ) )Với ký tự & bạn có thể chỉ định rõ ràng vị trí sẽ chèn bộ chọn gốc.
Kết quả biên dịch Sass (từ ví dụ trước) thành CSS như bên dưới.
#p (màu: đen;) #p a (cỡ chữ: in đậm;) #p a:hover (màu: đỏ;)
Kết quả là ký hiệu và được biên dịch thành tên của phần tử cha a (a:hover).
Mixins (hay còn gọi là tạp chất)Mixins cũng có thể chứa các bộ chọn, bao gồm cả các bộ chọn có thuộc tính. Và bộ chọn có thể chứa các tham chiếu đến phần tử gốc thông qua ký hiệu (&), bạn còn nhớ điều đó phải không?
Ví dụ về làm việc với nhiều trình duyệtMột số thứ trong CSS khá tẻ nhạt để viết, đặc biệt là trong CSS3, trong đó bạn thường cần sử dụng một số lượng lớn tiền tố của nhà cung cấp (-webkit- hoặc -moz-).
Mixins cho phép bạn tạo các nhóm khai báo CSS mà bạn sẽ sử dụng nhiều lần trên toàn bộ trang web của mình. Một cách thực hành tốt là sử dụng mixin cho tiền tố của nhà cung cấp. Ví dụ:
@mixin border-radius($radius) ( // Tiền tố cho: -webkit-border-radius: $radius; // Chrome và Safari -moz-border-radius: $radius; // Firefox -ms-border-radius: $radius; // Internet Explorer -o-border-radius: $radius; // Opera border-radius: $radius; // CSS tiêu chuẩn ) // Ví dụ về cách sử dụng mixin bán kính đường viền sau khi tạo it.box ( @include bán kính đường viền(10px)
Các phép tính toán họcGiống như trong cuộc sống thực, bạn không thể làm việc với các số có kiểu dữ liệu không tương thích (như thêm px và em).
Cộng và trừ p ( font-size: 10px + 2em; // LỖI! font-size: 10px + 6px; // 16px font-size: 10px + 2; // 12px )Luôn chú ý đến loại dữ liệu được thêm vào. Nghĩa là, pixel với pixel, voi với voi. Phép trừ hoạt động theo cách tương tự nhưng với dấu trừ.
Ví dụ về phép trừ:
Phép nhânThực hiện chính xác như trong CSS, sử dụng calc(a * b) , nhưng không có calc và dấu ngoặc đơn. Ngoài ra, bạn cũng có thể tách dấu nhân bằng dấu cách khỏi các số (5*6 == 5 * 6).
Ngoại lệ Bạn không thể nhân các pixel với nhau. Tức là 10px * 10px != 100px . 10px * 10 == 100px.
P ( chiều rộng: 10px * 10px; // LỖI! chiều rộng: 10px * 10; // chiều rộng 100px: 1px * 5 + 5px; // chiều rộng 10px: 5 * (5px + 5px); // chiều rộng 50px: 5px + ( 10px / 2) * 3; // 20px )
Phân côngVới phép chia, mọi thứ phức tạp hơn một chút, nhưng bạn có thể tìm ra điều đó, bởi vì trong CSS tiêu chuẩn, dấu gạch chéo được dành riêng để sử dụng một dạng thuộc tính ký hiệu ngắn. Ví dụ dưới đây.
/* dạng rút gọn để viết thuộc tính */ font: in nghiêng đậm .8em/1.2 Arial, sans-serif; /* dạng chuẩn để viết thuộc tính */ font-style: italic; độ dày phông chữ: đậm; cỡ chữ: .8em; chiều cao dòng: 1,2; Họ phông chữ: Arial, sans-serif;
Có ba người trợ giúp sẽ gợi ý về khả năng phân chia:
$var1: 20; $var2: 4; p ( top: 16px / 24px; // Hiển thị không thay đổi trong CSS tiêu chuẩn top: (20px / 5px); // Chia (nhưng chỉ khi sử dụng dấu ngoặc) top: #($var1) / #($var2); // Kết quả đầu ra như mã CSS thông thường, không có phép chia nào được thực hiện top: $var1 / $var2; // Phép chia được thực hiện top: ngẫu nhiên(4) / 5; // Phép chia được thực hiện (nếu được sử dụng cùng với hàm) top: 2px / 4px; + 3px; // Phép chia được thực hiện nếu thêm một phép tính số học khác)
Kết quả biên dịch bằng CSS:
P ( trên cùng: 16px / 24px; trên cùng: 4; trên cùng: 20 / 4; trên cùng: 5; trên cùng: 0,6; trên cùng: 3,5px; )
còn lạiPhần dư tính toán phần còn lại của phép chia. Dưới đây chúng ta sẽ xem xét cách tạo một “ngựa vằn” cho danh sách HTML.
@mixin zebra() ( @for $i từ 1 đến 7 ( @if ($i % 2 == 1) ( .stripe-#($i) ( màu nền: đen; màu: trắng; ) ) ) ) * ( @include zebra(); text-align: center; )
Việc tạo mixin ngựa vằn được hiển thị trong mã nhúng ở trên. Các lệnh @for và @if được mô tả trong phần bên dưới.
Để tạo mẫu, bạn cần viết một số phần tử HTML.
ngựa vằn ngựa vằn ngựa vằn ngựa vằn ngựa vằn ngựa vằn ngựa vằn
Kết quả trên trình duyệt:
Zebra được tạo thành công bởi zebra mixin
Toán tử so sánhLệnh @if lấy một biểu thức SassScript và sử dụng các kiểu lồng nhau của nó nếu biểu thức trả về bất kỳ giá trị nào khác ngoài false hoặc null .
Phần sau đây cho thấy cách hoạt động của các lệnh @if và @else khi được lồng trong một mixin.
Khoảng cách @mixin($padding, $margin) ( @if ($padding > $margin) ( đệm: $padding; ) @else ( đệm: $margin; ) .container ( @include khoảng cách(10px, 20px); )
So sánh trong hành động Mixin giãn cách sẽ chọn kích thước phần đệm nếu nó lớn hơn lề.
Sau khi biên dịch sang CSS:
Vùng chứa ( đệm: 20px; )
Toán tử logicMô tả các toán tử logic
Sử dụng Toán tử Sass Boolean để tạo nút có nền thay đổi tùy theo chiều rộng của nút.
@mixin nút màu ($height, $width) ( @if ($height< $width) and ($width >= 35px)) ( màu nền: xanh dương; ) @else ( màu nền: xanh lá cây; ) .button ( @include nút-color(20px, 30px) )
DâyCSS định nghĩa 2 loại chuỗi: có và không có dấu ngoặc kép. Sass nhận ra cả hai. Kết quả là bạn sẽ có cùng loại chuỗi trong CSS mà bạn đã sử dụng trong Sass.
Trong một số trường hợp, bạn có thể thêm chuỗi vào các giá trị CSS hợp lệ mà không cần dấu ngoặc kép, nhưng chỉ khi chuỗi được thêm là phần tử kết thúc.
P (font: 50px Ari + "al"; // Biên dịch thành 50px Arial )
Ví dụ dưới đây minh họa những điều không nên làm.
P (phông chữ: "50px" + Arial; // LỖI! )
Bạn có thể thêm các chuỗi thuộc nhiều loại khác nhau miễn là không có khoảng trắng trong đó. Ví dụ dưới đây sẽ không biên dịch.
P:after ( nội dung: "Mang Linus trở lại" + Torvalds!; // LỖI! )
P:after ( nội dung: "Mang Linus về" + "Torvalds!"; // chú ý đến "Torvalds!" )
Ví dụ về việc thêm nhiều chuỗi:
P:after ( nội dung: "Số phận của " + "nhân loại" + "-" + "lặp đi lặp lại."; )
Thêm chuỗi và số:
P:after (nội dung: "Đảo ngược" + 2013 + "vận mệnh của thiên giới"; )
Xin lưu ý: Thuộc tính nội dung chỉ hoạt động với bộ chọn giả:trước và:sau. Bạn không nên sử dụng nội dung trong tài liệu CSS mà nên sử dụng nội dung đó trực tiếp giữa các thẻ trong HTML.
Toán tử điều khiển luồngSCSS có chức năng (fucntion()) và chỉ thị (@directive). Cao hơn một chút, chúng ta đã xem xét một ví dụ về hàm khi nghiên cứu việc truyền đối số bên trong mixin.
Các hàm thường được đặt trong dấu ngoặc đơn ngay sau tên của chúng. Và lệnh bắt đầu bằng ký hiệu @.
Giống như JavaScript, SCSS cho phép bạn làm việc với một bộ toán tử điều khiển luồng tiêu chuẩn.
nếu như()if() là một hàm (và đôi khi là nền tảng của trí tuệ nhân tạo).
Công dụng của nó trông khá nguyên thủy: toán tử sẽ trả về một trong hai giá trị được chỉ ra trong điều kiện.
/* Sử dụng hàm if() */ if (true, 1px, 2px) => 1px; if (false, 1px, 2px) => 2px;
@nếu như@if là một lệnh được sử dụng để phân nhánh có điều kiện.
/* Sử dụng lệnh @if */ p (@if 1 + 1 == 2 ( border: 1px Solid; ) @if 7< 5 { border: 2px dotted; } @if null { border: 3px double; } }
Kết quả biên soạn:
P (đường viền: 1px liền khối; )
Dưới đây là combo fork có thêm lệnh @else.
/* Tạo một biến $type */ $type: river; /* Tô màu xanh lam cho các vùng chứa nếu giá trị của biến $type là sông */ div ( @if $type == river ( color: blue; ) ) /* Màu có điều kiện cho văn bản trong thẻ
*/ p ( @if $type == cây ( color: green; ) @else if $type == river ( color: blue; ) @else if $type == dirty ( color: brown; ) )
Kiểm tra sự hiện diện của phần tử chaKý hiệu và chọn phần tử cha nếu có. Nếu không nó sẽ trả về null. Do đó, nó có thể được sử dụng cùng với lệnh @if.
Trong các ví dụ sau, chúng ta sẽ xem xét việc tạo các kiểu CSS có điều kiện tùy thuộc vào sự hiện diện của phần tử gốc.
/* Kiểm tra xem có phần tử cha hay không */ @mixin không-parent-exist ( @if & ( /* Áp dụng màu xanh lam cho phần tử cha nếu nó tồn tại */ &:hover ( color: blue; ) ) @else ( /* Thiếu phần tử gốc, áp dụng màu xanh lam cho các liên kết */ a ( color: blue; ) ) )
@for chỉ thịLệnh @for in một tập hợp các kiểu với số lần được chỉ định. Đối với mỗi lần lặp, một biến đếm được sử dụng để thay đổi đầu ra.
Lệnh @for được lặp lại 5 lần.
@for $i từ 1 đến 5 ( .def định-#($i) ( width: 10px * $i; ) )
Kết quả biên dịch bằng CSS:
Định nghĩa-1 ( chiều rộng: 10px; ) .def định-2 ( chiều rộng: 20px; ) .def định-3 ( chiều rộng: 30px; ) .def định-4 ( chiều rộng: 40px; ) .def định-5 ( chiều rộng: 50px; )
@each chỉ thịLệnh @each đặt $var cho từng giá trị danh sách hoặc từ điển và xuất ra các kiểu mà nó chứa bằng cách sử dụng giá trị $var tương ứng.
@each $animal ở thú mỏ vịt, sư tử, cừu, chim bồ câu ( .#($animal)-icon ( Background-image: url("/images/#($animal).png") ) )
Kết quả biên dịch bằng CSS:
Biểu tượng thú mỏ vịt ( hình nền: url("/images/platypus.png"); ) .lion-icon ( hình nền: url("/images/lion.png"); ) .sheep-icon ( nền- hình ảnh: url("/images/sheep.png"); .dove-icon ( hình nền: url("/images/dove.png"); )
@while chỉ thịLệnh @while lấy một biểu thức SassScript và lặp qua các kiểu mà nó chứa trong khi biểu thức đánh giá là true . Nó có thể được sử dụng để tạo các vòng lặp phức tạp hơn mức @for phù hợp, mặc dù hiếm khi cần thiết. Ví dụ:
chỉ số $: 5; @while $index > 0 ( .element-#($index) ( width: 10px * $index; ) $index: $index - 1; )
Kết quả biên soạn:
Phần tử-5 ( chiều rộng: 50px; ) .element-4 ( chiều rộng: 40px; ) .element-3 ( chiều rộng: 30px; ) .element-2 ( chiều rộng: 20px; ) .element-1 ( chiều rộng: 10px; )
Các hàm trong Sass/SCSSSử dụng Sass/SCSS bạn có thể sử dụng các hàm theo cách tương tự như trong các ngôn ngữ khác.
Hãy tạo một hàm three-hundred-px() trả về 300px.
@function three-hundred-px() ( @return 300px; ) .name ( width: three-hundred-px(); đường viền: 1px màu xám đậm; hiển thị: khối; vị trí: tuyệt đối; )
Sau khi áp dụng class.name, chiều rộng của phần tử sẽ là 300 pixel.
Xin chào.
Các hàm trong Sass có thể trả về bất kỳ giá trị CSS hợp lệ nào và có thể được gán cho bất kỳ thuộc tính nào. Chúng thậm chí có thể được tính toán dựa trên đối số được truyền.
@function double($width) ( @return $width * 2; )
lượng giácCác hàm lượng giác sin() và cos() thường được tìm thấy dưới dạng các lớp dựng sẵn trong nhiều ngôn ngữ, chẳng hạn như JavaScript chẳng hạn.
Công việc của họ rất đáng để nghiên cứu nếu bạn cần giảm thời gian phát triển hoạt ảnh giao diện người dùng, chẳng hạn như tạo trobber. Nhân tiện, chúng tôi đã nói về điều này trong một bài viết. Nhưng trong trường hợp này nó sẽ là mã chứ không phải ảnh GIF được chèn vào tài liệu HTML.
Dưới đây chúng ta sẽ xem xét một số ví dụ để tạo hiệu ứng hoạt hình thú vị bằng hàm sin(), trong đó số lượng mã được giữ ở mức tối thiểu. Sau đó, bạn có thể mở rộng kiến thức này để tạo các thành phần giao diện người dùng có tính tương tác (chuyển động trong vòng tròn, hoạt ảnh lượn sóng).
Ưu điểm của việc sử dụng lượng giác kết hợp với CSS là không có yêu cầu HTTP bổ sung như với hình ảnh gif.
Bạn có thể viết các hàm lượng giác trong Sass. Đọc thêm về điều này.
Viết chức năng của riêng bạnTrong lượng giác, nhiều phép tính dựa trên hàm số. Mỗi chức năng được xây dựng dựa trên chức năng kia. Ví dụ: hàm rad() yêu cầu sử dụng PI() . Các hàm cos() và sin() yêu cầu sử dụng rad() .
@function PI() (@return 3.14159265359; )
Hàm viết trong Sass/SCSS rất giống với hàm viết trong các ngôn ngữ khác.
Sử dụng hàm pow():
@function pow ($number, $exp) ( $value: 1; @if $exp > 0 ( @for $i từ 1 đến $exp ( $value: $value * $number; ) ) @else if $exp< 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; }
Sử dụng hàm rad():
@function rad ($angle) ( $unit: unit ($angle); $unitless: $angle / ($angle *0 + 1); // Nếu giá trị góc tính bằng độ ("deg"), bạn cần chuyển đổi nó thành radian. @if $unit == deg ( $unitless: $unitless / 180 * PI(); ) @return $unitless )
Để tính tiếp tuyến bằng hàm tan(), bạn cần sử dụng hàm sin() và cos()..
Tuyệt đối tất cả các nhà thiết kế bố cục có kinh nghiệm đều sử dụng bộ 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 những chương trình này. Thoạt nhìn, chúng có thể gây ra nỗi kinh hoàng thầm lặng cho người mới bắt đầu - điều này quá giống với lập trình! Trên thực tế, bạn có thể hiểu tất cả các khả năng của bộ tiền xử lý CSS trong khoảng một ngày và nếu bạn cố gắng thì sau vài giờ. Họ sẽ làm cho cuộc sống của bạn dễ dàng hơn nhiều trong tương lai.
Bộ tiền xử lý CSS ra đời như thế nàoĐể hiểu rõ hơn về các tính năng của công nghệ này, chúng ta hãy đi sâu vào lịch sử phát triển cách trình bày trực quan của các trang web.
Khi việc sử dụng Internet rộng rãi lần đầu tiên bắt đầu, không có bảng định kiểu nào tồn tại. Việc thực thi các tài liệu chỉ phụ thuộc vào trình duyệt. Mỗi người trong số họ có phong cách riêng được sử dụng để xử lý các thẻ nhất định. Theo đó, các trang trông khác nhau tùy thuộc vào trình duyệt bạn mở chúng. Kết quả là sự hỗn loạn, nhầm lẫn và các vấn đề cho các nhà phát triển.
Năm 1994, nhà khoa học người Na Uy Haakon Lie đã phát triển một bảng định kiểu có thể được sử dụng để tạo kiểu cho giao diện của một trang tách biệt với tài liệu HTML. Ý tưởng này đã thu hút sự chú ý của đại diện tập đoàn W3C, những người ngay lập tức bắt tay vào cải tiến nó. Vài năm sau, phiên bản đầu tiên của đặc tả CSS được phát hành. Sau đó, nó không ngừng được cải tiến và hoàn thiện... Nhưng khái niệm vẫn như cũ: mỗi phong cách đều có những đặc tính nhất định.
Việc sử dụng bảng CSS luôn gây ra một số vấn đề. Ví dụ, các nhà thiết kế bố cục thường gặp khó khăn với việc sắp xếp và nhóm các thuộc tính và không phải mọi thứ đều đơn giản như vậy với tính kế thừa.
Và sau đó đến hai phần nghìn. Các nhà phát triển front-end chuyên nghiệp ngày càng bắt đầu tham gia vào lĩnh vực đánh dấu, những người mà công việc linh hoạt và năng động với các phong cách là rất quan trọng. CSS tồn tại vào thời điểm đó yêu cầu hỗ trợ tiền tố và theo dõi cho các tính năng trình duyệt mới. Sau đó, các chuyên gia JavaScript và Ruby bắt tay vào công việc, tạo ra các bộ tiền xử lý - các tiện ích bổ sung cho CSS nhằm bổ sung các tính năng mới cho nó.
CSS cho người mới bắt đầu: Tính năng của bộ tiền xử lýHọ thực hiện một số chức năng:
- thống nhất các tiền tố và hack của trình duyệt;
- đơn giản hóa cú pháp;
- làm cho nó có thể làm việc với các bộ chọn lồng nhau mà không gặp lỗi;
- cải thiện logic kiểu dáng.
Tóm lại: bộ tiền xử lý bổ sung logic lập trình vào các khả năng của CSS. Bây giờ việc tạo kiểu được thực hiện không phải bằng cách liệt kê các kiểu thông thường mà bằng cách sử dụng một số kỹ thuật và cách tiếp cận đơn giản: biến, hàm, mixin, vòng lặp, điều kiện. Ngoài ra, nó đã có thể sử dụng toán học.
Nhận thấy sự phổ biến của các tiện ích bổ sung như vậy, W3C bắt đầu dần dần bổ sung các tính năng từ chúng vào mã CSS. Ví dụ: đây là cách hàm calc() xuất hiện trong đặc tả, được nhiều trình duyệt hỗ trợ. Dự kiến sẽ sớm có thể đặt biến và tạo mixin. Tuy nhiên, điều này sẽ xảy ra trong tương lai xa và các bộ tiền xử lý đã có sẵn và hoạt động hoàn hảo.
Bộ tiền xử lý CSS phổ biến. SassĐược phát triển vào năm 2007. Ban đầu nó là một thành phần của Haml, một công cụ tạo mẫu HTML. Các khả năng mới để quản lý các thành phần CSS đã thu hút các nhà phát triển Ruby on Rails, những người bắt đầu phân phối nó ở khắp mọi nơi. Sass đã giới thiệu một số lượng lớn các tính năng hiện có trong bất kỳ bộ tiền xử lý nào: biến, lồng các bộ chọn, mixin (tuy nhiên, tại thời điểm đó, bạn không thể thêm đối số cho chúng).
Khai báo biến trong SassCác biến được khai báo bằng dấu $. Bạn có thể lưu các thuộc tính và tập hợp của chúng trong đó, ví dụ: “$borderSolid: 1px màu đỏ đậm;”. Trong ví dụ này, chúng tôi đã khai báo một biến có tên là borderSolid và lưu trữ giá trị 1px màu đỏ trong đó. Bây giờ, nếu trong CSS chúng ta cần tạo đường viền màu đỏ rộng 1px, chúng ta chỉ cần chỉ định biến này sau tên thuộc tính. Sau khi khai báo, các biến không thể thay đổi được. Một số chức năng tích hợp có sẵn. Ví dụ: hãy khai báo biến $redColor với giá trị #FF5050. Bây giờ trong mã CSS, trong thuộc tính của một số phần tử, chúng ta sử dụng nó để đặt màu phông chữ: p ( color: $redColor; ). Bạn muốn thử nghiệm với màu sắc? Sử dụng các chức năng làm tối hoặc làm sáng. Điều này được thực hiện như thế này: p ( color: darken($redColor, 20%); ). Điều này sẽ làm cho màu đỏ nhạt hơn 20%.
Trước đây, để biểu thị sự lồng nhau, bạn phải sử dụng các cấu trúc dài và bất tiện. Hãy tưởng tượng rằng chúng ta có một div chứa p và đến lượt nó lại chứa một span. Đối với div chúng ta cần đặt màu phông chữ thành đỏ, cho p - vàng, cho span - hồng. Trong CSS thông thường, việc này sẽ được thực hiện như thế này:
Với sự trợ giúp của bộ tiền xử lý CSS, mọi thứ trở nên đơn giản và gọn gàng hơn:
Các phần tử theo nghĩa đen được “lồng” vào nhau.
Các chỉ thị tiền xử lýBạn có thể nhập tệp bằng lệnh @import. Ví dụ: chúng ta có một tệp phông chữ.sass, tệp này khai báo kiểu cho phông chữ. Chúng tôi đưa nó vào tệp style.sass chính: @import ‘fonts’. Sẵn sàng! Thay vì một tệp kiểu lớn, chúng tôi có một số tệp có thể được sử dụng để truy cập nhanh chóng và dễ dàng các thuộc tính chúng tôi cần.
cá hagfishMột trong những ý tưởng thú vị nhất. Cho phép đặt toàn bộ tập hợp thuộc tính trên một dòng. Chúng hoạt động như sau:
@mixin lớnFont (
họ phông chữ: 'Time New Roman';
cỡ chữ: 64px;
chiều cao dòng: 80px;
độ dày phông chữ: đậm;
Để áp dụng mixin cho một thành phần trên trang, hãy sử dụng lệnh @include. Ví dụ: chúng tôi muốn áp dụng nó cho tiêu đề h1. Kết quả là cấu trúc sau: h1 ( @include: LargeFont; )
Tất cả các thuộc tính từ mixin sẽ được gán cho phần tử h1.
Bộ tiền xử lý ít hơnCú pháp Sass gợi nhớ đến lập trình. Nếu bạn đang tìm kiếm một tùy chọn phù hợp hơn cho người mới bắt đầu học CSS, hãy xem Ít hơn. Nó được tạo ra vào năm 2009. Tính năng chính là hỗ trợ riêng, do đó, những người thiết kế bố cục không quen với lập trình sẽ dễ dàng làm chủ nó hơn.
Các biến được khai báo bằng ký hiệu @. Ví dụ: @fontSize: 14px;. Nesting hoạt động theo nguyên tắc tương tự như trong Sass. Mixins được khai báo như sau: .largeFont() ( font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: đậm; ). Để kết nối, bạn không cần sử dụng các chỉ thị tiền xử lý - chỉ cần thêm một mixin mới được tạo vào các thuộc tính của phần tử đã chọn. Ví dụ: h1 ( .largeFont; ).
Một bộ tiền xử lý khác. Được tạo ra vào năm 2011 bởi cùng một tác giả đã mang đến 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 theo hai cách - rõ ràng hoặc ngầm định. Ví dụ: font='Time New Roman'; - đây là một lựa chọn ngầm. Nhưng $font = ‘Times New Roman’ là rõ ràng. Mixins được khai báo và bao gồm ngầm. Cú pháp là: redColor() màu đỏ. Bây giờ chúng ta có thể thêm nó vào phần tử, ví dụ: h1 redColor();.
Thoạt nhìn, Stylus có vẻ khó hiểu. Dấu ngoặc đơn và dấu chấm phẩy "gốc" ở đâu? Nhưng một khi bạn đi sâu vào nó, mọi thứ sẽ trở nên rõ ràng hơn nhiều. Tuy nhiên, hãy nhớ rằng việc phát triển lâu dài với bộ tiền xử lý này có thể khiến bạn không còn sử dụng cú pháp CSS cổ điển nữa. Điều này đôi khi gây ra vấn đề khi bạn cần làm việc với các kiểu “thuần túy”.
Nó thực sự... không quan trọng. Tất cả các tùy chọn đều cung cấp các khả năng gần như giống nhau, chỉ có cú pháp khác nhau đối với mỗi tùy chọn. Chúng tôi khuyên bạn nên làm như sau:
- nếu bạn là một lập trình viên và muốn làm việc với các kiểu dưới dạng mã, hãy sử dụng Sass;
- nếu bạn là nhà thiết kế bố cục và muốn làm việc với các kiểu như bố cục thông thường, hãy chú ý đến Ít hơn;
- nếu bạn thích sự tối giản, hãy sử dụng bút Stylus.
Đối với tất cả các tùy chọn, có sẵn một số lượng lớn các thư viện thú vị có thể đơn giản hóa việc phát triển hơn nữa. Người dùng Sass nên kiểm tra 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 cài đặt nó, bạn sẽ không bao giờ phải lo lắng về tiền tố của nhà cung cấp. Làm cho việc làm việc với lưới dễ dàng hơn. Có những tiện ích để làm việc với màu sắc và họa tiết. Một số mixin đã được công bố có sẵn. Hãy dành một vài ngày cho sản phẩm này - nhờ đó bạn sẽ tiết kiệm được rất nhiều công sức và thời gian trong tương lai.
