CSS - Custom Properties

CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g. --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);) .

— Using CSS custom properties (variables) - CSS | MDN

CSS custom properties are not variables

CSS custom properties are commonly known as CSS variables, and judging by the main web development blogs and resources, most people likely use the terms “custom property” and “variable” interchangeably[.]

[…]

The reason for this could be that the CSS spec itself uses both terms. ”Custom properties” and “variables” both appear in the spec’s text dozens of times and even in the spec’s own title (“CSS Custom Properties for Cascading Variables”).

However, the spec distinguishes the two terms: A custom property is not a variable, but it defines a variable. Any property can use variables with the var() function whose values are defined by their associated custom properties.

[…]

This distinction is useful because it allows us to talk about “variables with fallback values” (a custom property like any other property cannot have a fallback value) and “properties using variables” (a property cannot use a custom property) […] as well as “declaring a custom property on an element” (a variable isn’t declared but assigned to a property) and “the computed value of a custom property” (a variable doesn’t have a computed value but draws from the computed value of its associated custom property).

Source link
CSS custom properties are not variables | Web Platform News
Tags
CSS - Custom Properties
CSS

Splitting - text animation library

A stylized "Splitting" with a banana mascot.
That's one determined banana.

Splitting creates elements and adds CSS variables to unlock amazing possibilities for animating text, grids, and more!

DoubleDash your CSS

The previously impractical becomes easy with Splitting’s CSS Variables.

Comically Small

A shocking amount of features in a 1.5kb (minified & gzipped) package.

Progressively Enhance

Upgrade websites for modern browsers without breaking IE.

Source link
https://splitting.js.org/
Tags
Animation
CSS - Animation
CSS - Custom Properties
JavaScript - Libraries

CSS Variables Are A Sometimes Food

This article makes the important point that CSS custom properties - a.k.a. variables - are not a complete and ideal replacement for variables in preprocessors like Sass: they have different but overlapping use-cases, and custom properties are far better if used when cascading or changing the values in the browser are needed, while preprocessor variables are more performant for the browser when they perform the same role as custom properties, i.e. not repeating oneself. There’s also the issue of browser support for custom properties, but that’s another story.

Source link
https://codepen.io/stowball/post/css-variables-are-a-sometimes-food
Tags
CSS - Custom Properties
Sass

Bevelled box corners with CSS and Sass

Say you’re trying to pull off a design effect where the corner of an element are cut off. Maybe you’re a Battlestar Galactica fan? Or maybe you just like the unusual effect of it, since it avoids looking like a typical rectangle.

[…]

I suspect there are many ways to do it. Certainly, you could use multiple backgrounds to place images in the corners. You could just as well use a flexible SVG shape placed in the background. I bet there is also an exotic way to use gradients to pull it off.

But, I like the idea of simply taking some scissors and clipping off the dang corners. We essentially can do just that thanks to clip-path. We can use the polygon() function, provide it a list of X and Y coordinates and clip away what is outside of them.

CSS

.box {
  --notch-size: 2em;
 
  clip-path: polygon(
    0% var(--notch-size),
    var(--notch-size) 0%,
    calc(100% - var(--notch-size)) 0%,
    100% var(--notch-size),
    100% calc(100% - var(--notch-size)),
    calc(100% - var(--notch-size)) 100%,
    var(--notch-size) 100%,
    0% calc(100% - var(--notch-size))
  );
}

I’ve written a Sass mixin to make this easier to reuse:

Sass

///
/// Bevel all four corners of an element by the specified amount.
///
/// This is based on the linked article by Chris Coyier.
///
/// @author Matei "Ambient.Impact" Stanca
///
/// @link https://ambientimpact.com/web/snippets/bevelled-box-corners-with-css-and-sass
///
/// @param {Number} $size - The amount to bevel by.
///
@mixin bevel($size) {
  clip-path: polygon(
    // Top left corner points.
    0%          #{$size},
    #{$size}    0%,
    // Top right corner points.
    calc(100% - #{$size}) 0%,
    100%        #{$size},
    // Bottom right corner points.
    100%        calc(100% - #{$size}),
    calc(100% - #{$size}) 100%,
    // Bottom left corner points.
    #{$size}    100%,
    0%          calc(100% - #{$size})
  );
}

You can use it like so:

Sass

.box {
  // Really simple version:
  @include bevel(1em);
 
  // If you want to use CSS custom properties for browsers that support them,
  // you can do so. The benefits are that these cascade like other CSS
  // properties, so they can be inherited, and modified in real time. This must
  // come after the simple version.
  --bevel-amount: 1em;
  @include bevel(var(--bevel-amount));
}
Source link
Notched Boxes | CSS-Tricks
Tags
CSS - Custom Properties
CSS - Clipping and masking
Sass

CSS Custom Property fallbacks

Here’s a thing I didn’t know you could do with var(): like font stacks, you can specify a fallback value if the specified custom property isn’t defined, like so:

CSS

body {
  color: var(--color-text-default, black); 
}

Mind you, this only applies to browsers that understand custom properties. To provide a fallback for browsers that don’t, use the tried and tested method of defining the fallback first and then the newer property declaration:

CSS

body {
  color: black;
  color: var(--color-text-default, black); 
}
Source link
Getting Hardboiled with CSS Custom Properties ◆ 24 ways
Tags
CSS - Custom Properties
Subscribe to CSS - Custom Properties