Lề in css không có

Question

Trước khi bạn có thể sử dụng Sass, bạn cần thiết lập nó trong dự án của mình. Nếu bạn chỉ muốn duyệt ở đây, hãy tiếp tục, nhưng chúng tôi khuyên bạn nên cài đặt Sass trước. Truy cập vào đây nếu bạn muốn tìm hiểu cách thiết lập mọi thứ

Sơ chế

Bản thân CSS có thể thú vị, nhưng biểu định kiểu ngày càng lớn hơn, phức tạp hơn và khó bảo trì hơn. Đây là lúc một bộ tiền xử lý có thể trợ giúp. Sass có các tính năng chưa có trong CSS như lồng ghép, hỗn hợp, kế thừa và các tính năng tiện lợi khác giúp bạn viết CSS mạnh mẽ, có thể bảo trì

Sau khi bạn bắt đầu mày mò với Sass, nó sẽ lấy tệp Sass đã xử lý trước của bạn và lưu dưới dạng tệp CSS bình thường mà bạn có thể sử dụng trong trang web của mình

Cách trực tiếp nhất để thực hiện điều này là trong thiết bị đầu cuối của bạn. Sau khi cài đặt Sass, bạn có thể biên dịch Sass của mình thành CSS bằng lệnh

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

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

2. Bạn sẽ cần cho Sass biết nên xây dựng tệp nào và xuất CSS sang đâu. Ví dụ: chạy

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

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

3 từ thiết bị đầu cuối của bạn sẽ lấy một tệp Sass duy nhất,

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

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

4 và biên dịch tệp đó thành

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

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

5

Bạn cũng có thể xem các tệp hoặc thư mục riêng lẻ có cờ

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

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

6. Cờ theo dõi yêu cầu Sass xem các tệp nguồn của bạn để biết các thay đổi và biên dịch lại CSS mỗi khi bạn lưu Sass của mình. Nếu bạn muốn xem (thay vì tạo thủ công) tệp

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

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

4 của mình, bạn chỉ cần thêm cờ theo dõi vào lệnh của mình, như vậy

sass --watch input.scss output.css

Bạn có thể xem và xuất ra các thư mục bằng cách sử dụng đường dẫn thư mục làm đầu vào và đầu ra của mình, đồng thời phân tách chúng bằng dấu hai chấm. Trong ví dụ này

sass --watch app/sass:public/stylesheets

Sass sẽ xem tất cả các tệp trong thư mục

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

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

8 để biết các thay đổi và biên dịch CSS sang thư mục

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

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

9

💡 Sự thật thú vị

Sass có hai cú pháp. Cú pháp SCSS (

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

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

00) được sử dụng phổ biến nhất. Đó là một siêu bộ CSS, có nghĩa là tất cả CSS hợp lệ cũng là SCSS hợp lệ. Cú pháp thụt lề (

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

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

01) khác thường hơn. nó sử dụng dấu thụt đầu dòng thay vì dấu ngoặc nhọn để lồng các câu lệnh và dòng mới thay vì dấu chấm phẩy để phân tách chúng. Tất cả các ví dụ của chúng tôi đều có sẵn ở cả hai cú pháp

Biến

Hãy nghĩ về các biến như một cách để lưu trữ thông tin mà bạn muốn sử dụng lại trong toàn bộ biểu định kiểu của mình. Bạn có thể lưu trữ những thứ như màu sắc, ngăn xếp phông chữ hoặc bất kỳ giá trị CSS nào mà bạn cho rằng mình sẽ muốn sử dụng lại. Sass sử dụng ký hiệu

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

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

02 để biến một thứ gì đó thành một biến. Đây là một ví dụ

SCSS Cú pháp

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

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

Cú pháp Sass

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

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

0

Đầu ra CSS

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

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

5

Khi Sass được xử lý, nó sẽ nhận các biến mà chúng tôi xác định cho _______103 và

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

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

