CSS Variables

Use CSS variables when you want to apply a CSS style to many elements (selectors) so you don't need to individually style them.

1. First you need to declare your variables inside a selector. ":root" is used so that the variables can be applied to any selectors on the page. The variable name/custom property begins with two dashes "--".

When you create a variable, it becomes available for you to use inside the element in which you create it. It also becomes available within any elements nested within it. This effect is known as cascading. Because of cascading, CSS variables are often defined in the :root element.

:root {
    --main-bg-color: coral; }

 2. You then insert the variable to the properties of elements you want it applied to using
var("variable name"). This var function has two properties where value is the fallback value:
var("custom name", "value")

#div1 {
    background-color: var(--main-bg-color); }

#div2 {
    background-color: var(--main-bg-color);}

 Good to use inside media queries!

Comments

Post a Comment

Popular posts from this blog

Code Wars: Data Reverse (6 kyu)

Link to code challenge Code efficiency: Loops through string once (from the end) and with one new variable. String splicing- consider its efficiency? Try not to manipulate data when looping for efficiency. function dataReverse(data) { let arr = []; while (data.length) { arr.push(...data.splice(data.length - 8, data.length)); } return arr; }
Read more

Code Wars: longest_palindrome (6 kyu)

Link to code challenge Find the length of the longest substring in the given string s that is the same in reverse. As an example, if the input was “I like racecars that go fast”, the substring (racecar) length would be 7. If the length of the input string is 0, the return value must be 0. //Loop thru string and find longest substring that is also a palindrome //Efficiency- start with longest length first (each "outer" loop still looping to shorter //strings but done prior to "inner" loops which have longer strings- can be more efficient?) longestPalindrome=function(s){ if (s === "") return 0; else if (s.length === 1) return 1; let mainPointer = s.length; let subPointer = 0; let largest = 0; while (subPointer = 0) { //refactored- instead of pushing to new array let newString = s.slice(subPointer, mainPointer); //can this be refactored by comparing the two endpoints of the string but longer code? if ( newStr...
Read more

Code Wars: Find the odd int

https://www.codewars.com/kata/54da5a58ea159efa38000836/train/javascript Given an array, find the int that appears an odd number of times. There will always be only one integer that appears an odd number of times. function findOdd(A) {   let arr = A.sort((a,b) => a - b);   let counter = 1;     if (arr.length === 1) return arr[0];     for (let i = 0; i < arr.length - 1; i++) {         if (arr[i] === arr[i + 1]) {       counter++;     }     else if (arr[i] !== arr[i + 1]) {             if (counter % 2 !== 0) {         return arr[i];       }       // if it turns out to be last number in array with a count of 1 (since for loop doesnt get to it)       else if (i + 1 === arr.length - 1) {         return arr[i + 1];       }       count...
Read more