Sass Built-in Functions Parameter Passing and Calculation Logic

Sass built-in functions support value passing via parameters, allowing users to pass variables, expressions, or calculation results as function inputs. The core of parameter passing lies in the standardization of function definitions and invocations. For example, a function can be declared as:

@function my-function($value) {  
  $double = $value * 2;  
  $half = $value / 2;  
  // Calculation logic  
}  

Parameters are passed via parentheses, such as:

my-function(20px);  

Default values can be zero or an empty string, for example:

@function my-function($value = 0) {  
  // Default value logic  
}  

Parameters may also be nested. For instance:

@function nested-value($base, $offset = 0) {  
  $result = $base + $offset;  
  // Calculation logic  
}  

Calculation Logic

The calculation logic within Sass functions adheres to mathematical rules and supports addition, subtraction, multiplication, division, logical operations, and variable nesting. Variables can be used directly inside the function body:

@function calc-color($light, $dark) {  
  $mid = $light + $dark;  
  $final = $mid / 2;  
  // Calculation logic  
}  

Operation order follows precedence rules, such as multiplication taking priority over addition. Functions can perform nested calculations, for example:

@function complex-logic() {  
  $value = calc-color(20px, 40px);  
  $final = $value * 1.5;  
  // Calculation logic  
}  

Conditional judgment can be controlled via variables, such as:

@function conditional-check() {  
  $result = $value > 100 ? 'yes' : 'no';  
  // Calculation logic  
}  

Functions may return the calculated result, for example:

@function return-value() {  
  $final = 100 + 200;  
  return $final;  
}  

Example Demonstrations

The following examples illustrate the application of parameter passing and calculation logic through practical cases. For instance:

1. Font Size Calculation

@function font-size($base, $offset = 0) {  
  $result = $base + $offset;  
  return $result;  
}  

Invocation:

font-size(16px, 8px);  

Output: 24px

2. Color Gradient

@function gradient-color($light, $dark) {  
  $mid = $light + $dark;  
  $final = $mid / 2;  
  return $final;  
}  

Invocation:

gradient-color(20px, 40px);  

Output: 30px

3. Conditional Judgment

@function conditional-check() {  
  $result = $value > 100 ? 'yes' : 'no';  
  return $result;  
}  

Invocation:

conditional-check(150px);  

Output: yes

Summary

Sass built-in functions achieve efficient style control through standardized syntax and flexible operation rules for parameter passing and calculation logic. Parameter passing ensures value reusability, while the calculation logic meets complex styling requirements via mathematical rules and variable nesting. The extensibility and maintainability of these functions make them a core tool in CSS preprocessing.