Thực đơn
trang chủTrò chơi

Sass dành cho trẻ nhỏ - hướng dẫn chi tiết. Dưới đây là một số ưu điểm của SCSS. Tải xuống và cài đặt SASS

Chào mọi người! Thời gian trôi nhanh làm sao. Tôi thậm chí còn không nhận thấy mình đã chuyển từ phong cách viết từ Css thông thường sang bộ tiền xử lý Sass như thế nào. Nhưng trước đây tôi không hiểu - Sass là loại gì, nó dùng để làm gì, có lẽ nó dành cho những chuyên gia siêu cao cấp về bố cục. Có, sử dụng bộ tiền xử lý là một bước tiến cấp độ mới trong phát triển web, nhưng không có gì đáng sợ hay phức tạp ở đây và bạn sẽ tự mình nhận ra khi đọc hết bài viết này.

Vì vậy, điều gì là tốt về bộ tiền xử lý và Sass cụ thể? Tôi sẽ nói ngay rằng có những cái khác, chẳng hạn như Less, Stylus, v.v. Chúng đều hoạt động theo cùng một nguyên tắc, nhưng mỗi cái đều có những đặc điểm riêng. Sass đã trở nên phổ biến rộng rãi trong giới chuyên môn, khiến việc học trở nên dễ dàng hơn nhiều. Chỉ là công nghệ càng phổ biến thì thêm cộng đồng và thậm chí hơn thế nữa, tài liệu rất phong phú.

Bộ tiền xử lý được thiết kế để giúp nhà phát triển giải quyết hầu hết công việc thường ngày khi viết code, từ đó tăng tốc độ và chất lượng công việc. Ngoài các bộ tiền xử lý CSS, còn có các bộ tiền xử lý HTML, ví dụ như Pug (Jade).

Cấu trúc bài viết

Tài liệu

Nhà phát triển Sass là người Pháp Hugo Giraudel, người đã sống ở Đức một thời gian. Đương nhiên tài liệu đã được bật tiếng anh, nhưng cá nhân tôi nắm khá tốt về nó (điều quan trọng là phải biết tiếng Anh kỹ thuật). Nhưng cũng có bản dịch sang tiếng Nga. Tôi vẫn muốn giới thiệu phiên bản tiếng Anh, điều này là để làm quen và học tiếng Anh ngày một sâu hơn. Nhưng người Nga cũng không tệ hơn.

  • Tài liệu tiếng Anh: http://www.sass-lang.com
  • Tài liệu tiếng Nga: https://sass-scss.ru

Biên dịch Sass thành Css

BẰNG phần mềmĐể biên dịch Sass thành Css, tôi sử dụng plugin trình quản lý tác vụ Sass. Nhìn chung Sass là một ứng dụng (Gem) của ngôn ngữ Ruby. Do đó, nếu bạn muốn làm mà không cần Gulp, thì để biên dịch sang Css, bạn sẽ cần cài đặt nền tảng ngôn ngữ Lập trình Ruby. Bây giờ tôi sẽ không chỉ ra cách thực hiện việc này, bạn có thể đọc về nó trên trang web chính thức.

Cú pháp - Sass, Scss

Hãy để tôi lưu ý ngay rằng có 2 cú pháp để viết mã: Sass và Scss.

Cú pháp của Sass hơi khác so với Scss. Scss trông giống mã Css thông thường hơn và Sass loại bỏ dấu ngoặc nhọn và dấu chấm phẩy giữa các quy tắc. Cũng có những khác biệt trong cách viết một số hàm và bạn phải cẩn thận về cú pháp mình chọn. Phần mở rộng tệp cho Sass - *.sass, và cho Scss - *.scss. Cú pháp Sass cũ hơn và Scss ra đời sau để giúp người mới bắt đầu học dễ dàng hơn. Bản thân tôi cũng bắt đầu nghiên cứu bộ tiền xử lý này trong Scss, như vậy sẽ dễ hiểu hơn. Bây giờ tôi đã chuyển sang Sass, nó thuận tiện hơn cho tôi.

Nếu chúng ta nói về Sass, thì cấu trúc mã của nó được xây dựng trên cơ sở các vết lõm (xét cho cùng, không có dấu ngoặc nhọn nào trong đó) và bạn nên cẩn thận ở đây, vì cả trình lập bảng (TAB - 4 dấu cách) và dấu cách thông thường ( thông thường đó là một khoảng trắng đôi). Tôi luôn sử dụng máy lập bảng.

Nhớ! Nếu bạn sử dụng tab làm thụt lề thì nên loại trừ khoảng trắng để mọi thứ đều giống nhau. Và ngược lại - nếu bạn sử dụng dấu cách thì sẽ loại trừ bộ lập bảng. Nếu không, trình biên dịch sẽ báo lỗi.

Sass

.maincontent .main-title cỡ chữ: 30px cỡ chữ: 700 lề: 0 0 30px .description lề-dưới: 30px p màu: #444444 cỡ chữ: 16px chiều cao dòng: 22px

Scss

