The application of operations and functions

Operations and functions play a crucial role in CSS, not only simplifying style calculations but also enhancing dynamic layout capabilities. From basic arithmetic operations to complex custom functions, these tools empower developers to control styles more flexibly.

Basic Operations Usage

CSS supports fundamental arithmetic operations, including addition (+), subtraction (-), multiplication (*), and division (/). These operations can be used directly in property values, such as calculating widths or spacing:

.container {
  width: calc(100% - 40px); /* Container width minus 40 pixels */
  padding: calc(1rem * 2);  /* Padding twice the rem unit */
}

Unit consistency must be considered during operations. For example, the following code will throw an error due to mismatched units:

.error-example {
  width: calc(100% - 20px); /* Correct */
  margin: calc(10em + 5px);  /* Error: Mixed units require explicit handling */
}

CSS Custom Functions

Custom functions can be created using @function to reuse complex calculation logic. For example, a function to convert pixels to rem:

@function px-to-rem($px) {
  @return calc($px / 16) * 1rem;
}

.text {
  font-size: px-to-rem(24); /* Converts to 1.5rem */
}

Another example is a color-mixing function:

@function mix-colors($color1, $color2, $weight) {
  @return mix($color1, $color2, $weight);
}

.header {
  background: mix-colors(#ff0000, #0000ff, 70%);
}

Dynamic Style Calculations

Combining CSS variables with calc() enables responsive layouts. For example, dynamically adjusting font size based on viewport width:

:root {
  --base-size: 16px;
  --scale-factor: 0.5vw;
}

body {
  font-size: calc(var(--base-size) + var(--scale-factor));
}

Another example is creating an evenly spaced grid layout:

.grid {
  --columns: 4;
  --gap: 20px;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--gap);
  width: calc(100% - var(--gap) * (var(--columns) - 1));
}

Conditional Operation Techniques

Although CSS lacks direct if-statements, conditional effects can be achieved using clamp(), min(), and max():

.responsive-box {
  width: clamp(300px, 50vw, 800px); /* Minimum 300px, ideal 50vw, maximum 800px */
  height: min(100vh, 800px);       /* No more than 800px */
  margin: max(2rem, 10vh);         /* At least 2rem */
}

Example of light/dark color switching:

:root {
  --light: #ffffff;
  --dark: #333333;
  --text-color: var(--light);
}

[data-theme="dark"] {
  --text-color: var(--dark);
}

body {
  color: var(--text-color);
  background: hsl(
    calc(var(--hue, 210) + 180),
    calc(var(--saturation, 100%) - 20%),
    calc(var(--lightness, 50%) + 30%)
  );
}

Complex Function Applications

CSS's transform property often works with complex functions. Here’s a 3D rotation example:

.cube {
  transform: 
    rotateX(calc(var(--angle, 15deg) * 2))
    rotateY(calc(var(--angle, 15deg) * 0.5))
    scale(calc(1 + var(--scale, 0.1)));
}

Gradient color calculations:

.gradient {
  background: linear-gradient(
    calc(var(--angle, 45deg) + 90deg),
    hsl(calc(var(--hue) + 30), 70%, 50%),
    hsl(var(--hue), 70%, 50%)
  );
}

Performance Optimization Considerations

While operations are powerful, overuse may impact performance. For example, avoid frequent calculations in animations:

/* Not recommended */
@keyframes slide {
  to {
    transform: translateX(calc(100vw - 100%));
  }
}

/* Recommended */
@keyframes slide {
  to {
    transform: translateX(100%);
  }
}

Preprocessor operation example:

$base-spacing: 16px;

@function spacing($multiplier) {
  @return $base-spacing * $multiplier;
}

.card {
  margin: spacing(2); /* 32px */
  padding: spacing(0.5); /* 8px */
}

Practical Application Examples

Creating a responsive card layout where card width adjusts dynamically based on quantity:

.card-grid {
  --column-count: 4;
  --gap-size: 20px;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(
      calc((100% - var(--gap-size) * (var(--column-count) - 1)) / var(--column-count)),
      300px
    )
  );
  gap: var(--gap-size);
}

Dynamic shadow effects:

.card {
  --shadow-offset: 5px;
  box-shadow: 
    calc(var(--shadow-offset) * 1) calc(var(--shadow-offset) * 1) 10px rgba(0,0,0,0.1),
    calc(var(--shadow-offset) * -1) calc(var(--shadow-offset) * -1) 10px rgba(255,255,255,0.5);
}

.card:hover {
  --shadow-offset: 10px;
}

Browser Compatibility Handling

Fallback solutions for browsers that don’t support new features:

.progress-bar {
  width: 80%; /* Fallback value */
  width: clamp(300px, 50vw, 800px);
}

@supports not (width: clamp(1px, 2px, 3px)) {
  .progress-bar {
    width: min(50vw, 800px);
  }
}

Combining CSS variables with preprocessor variables:

:root {
  --primary-color: #3498db;
}

$secondary-color: #e74c3c;

.button {
  background: var(--primary-color);
  border-color: $secondary-color;
}