04 và xuất ra CSS bình thường với các giá trị biến của chúng tôi được đặt trong CSS. Điều này có thể cực kỳ hiệu quả khi làm việc với màu sắc thương hiệu và giữ cho chúng nhất quán trên toàn bộ trang web

làm tổ

Khi viết HTML, bạn có thể nhận thấy rằng nó có một hệ thống phân cấp hình ảnh và lồng nhau rõ ràng. Mặt khác, CSS không

Sass sẽ cho phép bạn lồng các bộ chọn CSS theo cách tuân theo cùng một hệ thống phân cấp trực quan trong HTML của bạn. Xin lưu ý rằng các quy tắc được lồng ghép quá mức sẽ dẫn đến CSS quá đủ tiêu chuẩn có thể khó duy trì và thường được coi là phương pháp không tốt

Với ý nghĩ đó, đây là ví dụ về một số phong cách điển hình cho điều hướng của một trang web

SCSS Cú pháp

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

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

8

Cú pháp Sass

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

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

9

Đầu ra CSS

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

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

0

Bạn sẽ nhận thấy rằng bộ chọn

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

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

05,

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

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

06 và

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

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

07 được lồng bên trong bộ chọn

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

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

08. Đây là một cách tuyệt vời để tổ chức CSS của bạn và làm cho nó dễ đọc hơn

một phần

Bạn có thể tạo một phần tệp Sass chứa các đoạn CSS nhỏ mà bạn có thể đưa vào các tệp Sass khác. Đây là một cách tuyệt vời để mô-đun hóa CSS của bạn và giúp duy trì mọi thứ dễ dàng hơn. Một phần là tệp Sass được đặt tên với dấu gạch dưới ở đầu. Bạn có thể đặt tên nó là gì đó như

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

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

09. Dấu gạch dưới cho Sass biết rằng tệp này chỉ là tệp một phần và nó không được tạo thành tệp CSS. Sass partials được sử dụng với quy tắc

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

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

50

mô-đun

Hiện chỉ có Dart Sass hỗ trợ

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

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

50. Thay vào đó, người dùng của các triển khai khác phải sử dụng quy tắc

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

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

52

Bạn không cần phải viết tất cả Sass của mình trong một tệp. Bạn có thể chia nó theo bất kỳ cách nào bạn muốn với quy tắc

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

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

50. Quy tắc này tải một tệp Sass khác dưới dạng một mô-đun, nghĩa là bạn có thể tham chiếu đến các biến, mixin và hàm của nó trong tệp Sass của mình bằng một không gian tên dựa trên tên tệp. Việc sử dụng một tệp cũng sẽ bao gồm CSS mà nó tạo ra trong đầu ra được biên dịch của bạn

SCSS Cú pháp

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

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

0

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

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

1

Cú pháp Sass

sass --watch app/sass:public/stylesheets

0____71

Đầu ra CSS

sass --watch app/sass:public/stylesheets

2

Lưu ý rằng chúng tôi đang sử dụng

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

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

54 trong tệp

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

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

55. Khi sử dụng một tệp, bạn không cần thêm phần mở rộng của tệp. Sass rất thông minh và sẽ tìm ra điều đó cho bạn

hỗn hợp

Viết một số thứ trong CSS hơi tẻ nhạt, đặc biệt là với CSS3 và có nhiều tiền tố của nhà cung cấp. Mixin cho phép bạn tạo các nhóm khai báo CSS mà bạn muốn sử dụng lại trên toàn bộ trang web của mình. Nó giúp giữ cho Sass của bạn rất KHÔ. Bạn thậm chí có thể chuyển các giá trị để làm cho mixin của bạn linh hoạt hơn. Đây là một ví dụ cho

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

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

56

SCSS Cú pháp

sass --watch app/sass:public/stylesheets

3

Cú pháp Sass

sass --watch app/sass:public/stylesheets

4

Đầu ra CSS

sass --watch app/sass:public/stylesheets

5

Để tạo mixin, bạn sử dụng chỉ thị

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

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

57 và đặt tên cho nó. Chúng tôi đã đặt tên cho mixin của mình là

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

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