.maincontent ( .main-title ( cỡ chữ: 30px; độ dày phông chữ: 700; lề: 0 0 30px; ) .description ( lề-dưới: 30px; p ( color: #444444; cỡ chữ: 16px; dòng -chiều cao: 22px; ) ) )

Hầu hết các trình soạn thảo mã (ví dụ: Sublime Text) đều có các dấu thụt đầu dòng ở dạng sọc, giúp chúng ta không bị nhầm lẫn. Trong các ví dụ dưới đây tôi sẽ sử dụng cú pháp Sass.

Đơn giản hóa cuộc sống của bạn với Sass

Lồng ghép các quy tắc

Đây là điều tôi thích ở Sass ngay từ đầu, nó chính xác là việc lồng các quy tắc CSS vào nhau. Điều này giúp tiết kiệm rất nhiều thời gian và mã có cấu trúc và dễ đọc. Ví dụ: nếu chúng ta muốn viết kiểu cho các phần tử của một vùng chứa gốc, thì chúng ta cần chỉ định lớp cha trong Css mọi lúc, ví dụ như thế này:

.title chính ( font-size: 30px; color: #444; ) .main .subtitle ( font-size: 20px; ) .main .description ( font-size: 14px; Margin-bottom: 30px; )

Nghĩa là, chúng ta chỉ định class cha.main ở mọi nơi, và điều này lại không hoàn toàn thuận tiện. Sử dụng Sass, bạn có thể viết nó như thế này:

Scss

.main ( .title ( font-size: 30px; color: #444; ) .subtitle ( font-size: 20px; ) .description ( font-size: 14px; Margin-bottom: 30px; ) )

Sass

.main .title cỡ chữ: 30px màu: #444 .subtitle cỡ chữ: 20px .description cỡ chữ: 14px lề dưới: 30px

Đồng ý, nó trông gọn gàng hơn nhiều và bạn có thể viết mã nhanh hơn vì chúng ta chỉ viết class.main cha một lần. Nếu bạn muốn làm theo tôi mà không cần cài đặt Ruby và bất kỳ phần mềm tương tự nào, bạn có thể sử dụng trình biên dịch trực tuyến để trình diễn.

Thuộc tính lồng nhau

Ngoài các quy tắc lồng nhau trong Sass, còn có khả năng lồng các thuộc tính. Ví dụ: đây là cách viết giá trị lề:

Sass

.main .title lề: trên: 10px phải: 15px dưới: 10px trái: 15px

Css

.main .title ( lề-top: 10px; lề-phải: 15px; lề-dưới: 10px; lề-trái: 15px; )

Liên kết hoặc ghép nối bộ chọn - & ký

Chúng ta có thể tăng tốc độ viết mã của mình và làm cho nó nhỏ gọn hơn nữa bằng cách sử dụng phép nối (kết nối) bằng ký hiệu - & . Làm thế nào nó hoạt động? Ví dụ: chúng ta có các lớp như: .main-title, .main-subtitle, .main-description. Trong Sass, các lớp này có thể được viết như sau:

Kích thước phông chữ &-tiêu đề chính: 30px màu: #444 &-phụ đề cỡ chữ: 20px &-kích thước phông chữ mô tả: 14px lề-dưới: 30px

Tiêu đề chính ( font-size: 30px; color: #444; ) .main-subtitle ( font-size: 20px; ) .main-description ( font-size: 14px; Margin-bottom: 30px; )

Sử dụng một biểu tượng & chúng tôi kết nối với lớp gốc, nghĩa là trong trong trường hợp này không cần phải lặp lại root.main . Đồng thời, hãy nhớ rằng chúng tôi chưa tạo bất kỳ phần tử con nào.

/* Liên kết */ a ( color: red; ) a:hover ( color: blue; ) /* Pseudo-elements */ .main::Before ( content: ""; display: block; font-size: 20px; ) .main ::after ( nội dung: ""; hiển thị: khối; cỡ chữ: 30px; )

Đôi khi bạn cần chỉ định một chuỗi bộ chọn cho đến phần tử hiện tại. Tất nhiên, bạn có thể di chuyển nó đến thư mục gốc, nhưng để không phá vỡ phần lồng nhau, bạn có thể viết nó như sau:

.container chính và chiều rộng: 700px

Container.main (chiều rộng: 700px)

Bằng cách di chuyển & sau bộ chọn, chúng tôi đã thay đổi thứ tự lắp ghép, tức là class.container trong trường hợp này là cha mẹ.

Liên kết với bộ chọn cha, nhưng cao hơn một cấp

Ở trên, làm ví dụ, tôi đã trình diễn mã Sass:

Kích thước phông chữ &-tiêu đề chính: 30px màu: #444 &-cỡ chữ phụ đề: 20px &-cỡ chữ mô tả: 14px lề dưới: 30px

Bây giờ hãy tưởng tượng rằng trong khối .main-title có một phần tử khác cần được tạo kiểu rõ ràng bằng cách sử dụng toàn bộ chuỗi cha mẹ. Trong một thời gian dài, tôi chỉ chỉ định tên gốc (trong trường hợp này là - .main), nhưng điều này không thuận tiện cho lắm. Tôi bắt đầu tìm hiểu tài liệu của Sass và tìm ra giải pháp. Trên thực tế, mọi thứ đều đơn giản - chúng ta cần khai báo một liên kết tới cấp độ gốc và sử dụng nó khi cần thiết.

Đây là cách tôi đã làm trước đây:

Kích thước phông chữ &-title chính: 30px color: #444 .main__icon // chỉ định root.main, nếu không, nếu bạn sử dụng & nó sẽ liên kết đến .main-title color: #444 width: 20px &-subtitle font-size : 20px & -description cỡ chữ: 14px lề dưới: 30px

Và bây giờ bạn có thể làm điều này:

$self: & // liên kết tới màu gốc &-title font-size: 30px color: #444 #($self)__icon // thay vì & sử dụng liên kết đến màu gốc: #444 width: 20px &-subtitle cỡ chữ: 20px &-mô tả cỡ chữ: 14px lề dưới: 30px

Nếu bạn để ý, chúng tôi đã khai báo một tham chiếu đến cấp độ gốc - $self: & . Điều này làm tôi liên tưởng đến đối tượng (this) đã kích hoạt sự kiện trong javaScript. Bây giờ, ở đúng nơi, chúng ta có thể gọi nó một cách đơn giản là #($self) . Hóa ra mọi chuyện thật đơn giản nhưng tôi gãi đầu nghĩ rằng không có giải pháp nào cho vấn đề này ở Sass.

Tiêu đề chính ( font-size: 30px; color: #444; ) .main-title .main__icon ( color: #444; width: 20px; ) .main-subtitle ( font-size: 20px; ) .main-description ( cỡ chữ: 14px; lề dưới: 30px; )

Mẫu

Điều thường xảy ra là một số phần tử có cùng kiểu cơ sở nhưng chỉ khác nhau ở một số quy tắc. Hãy lấy các nút làm ví dụ. Nếu chúng ta lấy các nút có cùng kích thước thì chúng chỉ có thể khác nhau về màu sắc: đỏ, xanh lá cây, xám, v.v. Nếu bạn dùng css thuần túy, thì bạn sẽ phải chỉ định tất cả các màu của nút theo kiểu cơ bản, phân tách bằng dấu phẩy hoặc tạo lớp cơ sở. Nhưng ở Sass thì dễ dàng hơn nhiều:

%button Background-color: #666 border: 1px Solid #666 buffer: 0 20px font-size: 15px line-height: 40px Height: 40px .button-green @extend %button Background-color: green border-color: green . nút-đỏ @extend %button màu nền: màu đỏ viền: đỏ

Button-green, .button-red ( nền-color: #666; border: 1px Solid #666; đệm: 0 20px; font-size: 15px; line-height: 40px; Height: 40px; ) .button-green ( màu nền: xanh lá cây; màu viền: xanh lá cây; ) .button-red ( màu nền: đỏ; màu viền: đỏ; )

Mẫu trong trường hợp này là bộ chọn nút % (điều này được biểu thị bằng dấu - %). Điều này thuận tiện vì bản thân bộ chọn mẫu không liên quan đến bất kỳ đâu và các kiểu của nó được các bộ chọn khác kế thừa thông qua lệnh - @mở rộng. Mẫu này có thể được sử dụng nhiều lần như mong muốn, do đó làm giảm số lượng mã.

SassScript

Trong Sass, cũng như trong các ngôn ngữ lập trình, có các tính năng như: tạo biến, các phép tính toán học(cộng, trừ, chia, nhân, v.v.), lặp (vòng lặp), hàm (mixins) và nhiều hơn nữa. Nghĩa là, Sass là một loại ngôn ngữ lập trình, một lần nữa được thiết kế để đơn giản hóa việc viết mã và tăng tốc công việc một cách đáng kể.

Biến

Một biến trong Sass bắt đầu bằng một dấu hiệu $ , và tên được viết bằng tiếng Latin, ví dụ: $color . Cần lưu ý rằng các dấu hiệu: “ — " Và " _ » có thể hoán đổi cho nhau. Ví dụ: nếu bạn đã gọi $color-red , thì bạn có thể gọi $color_red . Biến được định nghĩa như sau: $name: giá trị, ví dụ: $color: #f6f6f6 .

Một biến được khai báo bên ngoài bất kỳ cấp độ lồng nhau nào đều có sẵn trên toàn cầu, tức là. có thể được sử dụng ở mọi nơi. Nếu bạn xác định một biến ở bất kỳ cấp độ lồng nhau nào của bộ chọn thì biến đó sẽ chỉ khả dụng ở cấp độ này. Để nó hoạt động toàn cầu trong toàn bộ tài liệu, bạn phải chỉ định một từ khóa !toàn cầu.

Tiêu đề $font-size: 10px !global font-size: $font-size .subtitle font-size: $font-size

Nói chung, biến là một điều tuyệt vời; bạn chỉ cần khai báo chúng và nhập một giá trị, sau đó bạn có thể sử dụng chúng bao nhiêu tùy thích, ở bất cứ đâu. Ví dụ: chúng ta có thể xác định màu sắc bằng cách đặt cho chúng tên cụ thể, cỡ chữ, họ phông chữ, v.v. và bất kỳ ý nghĩa nào nói chung.

Chỉ thị

@mở rộng

Chúng tôi đã đề cập đến chỉ thị này ở trên khi nghiên cứu mẫu trống. Hãy củng cố lại kiến ​​thức của chúng ta một lần nữa. Bằng cách sử dụng @mở rộng chúng ta có thể sao chép các quy tắc của bất kỳ bộ chọn nào. Ví dụ: trong quá trình bố trí, có thể phần tử “ MỘT" và phần tử " B» có thể giống nhau ở vẻ bề ngoài. Trong trường hợp này, bạn có thể viết quy tắc cho phần tử “A” và đối với “B”, bạn chỉ cần sao chép kiểu của phần tử “A”, xác định lại một chút các thuộc tính cần thiết.

Block_a màu nền: #cccccc viền: 5px Solid #999999 đệm: 20px cỡ chữ: 30px chiều cao: 150px chiều rộng: 150px .block_b @extend .block_a đệm: 15px

Block_a, .block_b ( màu nền: #cccccc; đường viền: 5px Solid #999999; phần đệm: 20px; cỡ chữ: 30px; chiều cao: 150px; chiều rộng: 150px; ) .block_b ( phần đệm: 15px; )

TRONG trong ví dụ này chúng tôi đã tạo ra 2 hình vuông giống hệt nhau. Đối với hình vuông “B”, chúng tôi chỉ xác định lại phần đệm: 15px . Đây là cách @extend hoạt động. Tôi sử dụng chỉ thị này khá thường xuyên.

@nhập khẩu

Lệnh này cho phép bạn kết hợp nhiều tệp kiểu thành một. Điều này rất thuận tiện, đặc biệt nếu dự án lớn. Đừng nhầm lẫn với lệnh tồn tại trong Css - @nhập khẩu. Trong Css, thuộc tính bắt buộc là - url().

Trên thực tế, sẽ thuận tiện hơn khi viết các kiểu trong các tập tin khác nhau và mỗi người đều có mục đích riêng của mình. Ví dụ: toàn bộ khung trang có thể được chia thành các vùng: header.sass, sidebar.sass, footer.sass. Bạn có thể thu thập mọi thứ trong tệp chính main.sass bằng cách sử dụng @import. Các tệp vùng cũng có thể được chỉ định bằng cách sử dụng dấu gạch dưới ở đầu tên tệp, ví dụ: _header.sass, _sidebar.sass, _footer.sass. Những tập tin như vậy được gọi là các đoạn. Khi nhập các đoạn, không cần thiết phải chỉ định phần mở rộng của tệp.

Nhập khẩu đơn giản

@import "header.sass" @import "sidebar.sass" @import "footer.sass"

Nhập mảnh

@import "tiêu đề" @import "thanh bên" @import "chân trang"

Các tệp phân đoạn có thể có các phần mở rộng sau: *.sass, *.scss hoặc *.css. Ví dụ: tệp chính có thể có phần mở rộng *.sass và tiêu đề trang web, ví dụ: với phần mở rộng *.scss. Nghĩa là, tệp chính của bạn có phần mở rộng nào không quan trọng. Cần lưu ý rằng khi nhập, tất cả các biến và mixin (chúng ta sẽ nói về chúng bên dưới) sẽ được chuyển vào tệp chính nơi quá trình nhập diễn ra.

Bạn cũng có thể chỉ định việc nhập một số tệp được phân tách bằng dấu phẩy: @import “header”, “sidebar”, “footer”.

Hãy nhớ rằng quá trình nhập diễn ra ở nơi bạn đã chỉ định lệnh @nhập khẩu. Điều này thường được thực hiện ở phần đầu của tài liệu.

@at-root

Chỉ thị @at-root tự nó nói lên và nếu được dịch sang tiếng Nga, nó sẽ nghe như thế này - "từ gốc". Nói cách khác, chúng ta di chuyển bộ chọn về gốc, hoàn tác chuỗi bộ chọn gốc. Tất nhiên, ở đây bạn có thể đặt câu hỏi: "Tại sao lại cần lệnh này nếu bạn có thể di chuyển bộ chọn về thư mục gốc theo cách thủ công?" Câu trả lời rất đơn giản - sự tiện lợi của việc viết mã mà không phá vỡ cấu trúc. Khi bạn học cách làm việc với Sass ở mức tối đa, bạn sẽ hiểu điều này.

Kích thước phông chữ & tiêu đề chính: 30px màu: #444 @at-root .main__icon màu: #444 chiều rộng: 20px

Tiêu đề chính ( font-size: 30px; color: #444; ) .main__icon ( color: #444; width: 20px; )

Chỉ thị và biểu thức kiểm soát

chỉ thị @if

Lệnh này thực thi các kiểu nếu biểu thức kèm theo nó trả về bất kỳ giá trị nào ngoại trừ SAI Và vô giá trị.

$color: xanh .header @if $color == màu nền xanh: xanh @else if $color == màu nền xanh: xanh @else màu nền: #f6f6f6

Tiêu đề ( màu nền: xanh; )

Những người đã quen thuộc với ít nhất những điều cơ bản về ngôn ngữ lập trình (ví dụ: javaScript hoặc Php) sẽ không cảm thấy khó hiểu. Bản chất ở đây là như nhau, cái chính là phải biết cú pháp viết code.

@for chỉ thị

Trong ngôn ngữ lập trình (lại bằng Javascript hoặc Php) bằng cách sử dụng Vì bạn có thể thiết lập một chu kỳ. Trong Sass, lệnh này thực hiện điều tương tự - nó tạo ra một vòng lặp. Đối với mỗi lần lặp lại, một biến đếm được sử dụng để thay đổi dữ liệu đầu ra.

Lệnh này có 2 dạng viết: 1. @for $var from<начало>bởi vì<конец>và 2. @for $var từ<начало>ĐẾN<конец>. Nếu bạn muốn đưa chữ số cuối cùng vào vòng lặp, hãy sử dụng " bởi vì". Hãy xem một ví dụ:

@for $i từ 1 đến 6 .elem-item-#($i) hình nền: url("images/image-#($i).jpg")

Elem-item-1 ( hình nền: url("images/image-1.jpg"); ) .elem-item-2 ( hình nền: url("hình ảnh/hình ảnh-2.jpg"); ) . elem-item-3 ( hình nền: url("images/image-3.jpg"); ) .elem-item-4 ( hình nền: url("hình ảnh/hình ảnh-4.jpg"); ) . elem-item-5 ( hình nền: url("images/image-5.jpg"); )

Để chỉ ra giá trị cuối cùng Tôi đã sử dụng từ khóa " ĐẾN". Trong trường hợp này, chu kỳ kết thúc ở số - 5 . Lưu ý mã Sass trông nhỏ gọn như thế nào.

@each chỉ thị

Chỉ thị @mỗi giống như @for, nó hiển thị các giá trị trong một vòng lặp và rất thuận tiện vì ngoài các số, bạn có thể lặp lại các giá trị cụ thể. Hãy lấy vòng lặp trên và thay đổi nó thành một số giá trị.

@each $bgItem trong động vật, hồ nước, biển, phong cảnh, thiên nhiên .elem-item-#($bgItem) hình nền: url("images/image-#($bgItem).jpg")

Elem-item-animal ( hình nền: url("images/image-animal.jpg"); ) .elem-item-lake ( hình nền: url("images/image-lake.jpg"); ) . elem-item-sea ( hình nền: url("images/image-sea.jpg"); ) .elem-item-landscape ( hình nền: url("images/image-landscape.jpg"); ) . elem-item-nature ( hình nền: url("images/image-nature.jpg"); )

Trong trường hợp này, biến đếm không được tạo và số lần lặp phụ thuộc vào số giá trị được tạo sau từ khóa « TRONG". Các giá trị được xuất ra thông qua một biến (trong ví dụ này - $bgItem), tên của biến này có thể tùy ý.

Mixin (chức năng)

Mixins (mixins) là một loại hàm, giống như trong ngôn ngữ lập trình, được thiết kế để loại bỏ mã lặp đi lặp lại. Mixins có thể chứa toàn bộ đoạn mã định kiểu được phép trong Sass. Chúng ta hãy xem một ví dụ để hiểu rõ hơn.

@mixin vị trí căn giữa: trên cùng tuyệt đối: 50% còn lại: biến đổi 50%: dịch(-50%, -50%) .container @include căn giữa

Một mixin được tạo bằng lệnh @mixin, theo sau là khoảng trắng được phân tách bằng tên của mixin, cũng như các tham số được truyền tùy chọn. Hãy để tôi lưu ý ngay rằng dấu gạch ngang (-) và dấu gạch dưới (_) trong tên mixin có thể hoán đổi cho nhau. Một mixin không chỉ có thể chứa các quy tắc mà còn có thể chứa các bộ chọn. Ở trên tôi đã đưa ra một ví dụ về mixin cơ bản không có tham số.

Mixin được gọi bằng lệnh @include và sau đó, cách nhau bằng dấu cách, chúng tôi cho biết tên của mixin đã tạo. Trong ví dụ trên, đây là việc căn giữa khối dọc theo trục X và trục Y bằng cách sử dụng định vị tuyệt đối. Nếu bạn phải sử dụng điều này thường xuyên thì bạn sẽ đồng ý rằng việc gọi một mixin sẽ dễ dàng hơn là viết đi viết lại các kiểu căn giữa.

Bây giờ chúng ta hãy xem một mixin có các tham số (đối số).

@mixin border($width, $color) border: width: $width style: Solid color: $color .square @include border(2px, #ccc)

Hình vuông ( chiều rộng đường viền: 2px; kiểu đường viền: rắn; màu đường viền: #ccc; )

Như bạn có thể thấy, sau tên của mixin trong ngoặc đơn, chúng ta chỉ định các đối số, trong trường hợp này là chiều rộng và màu sắc của đường viền. Đây là mixin đơn giản nhất mà tôi đã cung cấp cho rõ ràng. Trong thực tế, bạn có thể tìm thấy các mixin phức tạp hơn bằng cách sử dụng điều kiện khác nhau và các biến. Nhưng bây giờ chúng ta đừng phức tạp hóa mọi thứ; chúng ta nên luôn bắt đầu từ những điều nhỏ nhặt và đơn giản, sau đó tiến dần lên khi chúng ta tiến lên.

Với điều này tôi muốn hoàn thành Đánh giá ngắn Bộ tiền xử lý Sass. Tại sao lại nhỏ? Đúng, bởi vì đây không phải là tất cả những gì tôi đã nói với bạn. Nói chung, bằng cách sử dụng cách trên, bạn có thể bắt đầu sử dụng Sass thay vì Css một cách an toàn ngay bây giờ. Bạn có thể tìm hiểu thêm về Sass bằng cách tham khảo tài liệu tôi cung cấp ở trên.

Vâng, cảm ơn tất cả các bạn đã quan tâm! Như mọi khi, hãy đặt câu hỏi trong phần bình luận và đăng ký kênh telegram hoặc bản tin email (biểu mẫu ở thanh bên bên phải) để không bỏ lỡ bất kỳ điều gì thú vị.

Hẹn gặp lại các bạn ở những bài viết khác của tôi...

Nếu bạn muốn chuyển từ CSS sang Sass, nhưng câu hỏi là “Làm cách nào để biên dịch các tệp Sass thành CSS thô?”, thì có rất nhiều phương pháp để thực hiện và bây giờ tôi sẽ kể cho bạn nghe về cách đơn giản nhất trong số đó - chương trình Koala .

Đây là một chương trình đa nền tảng để biên dịch Less, Sass, Compass và CoffeeScript. Hoạt động trên Win, Mac OS và Linux.

Chương trình này miễn phí và dựa vào sự đóng góp hào phóng. Tuy nhiên, khi tôi cố gắng chuyển một vài xu cho những người trên Paypal vài năm trước, nó đã không thành công. Các nhà bán lẻ được đặt tại Trung Quốc và Paypal ở đó chỉ hoạt động để gửi tiền. Prote, chương trình đã không trở nên tồi tệ hơn. Chúng ta hãy nhìn vào báo cáo.

Thuận lợi

  • Hỗ trợ nhiều ngôn ngữ: Koala hoạt động với khung Less, Sass (*.scss), CoffeeScript và Compass. Ngoài ra, nó có thể biên dịch CSS và JS gốc không được liên kết với bộ tiền xử lý.
  • biên soạn trong giờ thựcі : Koala phát hiện các thay đổi của tệp và tự động biên dịch chúng. Tất cả các hành động được thực hiện ở chế độ nền và không yêu cầu nhà bán lẻ giao hàng.
  • Biên dịch đã điều chỉnh: Bạn có thể chỉ định các trình biên dịch khác nhau cho tệp giao diện. Tuy nhiên, bạn khó có thể cần nó.
  • Nén: Koala có thể tự động nén mã sau khi biên dịch. Chức năng này không thể bỏ qua.
  • Nhắc nhở về việc sửa đổi: Nếu chương trình đã thực hiện thay đổi mã trong quá trình biên dịch, nó sẽ hiển thị thông báo. Không có sự tha thứ, bạn chỉ cần tải lại tệp kết quả.
  • Đa nền tảng: Koala chạy trên Windows, Mac và Linux.

Giao diện

Về cơ bản, chương trình có thể định vị tất cả các dự án đang hoạt động (ở bên trái) và các thành phần điều khiển chính. Như bạn có thể thấy, giao diện rất tối giản và bạn có thể bắt đầu sau vài phút.

Các yếu tố điều khiển chính luôn ở trong tầm mắt. Trục cho những gì mùi hôi là cần thiết:

Khi bạn chuyển đổi loại tệp từ danh sách chính, chỉ các tệp thuộc loại đã chọn sẽ bị mất.

Thiết lập Sass và LESS

Người nghe đã nhận được bài phát biểu. Hãy lấy tab cài đặt Sass:

Sau hai cú nhấp chuột, Koala sẽ lưu lại các tệp Sass của bạn trong CSS và bạn sẽ không cần cài đặt bất kỳ plugin bổ sung nào cho Sass.

Koala có thể tự động thêm tiền tố trên nhiều trình duyệt cho cơ quan quản lý CSS, lưu nhận xét. Đối với loại tệp CSS, tôi luôn khuyên bạn nên chọn nén để đầu vào ở mức tối thiểu và để dễ phát triển, hãy tắt Bản đồ nguồn.

Tiền tố tự động - đây là tính năng tự động bổ sung tiền tố để hỗ trợ sức mạnh của CSS3 trong các trình duyệt phiên bản cũ hơn.

Ví dụ: để làm tròn các cạnh thêm 3 pixel, bạn sẽ phải viết:

Bán kính đường viền: 3px;

...và sau khi làm việc với tiền tố tự động, bạn loại bỏ:

Bán kính đường viền Webkit: 3px; -moz-biên giới-bán kính: 3px; bán kính đường viền: 3px;

Ngoài ra, cài đặt cho từng loại tệp đều có sẵn ở bảng bên phải. Để thực hiện việc này, hãy chọn một tệp từ danh sách và ở bên phải, bạn sẽ thấy cài đặt cho các tệp thuộc loại đó.

Trước khi nói, với phiên bản 4 của Bootstrap và LESS trên Sass, đây là thời điểm tốt để bắt đầu học.

Điều chỉnh JavaScript và CoffeeScript

Đối với JS chỉ có hai cài đặt:

  1. Nén - bật nó lên trước để xóa tệp js bằng cách nén nó.
  2. Bảo lưu ý kiến ​​bản quyền

Đối với CoffeeScript, trong 99% trường hợp, bạn sẽ xóa các cài đặt hậu trường, vì vậy không có ích gì khi phàn nàn về chúng.

Tải xuống

Tải xuống chương trình từ trang ngoại vi của nhà bán lẻ - koala-app.com. Ngoài ra còn có tin nhắn cho Linux, Mac, Ubuntu.

Trong túi

Tóm lại, tôi có thể gọi Koala là giải pháp đơn giản và đúng đắn nhất dành cho người tiêu dùng không cần các cài đặt và chức năng phức tạp. Nếu bạn cần một giao diện đồ họa để hoạt động, chỉ biên dịch Sass/Less/CSS và không cần phải tìm hiểu sâu về dòng lệnh thì Koala là lựa chọn dành cho bạn.

Tôi đã viết về những người như thế này và họ sẽ giúp cuộc sống của bọn cướp dễ dàng hơn như thế nào. Tôi khuyên bạn nên làm quen với nó, nó thực sự dễ dàng.

Koala phù hợp với những nhà phát triển mới vào nghề hoặc những người đang làm việc trong một dự án nhỏ và không muốn lãng phí phiên bản mới của Gulp hoặc Grunt.js.

Hãy nhấn “Thích” để theo dõi chúng tôi trên Facebook

Sass là một tiện ích mở rộng CSS bổ sung các quy tắc, biến, mixin, hàm lồng nhau, v.v. Sử dụng nó làm cho nhiệm vụ tạo CSS dễ dàng hơn. Sau khi xử lý mã Sass, bạn sẽ có được mã CSS được định dạng chính xác.

La bàn là một khung CSS nguồn mở mã nguồn, cho phép bạn sử dụng CSS3 và các mẫu thiết kế phổ biến. Compass hoạt động độc quyền với Sass, giúp bạn viết mã CSS sạch hơn và nhanh hơn.

Bài viết này cung cấp một lựa chọn Công cụ hữu íchđể làm việc với Sass và Compass, điều này sẽ giúp bạn tạo các ứng dụng web động một cách nhanh chóng và dễ dàng.

1.Compass.app

Compass là một framework giúp việc tạo và duy trì các kiểu cũng như đánh dấu trở nên dễ dàng hơn nhiều. Sử dụng La bàn, bạn sẽ tạo kiểu trong Sass thay vì CSS thông thường. Compass.app là một ứng dụng thanh menu chỉ hoạt động với Sass và Compass.

Việc sử dụng nó cho phép các nhà thiết kế biên dịch các kiểu rất dễ dàng mà không cần sử dụng giao diện dòng lệnh. Compass.app được viết bằng Java ( JRuby) và hoạt động trên Mac, Linux và PC. Để sử dụng nó, bạn không cần cài đặt môi trường Ruby.

2. Hướng đạo


Scout là một ứng dụng đa nền tảng chạy Sass và Compass thông qua framework Ruby tích hợp, giúp bạn dễ dàng quản lý tất cả các dự án Sass của mình. Bây giờ bạn không phải lo lắng về việc cài đặt Ruby hay xử lý các vấn đề kỹ thuật khác.

3. Bộ mã


Codekit là một trình biên dịch mạnh mẽ, tự động xử lý các tệp Sass, Compass, Less, Stylus, Jade, Haml, Slim, CoffeeScript và Javascript khi lưu.

Bằng cách sử dụng tính năng làm mới trình duyệt tương tác, tối ưu hóa hình ảnh và gỡ lỗi nhanh, Compass và Sass cực kỳ dễ làm việc. Ứng dụng này cũng hỗ trợ khả năng làm việc tập thể/nhóm trong một dự án và giúp giảm thời gian tải tài nguyên bằng cách kết hợp và giảm thiểu các tệp.

4. Nguyên mẫu


Archteype là một khung La bàn/Sass để tạo các mẫu và thành phần giao diện có thể tùy chỉnh, tương tác. Archteyepe đi kèm với tài liệu phong phú và sử dụng cú pháp ngôn ngữ lập trình gốc.

5.Susy


Susy cung cấp cho người dùng lưới thích ứng cho la bàn. Do đó, lấp đầy khoảng trống còn lại sau khi các lưới bị xóa khỏi La bàn. Bạn có thể nhanh chóng thêm bố cục mới Điểm kiểm soát truy vấn phương tiện hoặc đặt tham số của riêng bạn bằng mảng lưới Susy. Công cụ này cho phép bạn tạo một trang web nhỏ hoặc một thư viện lưới có thể mở rộng để sử dụng trong các dự án lớn trong vài phút.

6. Đường Sassway


Sass Way cung cấp một cái nhìn tổng quan tin mới nhất và những phát triển trong phát triển CSS với Sass và Compass. Tài nguyên xuất bản các bài báo, tài nguyên có thể tải xuống và dạy học, sẽ hữu ích cho cả người mới bắt đầu và người dùng nâng cao.

7. Sassaparilla


Sassaparilla cho phép bạn khởi chạy các dự án web đáp ứng nhanh hơn nhiều bằng Sass và Compass. Công cụ này được thiết kế chủ yếu để làm việc với bố cục dọc.

Nó cho phép bạn chỉ định kích thước của các phần tử bằng pixel và tại thời điểm biên dịch, chúng được dịch sang Em, điều này giúp các nhà thiết kế giảm bớt nhu cầu thực hiện các phép tính toán học phức tạp. Sassaparilla hỗ trợ các biến được Sass sử dụng, ví dụ như để xác định màu sắc hoặc các tham số khác.

8.Hướng dẫn Phong cách Sống


LivingStyleGuide Gem là một công cụ được thiết kế để giúp bạn dễ dàng tạo các hướng dẫn về phong cách cho Sass và Compass. Để tạo hướng dẫn về phong cách, chỉ cần thêm nhận xét của bạn vào Sass ở một trong các định dạng Markdown.

9. Pondasee


Công cụ Pondasee được thiết kế để tăng tốc quá trình tạo ứng dụng web. Nó có tất cả các tính năng và chức năng của SCSS và Compass, đồng thời được thiết kế để giúp việc tạo mẫu trở nên dễ dàng.

10. Tải lại trực tiếp


LiveReload được tích hợp vào thanh menu và giám sát mọi thay đổi đối với hệ thống tệp. Ngay khi bạn lưu tệp, nó sẽ được xử lý theo các tham số đã chỉ định và cửa sổ trình duyệt được làm mới. LiveReload hoạt động với các công cụ SASS, Compass, LESS, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML và Jade. Nó có thể được định cấu hình chỉ bằng hai hộp kiểm, vì vậy bạn không cần phải vắt óc một lượng lớn tùy chọn.

11. Gấu túi


Koala là một ứng dụng GUI để biên dịch CoffeeScript, Compass, Less và Sass giúp quá trình phát triển thiết kế web của bạn hiệu quả hơn. Ứng dụng này chạy trên Mac, Linux và Windows và bao gồm các tính năng như biên dịch theo thời gian thực, hỗ trợ nhiều ngôn ngữ lập trình, v.v.

12. Bootstrap Sass


Bootstrap-Sass là phiên bản Sass của Bootstrap lý tưởng để phát triển các ứng dụng Sass. Công cụ này chỉ có thể được cài đặt với Rails, Compass hoặc Sass.

13. Rèn


Forge là một bộ công cụ dòng lệnh miễn phí. Nó được thiết kế để tải xuống và phát triển trong môi trường thích hợp Chủ đề WordPress sử dụng các ngôn ngữ lập trình như Sass, LESS và CoffeeScript.

Forge tạo một thư mục nguồn có cấu trúc với hệ thống phân cấp rõ ràng và đơn giản ( tệp mẫu lõi, tệp SCSS và tùy chọn chủ đề). Khi có thay đổi trong quá trình phát triển, thư mục nguồn sẽ tự động được biên dịch cục bộ hệ thống được cài đặt WordPress.

14.Prepros


Prepros là một ứng dụng được thiết kế để giúp việc biên dịch mã dễ dàng hơn. Nó biên dịch mã Sass, Scss, Compass, Less, Jade, Haml và CoffeeScript trong thời gian thực, với cập nhật tự động cửa sổ trinh duyệt. Ứng dụng này không có phụ thuộc và có các tính năng như máy chủ HTTP tích hợp, theo dõi tệp trong lý lịch, thông báo lỗi và đưa vào CSS tương tác.

Xin chào! Hôm nay tôi bắt đầu một loạt bài viết về bộ tiền xử lý CSS. Và tôi muốn bắt đầu bằng việc xem xét chương trình Koala, chương trình giúp biên dịch mã từ LESS hoặc SASS sang CSS.

gấu túi là một chương trình đa nền tảng để biên dịch Less, Sass, Compass và CoffeeScript. Hoạt động trên Win, Mac OS và Linux.

Chương trình này miễn phí và dựa vào sự đóng góp từ thiện. Tuy nhiên, khi tôi cố gắng chuyển một số tiền cho họ vài năm trước, việc đó đã không thành công. Các nhà phát triển có trụ sở tại Trung Quốc và Paypal chỉ hoạt động ở đó để gửi tiền. Tuy nhiên, điều này không làm cho chương trình trở nên tồi tệ hơn. Chúng ta hãy xem xét kỹ hơn.

Thuận lợi

  • Hỗ trợ đa ngôn ngữ: Koala hoạt động với khung Less, Sass (*.scss), CoffeeScript và Compass. Ngoài ra, nó có thể biên dịch CSS và JS thông thường không liên quan đến bộ tiền xử lý.
  • Biên dịch theo thời gian thực: Koala giám sát các thay đổi của tệp và tự động biên dịch chúng. Tất cả các hành động diễn ra ở chế độ nền và không cần sự can thiệp của nhà phát triển.
  • Cài đặt biên dịch: Bạn có thể chỉ định các trình biên dịch khác nhau cho mỗi tệp đã chọn. Tuy nhiên, bạn khó có thể cần điều này.
  • Nén: Koala có thể tự động nén mã sau khi biên dịch. Chức năng này có thể được bỏ qua nếu muốn.
  • Thông báo lỗi: Nếu chương trình gặp lỗi trong mã khi biên dịch, nó sẽ hiển thị thông báo. Nếu không có lỗi, tệp kết quả sẽ được tạo lại.
  • Đa nền tảng: Koala chạy trên Windows, Mac và Linux.

Giao diện

Cửa sổ chương trình chính chứa tất cả các dự án đang hoạt động (ở bên trái) và các điều khiển chính. Như bạn có thể thấy, giao diện rất tối giản, bạn có thể tìm ra nó sau vài phút.

Các điều khiển chính luôn hiển thị. Đây là mục đích của chúng:

Khi chuyển đổi loại tệp từ danh sách chung, chỉ các tệp thuộc loại đã chọn sẽ còn lại.

Cài đặt SASS và LESS

Có một số điều tốt đẹp trong cài đặt. Hãy lấy tab cài đặt Sass:

Sau hai cú nhấp chuột, Koala sẽ bắt đầu lưu các tệp Sass của bạn trong CSS; bạn sẽ không cần cài đặt bất kỳ plugin Sass bổ sung nào.

Koala có thể tự động thêm tiền tố trên nhiều trình duyệt cho thuộc tính CSS và lưu nhận xét. Trong loại tệp CSS, tôi luôn khuyên bạn nên chọn nén để trọng lượng của nó sẽ ở mức tối thiểu và để dễ phát triển, hãy bật Bản đồ nguồn.

Tiền tố tự động là bổ sung tự động tiền tố để hỗ trợ các thuộc tính CSS3 trong các trình duyệt cũ.

Ví dụ: để làm tròn các góc thêm 3 pixel, bạn sẽ chỉ cần viết:

Bán kính đường viền: 3px;

...và sau khi tiền tố tự động hoạt động, bạn sẽ nhận được:

Bán kính đường viền Webkit: 3px; -moz-biên giới-bán kính: 3px; bán kính đường viền: 3px;

Ngoài ra, cài đặt cho từng loại tệp có sẵn trong bảng bên phải. Để thực hiện việc này, hãy chọn một tệp trong danh sách và cài đặt cho loại tệp này sẽ mở ra ở phía bên phải.

Cài đặt JavaScript và CoffeeScript

Đối với JS chỉ có hai cài đặt:

  1. Nén - luôn bật để nén tệp js kết quả.
  2. Bảo lưu ý kiến ​​bản quyền

Đối với CoffeeScript, trong 99% trường hợp, bạn sẽ để nguyên cài đặt mặc định, vì vậy không có ích gì khi dừng lại ở đó.

Tôi có thể tải xuống ở đâu

Tải xuống chương trình từ trang web chính thức của nhà phát triển - koala-app.com. Có link riêng cho Linux, Mac, Ubuntu.

Sau cùng

Do đó, tôi có thể gọi Koala là giải pháp đơn giản và đúng đắn nhất dành cho nhà phát triển không cần các cài đặt và chức năng phức tạp. Nếu bạn cần một giao diện đồ họa cho công việc của mình, hãy chỉ biên dịch Sass/Less/CSS và không muốn đào sâu vào dòng lệnh, thì Koala chính là sự lựa chọn của bạn.

Koala phù hợp cho các nhà phát triển mới bắt đầu hoặc những người đang thực hiện một dự án nhỏ và không muốn triển khai phiên bản đầy đủ Gulp hoặc Grunt.js.

Ngày 24 tháng 3 năm 2012 lúc 01:22 chiều

SCSS - một chút luyện tập, phần I

  • CSS

Đã có rất nhiều bài viết về SASS (SCSS), Ít hơn về Habrahabr, nhưng theo tôi thì không có đủ bài viết chứa đựng một chút thực hành thực tế. Tôi sẽ cố gắng lấp đầy khoảng trống này. Khoảng một năm trước, một trong những bài viết của SASS đã “hút” tôi, và kể từ đó tôi yêu thích công nghệ này đến mức việc gõ thủ công mã CSS thông thường đối với tôi có vẻ như lãng phí thời gian. Bài viết này dành riêng cho những nhà thiết kế bố cục (hoặc lập trình viên web), những người chưa nghe nói về SCSS hoặc chưa thử nó trong thực tế. Tôi tin rằng những đồng chí giàu kinh nghiệm hơn không có gì đáng chú ý trong đó.

SCSS là gì

SCSS là một "phương ngữ" của ngôn ngữ SASS. SASS là gì? SASS là một ngôn ngữ tương tự như HAML (một công cụ tạo mẫu rất ngắn gọn), nhưng được thiết kế để đơn giản hóa việc tạo mã CSS. Nói một cách đơn giản, SASS là ngôn ngữ có mã được dịch sang mã CSS thông thường bằng một chương trình ruby ​​​​đặc biệt. Cú pháp của ngôn ngữ này rất linh hoạt, nó tính đến nhiều điều nhỏ nhặt rất đáng mong đợi trong CSS. Hơn nữa, nó thậm chí còn có logic (@if, ), toán học (bạn có thể thêm số, chuỗi và màu sắc). Có lẽ một số tính năng SCSS sẽ có vẻ dư thừa đối với bạn, nhưng theo tôi, chúng sẽ không thừa mà sẽ vẫn “dự trữ”.

Sự khác biệt giữa SCSS và SASS là SCSS giống với mã CSS thông thường hơn. Mã SASS ví dụ:

$blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%) .border đệm: $margin / 2 lề: $margin / 2 border-color: $blue
Và điều tương tự trên SCSS:

$xanh: #3bbfce; lề $: 16px; .content-navigation ( border-color: $blue; color: darken($blue, 9%); ) .border ( phần đệm: $margin / 2; Margin: $margin / 2; border-color: $blue; )
Tôi chọn SCSS vì nó dễ hiểu hơn đối với những đồng nghiệp chưa quen với nó. Cũng cần lưu ý rằng mã CSS thông thường rất phù hợp với cú pháp SCSS.

Cài đặt và sử dụng

Đầu tiên bạn cần cài đặt Ruby. Sau đó, bạn cần cài đặt sass-gem (gem install sass trong bảng điều khiển). Nếu mọi việc suôn sẻ thì chương trình sass console hiện đã có sẵn cho bạn. Bạn có thể đọc về tất cả các sắc thái của việc sử dụng nó ở đây - sass --help. Tôi sẽ chỉ nói về hai tính năng cơ bản:

--đồng hồ

Nếu bạn chạy sass bằng khóa chuyển --watch, chương trình sẽ giám sát các tệp bạn chỉ định. Nếu chúng thay đổi, nó sẽ tự động xây dựng lại tất cả các tệp css cần thiết (không phải tất cả chúng, mà chỉ những tệp được liên kết với những tệp đã thay đổi).

Giả sử bạn có cấu trúc dự án sau:

Css ---- scss ------ style.scss ---- style.css
Sass cần phải theo dõi tất cả các thay đổi trong css/scss/* và lưu kết quả vào css/*.css . Trong trường hợp này, hãy chạy sass như thế này: sass --watch css/scss:css/. . Những thứ kia. sass --watch [cái gì]:[ở đâu] .

--cập nhật

Nếu bạn cần cập nhật tệp css một lần, hãy sử dụng --update thay vì --watch. Sẽ không có sự giám sát cũng như kiểm tra nhu cầu cập nhật.

Điều đáng chú ý là, không giống như Less, SASS không biết cách biên dịch mã trực tiếp trong trình duyệt. Theo tôi, cách tiếp cận này (biên dịch trên máy chủ hoặc trình thiết kế bố cục PC) là cách duy nhất đúng.

Luyện tập

Vì vậy, chúng ta đến điều quan trọng nhất. Hãy bắt đầu với @import .

@nhập khẩu

Ban đầu, trước khi sử dụng SCSS, tất cả mã CSS của công cụ mà tôi phải làm việc đều nằm trong một tệp style.css khổng lồ. IDE của tôi (Netbeans (nhân tiện, đây là một plugin để đánh dấu cú pháp)) đã hoạt động với nó nhưng có độ chậm đáng kể. Không ai muốn chia nó thành nhiều tệp nhỏ hơn và nếu cần, hợp nhất chúng thành 1. SCSS tự động xử lý vấn đề này.

Điều đáng chú ý là 1 sắc thái. Nếu bạn cung cấp sass không phải một tệp nguồn cụ thể mà là một thư mục thì tập tin css sẽ không được tạo cho các tệp bắt đầu bằng _ . Những thứ kia. sự hiện diện của tệp style.scss sẽ dẫn đến việc tạo style.css, nhưng sự hiện diện của tệp _some.scss thì không.

Vì vậy, để bao gồm nội dung của tệp _template.scss hoặc template.scss chúng tôi viết

@import "mẫu"; // mẫu
Cuối cùng, thay vì 1 tệp style.css lớn, tôi đã có hơn một trăm tệp scss nhỏ. Thoạt nhìn, có vẻ như số tiền này quá lớn và sẽ dẫn đến sự dày vò khủng khiếp. Tuy nhiên, tôi tìm thấy ngay file mình cần dựa trên cấu trúc thư mục tiện lợi. Ngoài ra, tôi tin rằng nhờ có bộ nhớ đệm, “sơ đồ” này sẽ hiệu quả hơn.

@làm tổ

Một trong những tính năng đáng mong đợi nhất của CSS là lồng các bộ chọn. Ví dụ:

#some ( border: 1px màu đỏ đậm; .some ( nền: trắng; ) ) /* => */ #some ( border: 1px màu đỏ đậm; ) #some .some ( nền: trắng; )
Một vi dụ khac:

Đầu vào ( border: 1px màu xám đậm; nền: trắng; & ( color: black; ) &.some_class ( display: none; ) ) /* => */ input ( border: 1px màu xám đậm; nền: trắng; ) đầu vào ( màu: đen; ) input.some_class ( display: none; )
Ký tự & tương đương với bộ chọn cha. Giả sử thẻ chúng tôi có lớp ie_7, trong trường hợp chúng tôi có trình duyệt trình duyệt web IE 7. Đoạn mã sau cho phép bạn loại bỏ tất cả các “hack” và nhận xét đặc biệt:

$IE_7: "body.ie_7"; //... .some ( display: inline-block; #($IE_7) & ( zoom: 1; display: inline; ) ) /* => */ .some ( display: inline-block; ) body.ie_7 .some (thu phóng: 1; hiển thị: nội tuyến; )

biến $

Biến là một điều tiện dụng. Chúng được định nghĩa như thế này:

$some:đỏ;
Các biến không phải là hằng số, chúng có thể được thay đổi khi mã phát triển :) Một trong những suy nghĩ đầu tiên của tôi là tệp _const.scss, chứa mọi thứ màu sắc cơ bản, cỡ chữ, v.v.

liên kết $: #15157d; $link_bottom: $link; $input_font_size: 13px; $content_bg: #F1F1F1; $input_color: #4E4D4D; $input_color_placeholder: #959595; $text_color: đen; ...
Người ta giả định rằng màu của các liên kết trên trang web là $link .

A ( color: $link; ) span.link ( color: $link; text-trang trí: gạch chân; )
Nếu sau này màu của các liên kết đã thay đổi thì chỉ cần thay đổi 1 biến là đủ (trong trường hợp CSS, bạn sẽ cần phải tự động thay thế các tệp, thậm chí có thể có chọn lọc). Giả sử, đột nhiên, trong một số mô-đun danh bạ, màu sắc của các liên kết là khác nhau. Có ít nhất hai giải pháp.

$contacts_link: màu cam; // mã mô-đun sử dụng $contacts_link thay vì $link
Thứ hai

$__liên kết: $liên kết; $link: màu cam; // mã mô-đun $link: $__link;
Các biến của chúng tôi không được gõ, vì vậy chúng có thể chứa các chuỗi, số và màu sắc như nhau.

@toán học

Hãy chia toán học thành 2 loại - màu sắc và số. Hãy bắt đầu với những con số. Ví dụ đơn giản:

Khối ( $block_width: 500px; phần đệm: 5px; đường viền: 1px màu đen đặc; chiều rộng: $block_width - (5px * 2) - (1px * 2); )
Nếu muốn, bạn cũng có thể đặt phần đệm với đường viền bằng các biến. Tất cả phụ thuộc vào độ phức tạp của bố cục.

Một vi dụ khac:

Chặn ( $count: 10; $margin_left: 5px; $all_width: 1000px; width: $all_width; .sub_element ( width: ($all_width / $count) - $margin_left; lề: 0 0 0 $margin_left; ) )
Tôi muốn lưu ý rằng loại này thao tác được sử dụng rất thường xuyên. Không có họ tôi như không có chân.

Và bây giờ là màu sắc. Màu sắc có thể được thêm vào và nhân lên:

Một số ( $color: #010203; color: $color; border-color: $color - #010101; &:hover ( color: #010203 * 2; ) ) /* => */ .some ( color: #010203; màu viền: #000102; ) .some:hover ( color: #020406; )
Khá là tiện ích khi bạn quá lười chọn màu. Cũng có sẵn các chức năng như làm mờ và làm trong suốt (thêm