An Interest In:
Web News this Week
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
Some of Our Sources
- BoingBoing
- The Logo Smith
- Six Revisions
- Inspiredology
- Fudge Graphics
- Reencoded
- Line 25
- CSS Tricks
- Android Headlines
- The Verge
Help Webnuz
Referal links:
September 24, 2021 04:17 pm GMT
Original Link: https://dev.to/iamkiambuthi/css-variables-learning-css-best-practices-01-3h3g
CSS Variables | Learning CSS Best Practices - 01
to declare a variable prefix your variable name with two dashes then to use it, use the var() function
/* -- declaring the variable. -- */--variable_name: variable_value/* -- accessing the variable. -- */html { font-family: var(--variable_name);}Variable Scope | Global or Local ?
Variables can be either scoped globally or locally. declaring your variables inside the :root pseudo-class makes them available in the global scope and available for use throughout ythe stylesheet.
header { --bg-color: red; /* bg-color is only visisble to all children of the header element */}main { background: var(--bg-color); /* bg-color is undefined. */}/* to declare global variables place all variable inside the :root pseudo-class */:root { bg-color: red;}header { background: var(--bg-color);}main { background: var(--bg-color);}Common Use Cases
One way to use css variables is to save common colors or an entire color pallete which you can then use to style elements.
:root { /* -- Use css variables to declare site colors -- */ --primary-color: black; --secondary-color: gray; --tetiary-color: white; /* -- Color Palettes -- */ /* -- black color palette */ --black-clr-plt-1: rgb(0, 0, 0); --black-clr-plt-2: rgb(30, 30, 30); --black-clr-plt-3: rgb(60, 60, 60); --black-clr-plt-4: rgb(90, 90, 90); /* -- brown color palette -- */ --brown-clr-plt-1: rgb(60, 20, 20); --brown-clr-plt-2: rgb(90, 30, 30); --brown-clr-plt-3: rgb(120, 40, 40); --brown-clr-plt-4: rgb(150, 50, 50);}/* -- styling -- */body { background: var(--brown-clr-plt-3); color: var(--black-color-plt-1); border: 1px solid var(--primary-color);}Providing Fallback Values
To provide a fallback value in case the variable is undefined, pass the fallback value as a second argument into the var() function.
:root { --site-font: 'Raleway';}html { font-family: var('Raleway', monospace);}/* In this example if site-font is undefined, the monospace font is used. */that's it, you're welcome to follow the journey onwards on my github
Original Link: https://dev.to/iamkiambuthi/css-variables-learning-css-best-practices-01-3h3g
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To