Bits of .NET

📐 CSS Variables Now Have Types!

CSS variables are strings. @property defines types: number, color, length. Enables smooth transitions.

📝 Defining Typed Properties

@property --progress {
  syntax: '';
  inherits: false;
  initial-value: 0%;
}

@property --primary-color {
  syntax: '';
  inherits: true;
  initial-value: #3498db;
}

@property --spacing {
  syntax: ' | ';
  inherits: false;
  initial-value: 0px;
}

@property --custom-angle {
  syntax: '';
  inherits: false;
  initial-value: 0deg;
}

🎯 Smooth Transitions

.progress-bar {
  background: linear-gradient(90deg, #4facfe var(--progress), #f0f4f8 var(--progress));
  transition: --progress 0.3s ease;
}

.progress-bar:hover {
  --progress: 100%;
}

.color-box {
  background: var(--primary-color);
  transition: --primary-color 0.5s;
}

.color-box:hover {
  --primary-color: #e74c3c;
}

.rotating-square {
  transform: rotate(var(--custom-angle));
  transition: --custom-angle 0.3s;
}

.rotating-square:hover {
  --custom-angle: 180deg;
}

💡 Supported Syntax Types

• length: px, em, rem, vh, vw
• percentage: %
• color: hex, rgb, hsl, named
• angle: deg, rad, grad, turn
• time: s, ms
• integer: whole numbers
• number: decimal numbers