Sass - Chỉ thị chức năng

Trong chương này, chúng ta sẽ nghiên cứu về Function Directives. Trong SASS, bạn có thể tạo hàm của riêng mình và sử dụng chúng trong ngữ cảnh tập lệnh của bạn hoặc có thể được sử dụng với bất kỳ giá trị nào. Các hàm được gọi bằng cách sử dụng tên hàm và với bất kỳ tham số nào.

Thí dụ

Ví dụ sau minh họa việc sử dụng chỉ thị hàm trong tệp SCSS:

function_directive.htm

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container" id = "set_width">
         <h2>Example for Function directives</h2>
         <p>SASS stands for Syntactically Awesome Stylesheet. </p>
      </div>
   </body>
</html>

Tiếp theo, tạo tệp style.scss .

style.scss

$first-width: 5px;
$second-width: 5px;

@function adjust_width($n) {
   @return $n * $first-width + ($n - 1) * $second-width;
}

#set_width { padding-left: adjust_width(10); }

Bạn có thể yêu cầu SASS xem tệp và cập nhật CSS bất cứ khi nào tệp SASS thay đổi, bằng cách sử dụng lệnh sau:

sass --watch C:\ruby\lib\sass\style.scss:style.css

Tiếp theo, thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau:

style.css

#set_width {
   padding-left: 95px; 
}

Đầu ra

Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -

Lưu mã html đã cho ở trên vào function_directive.html tập tin.
Mở tệp HTML này trên trình duyệt, kết quả hiển thị như hình dưới đây.

Trong đầu ra, bạn có thể thấy rằng phần đệm bên trái đang được áp dụng.

Cũng giống như mixin, hàm cũng có thể truy cập các biến được xác định toàn cục và cũng có thể chấp nhận các tham số. Bạn nên gọi giá trị trả về cho hàm bằng cách sử dụng@return. Chúng ta có thể gọi các hàm do SASS định nghĩa bằng cách sử dụng các tham số từ khóa.

Gọi hàm trên như hình bên dưới.

#set_width { padding-left: adjust_width($n: 10); }

Quy ước đặt tên

Để tránh xung đột đặt tên, các tên hàm có thể được đặt trước để có thể dễ dàng phân biệt. Giống như mixin, các đối số biến cũng được hỗ trợ bởi các hàm do người dùng xác định. Các hàm và các số nhận dạng SASS khác có thể sử dụng dấu gạch dưới (_) và dấu gạch nối (-) thay thế cho nhau.

Ví dụ: nếu một hàm được định nghĩa là adjust_width, nó có thể được sử dụng như adjust-width, và ngược lại.