A locally scoped variable is a variable whose value is only accessible to the element that defines it as well as that element’s children.
What’s a variable?
In CSS, you can define variables (also known as “custom properties”) to act as placeholders or tokens for a specific value. This allows you to use the token in multiple places while retaining singular control over that particular value.
Variables make websites more scalable and maintainable and while respecting the DRY (Don’t Repeat Yourself) principle of development.
What’s a globally scoped variable?
A globally scoped variable is a variable defined at the root level of a website. This makes the variable accessible by any element on the website.
:root {
--global-variable: value;
}Almost all the variables in ACSS are global variables. For example, you can use a color variable on any element, in any capacity.
With global variables, it’s important to have unique names to prevent variable collisions. Defining the same global variable twice on a website will overwrite the value of the variable with the latest value defined in the cascade.
What is a locally scoped variable?
A locally scoped variable is defined within a specific element.
.custom-element {
--local-variable: value;
}When a variable is locally scoped, it can only be used within that specific element or within that element’s children.
Locally scoped variables are used when the variable is unique and only applies to that specific element or its children. The variable wouldn’t make sense in any other context.
One big advantage of locally scoped variables is that you can name them whatever you want. You can even use very generic names that might get repeated elsewhere. Why? Because one locally scoped variable can’t overwrite another locally scoped variable since they can’t influence anything outside of the element in which they were defined.
Why do some frames use locally scoped variables?
There are a few reasons why certain frames use locally scoped variables:
- DRY methodology (maintainability). As a principle, any time we find that we’re about to repeat a style instruction in a frame, we’re most likely going to create a locally scoped variable instead. This is just good practice in general for all websites (even though many don’t do it).
- Style & behavior editing from a central location (efficiency). By placing locally scoped variables in the parent frame, we can give you one source of control for that frame and all its children. This saves the time and hassle it takes to click from frame to frame making changes.
- Simplification of complex styling/behavior (simplicity). Some frames are quite complex, but still need to be editable by beginners. Providing variables allows beginners to make changes without having to decipher complex CSS code
- Simplification of mobile adjustments (simplicity & maintainability). When adjusting frames on mobile, locally scoped variables can simply be redefined at a different breakpoint rather than re-writing the full styling instructions over again.
Example: Image Group Echo
Image Group Echo uses five locally scoped variables:
--aspect-width: 5; /* Sets aspect ratio width */ --aspect-height: 5; /* Sets aspect ratio height */ --overlap: .5; /* Sets center image overlap amount */ --alignment: center; /* center / top / end */ --shadow: 0 0 40px 0 var(--shade-ultra-dark-trans-20); /* Sets center image shadow */
Image Group Echo is three separate image elements that overlap thanks to advanced CSS Grid and nth-child selectors.
Users of this frame need to be able to easily change the aspect ratio of the images, the amount of overlap of the center image, the alignment of all three images within their container, and the shadow style of the center image.
Having to edit the complex CSS to do this is not accessible to a beginner. But with locally scoped variables, a beginner can easily make the changes they need to make.
As you can see, we even provide CSS comments next to each variable to give the user clues as to what each variable does.