56. Chúng tôi cũng đang sử dụng biến

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

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

59 bên trong dấu ngoặc đơn để chúng tôi có thể chuyển vào một

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

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

56 bất cứ thứ gì chúng tôi muốn. Sau khi tạo mixin, bạn có thể sử dụng mixin đó làm tuyên bố CSS bắt đầu bằng

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

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

81 theo sau là tên của mixin

Mở rộng/Kế thừa

Việc sử dụng

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

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

82 cho phép bạn chia sẻ một tập hợp các thuộc tính CSS từ bộ chọn này sang bộ chọn khác. Trong ví dụ của chúng tôi, chúng tôi sẽ tạo một chuỗi thông báo đơn giản cho các lỗi, cảnh báo và thành công bằng cách sử dụng một tính năng khác đi đôi với các lớp giữ chỗ mở rộng. Lớp trình giữ chỗ là một loại lớp đặc biệt chỉ in khi nó được mở rộng và có thể giúp giữ cho CSS đã biên dịch của bạn gọn gàng và sạch sẽ

SCSS Cú pháp

sass --watch app/sass:public/stylesheets

6

Cú pháp Sass

sass --watch app/sass:public/stylesheets

7

Đầu ra CSS

sass --watch app/sass:public/stylesheets

8

Tác dụng của đoạn mã trên là yêu cầu ________ 183, ________ 184, ________ 185, và ________ 186 hành xử giống như

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

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

87. Điều đó có nghĩa là bất cứ nơi nào có

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

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

87 xuất hiện, thì

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

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

83,

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

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

84,

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

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

85 và

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

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

86 cũng sẽ xuất hiện. Điều kỳ diệu xảy ra trong CSS được tạo, trong đó mỗi lớp này sẽ có các thuộc tính CSS giống như

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

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

87. Điều này giúp bạn tránh phải viết nhiều tên lớp trên các phần tử HTML

Bạn có thể mở rộng hầu hết các bộ chọn CSS đơn giản ngoài các lớp trình giữ chỗ trong Sass, nhưng sử dụng trình giữ chỗ là cách dễ nhất để đảm bảo rằng bạn không mở rộng một lớp được lồng ở nơi khác trong kiểu của bạn, điều này có thể dẫn đến các bộ chọn ngoài ý muốn trong CSS của bạn

Xin lưu ý rằng CSS trong

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

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

94 không được tạo vì

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

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

94 không bao giờ được mở rộng

nhà điều hành

Làm toán trong CSS của bạn rất hữu ích. Sass có một số toán tử toán học tiêu chuẩn như

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

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

96,

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

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

97,

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

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

98,

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

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

99 và

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

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

00. Trong ví dụ của chúng tôi, chúng tôi sẽ thực hiện một số phép toán đơn giản để tính chiều rộng cho

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

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

01 và

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

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

02

SCSS Cú pháp

sass --watch app/sass:public/stylesheets

9

Cú pháp Sass

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

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

0

Đầu ra CSS

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

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

1

Chúng tôi đã tạo một lưới chất lỏng rất đơn giản, dựa trên 960px. Các thao tác trong Sass cho phép chúng tôi thực hiện một số việc như lấy giá trị pixel và chuyển đổi chúng thành tỷ lệ phần trăm mà không gặp nhiều rắc rối

programming css

Lề in css không có

Sơ chế

💡 Sự thật thú vị

Biến

SCSS Cú pháp

Cú pháp Sass

Đầu ra CSS

làm tổ

SCSS Cú pháp

Cú pháp Sass

Đầu ra CSS

một phần

mô-đun

SCSS Cú pháp

Cú pháp Sass

Đầu ra CSS

hỗn hợp

SCSS Cú pháp

Cú pháp Sass

Đầu ra CSS

Mở rộng/Kế thừa

SCSS Cú pháp

Cú pháp Sass

Đầu ra CSS

nhà điều hành

SCSS Cú pháp

Cú pháp Sass

Đầu ra CSS

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội