{"id":1099,"date":"2022-01-23T10:46:06","date_gmt":"2022-01-23T10:46:06","guid":{"rendered":"https:\/\/mobileaders.com\/?p=1099"},"modified":"2022-01-23T23:10:36","modified_gmt":"2022-01-23T23:10:36","slug":"what-you-need-to-know-about-css-variables","status":"publish","type":"post","link":"https:\/\/mobileaders.com\/what-you-need-to-know-about-css-variables\/","title":{"rendered":"What You Need To Know About CSS Variables ?"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

CSS variables<\/strong> are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation, Variables follow the same scope and inheritance rules like any other CSS definition. The easiest way to use them, is to make them globally available, by adding the declarations to the :root<\/strong><\/code> pseudo-class, so that all other selectors can inherit it.<\/p>\n\n\n\n

:root{
    --awesome-blue: #f6f69;
}<\/code><\/pre>\n\n\n\n
To access the value inside a variable we can use the var(...)<\/strong><\/code> syntax. Note that names are case sensitive, so --foo != --FOO<\/code>.<\/strong><\/p>\n\n\n\n
.some-element{\n    background-color: var(--awesome-blue);\n}<\/code><\/pre>\n\n\n\n
Support<\/strong><\/h2>\n\n\n\n
The history of CSS variables is a bit spotty. Originally spec\u2019d out by the W3C in 2012, the feature was initially implemented by only Chrome and Firefox. When the specification was updated in 2014 with a significant syntax improvement, Firefox kept up and modified its implementation, while Chrome decided to back-burner implementation efforts until things settled down. For its part, Microsoft sort of whistled and looked the other way.<\/p>\n\n\n\n
As late as September of 2015, caniuse<\/strong><\/a>.<\/strong>com<\/strong><\/a> reported browser support for CSS variables at less than 9%, as seen in the upper-right corner of this report.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
However, in 2016, Chrome, Safari, Opera, and Android browser all jumped on the variables train, and suddenly support soared to 69%! (That\u2019s global support; US-only support is 77%.)<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
That\u2019s more like it. And as you can see from the more recent report, even Microsoft Edge is working on it. (I know, right?!?) So CSS variables are now officially A Thing You Can Actually Use! Let\u2019s see how.<\/p>\n\n\n\n
Why learn CSS Variables?<\/strong><\/h2>\n\n\n\n
There are many reasons to use variables in CSS. One of the most compelling ones is that it reduces repetition in your stylesheet.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
In the example above it\u2019s much better to create a variable for the #ffeead<\/strong><\/code> color than repeating it, like we\u2019re doing here:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Not only will this make your code easier to read, but it gives you more flexibility as well, in case you want to change this color.<\/p>\n\n\n\n
You will have a big benefit from Css Variable<\/p>\n\n\n\n
  1. They don\u2019t require any transpiling to work, as they\u2019re native to the browser. So you don\u2019t need any setup to get started, as you do with SASS and LESS.<\/li>
  2. They live in the DOM, which opens up a ton of benefits<\/li>
  3. you don\u2019t want to repeat your style again<\/li>
  4. it will save your time when you need to apply the same rules over and over again for multiple elements<\/li>
  5. when we want to save a more complex property value, so that we don\u2019t have to remember it like this .<\/li><\/ol>\n\n\n\n
    :root{\n \u2014 tiny-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);\n \u2014 animate-right: translateX(50px);\n}\nli{\n    box-shadow: var(--tiny-shadow);\n}\nli:hover{\n    transform: var(--animate-right);\n}<\/code><\/pre>\n\n\n\n
    A big advantage CSS Variables is that they have access to the DOM. This isn\u2019t the case with LESS or SASS as their variables are compiled down to regular CSS.<\/p>\n\n\n\n
    How to access variables with JavaScript<\/strong><\/h2>\n\n\n\n
    Another advantage of living in the DOM is that you can access the variables with JavaScript, and even update them for example.<\/p>\n\n\n\n
    var root = document.querySelector(':root');
    var rootStyles = getComputedStyle(root);
    var mainfont = rootStyles.getPropertyValue('--main-font');console.log(mainfont); 
    --> '25px'<\/code><\/pre>\n\n\n\n
    But if you want to update the CSS Variable simply call the setProperty<\/strong><\/code> method on the element in which the variables has been declared on and pass in the variable name as the first parameter and the new value as the second.<\/p>\n\n\n\n
    root.style.setProperty('--main-font', '30px')<\/code><\/pre>\n\n\n\n
    FAQs<\/strong><\/h2>\n\n\n\n
    some important question i think anyone can ask them so i have named title (FAQs)Frequently Asked Questions or (PAQs) probably<\/em> ask<\/p>\n\n\n\n
    Q:<\/strong>Should I always use the :root<\/code> pseudo-class as a selector to define variables?<\/p>\n\n\n\n
    A:<\/strong> Not necessarily i\u2019ve told that if we want to declare local variable we have\u2019not won\u2019t to do that, but usually as doing so serves a couple of purposes. First, it collects all your variables in one place for easy maintenance (especially if that\u2019s the first rule in your CSS file), which is kind of the point. Second, :root<\/code>matches the whole page (essentially everything in the <html> element), so it makes all your variables global in scope.<\/p>\n\n\n\n
    Q:<\/strong> Do variable-based properties cascade?<\/p>\n\n\n\n
    A:<\/strong> Yes, they are inherited like any other property. If you set a <div>\u2019s background color with a variable, its children will all have that background color.<\/p>\n\n\n\n
    Q:<\/strong> Are variable names case-sensitive?<\/p>\n\n\n\n
    A:<\/strong> Yes, but don\u2019t get me started on case. The names --h1color<\/code>,--H1color<\/code>, and --h1Color<\/code> are all different variables, and will gleefully cause you countless hours of debugging grief. Go ahead, use camelCase<\/strong> if you must, be attention this will make error or your browser will ignore this .<\/p>\n\n\n\n
    Q:<\/strong> Can I use dashes or underscores in variable names?<\/p>\n\n\n\n
    A:<\/strong> Yes, but not spaces. The names --h1-color<\/code><\/strong>, --h1_color<\/strong><\/code>, and --h-1_color<\/strong><\/code> are all valid variables, while --h1 color<\/code> but dashes are preferred over underscores for consistency because CSS is a dash-friendly language and uses dashes in many standard property names<\/p>\n\n\n\n
    Sources<\/h3>\n\n\n\n
    very useful tutorial: https:\/\/web-crunch.com\/know-css-variables\/<\/a><\/p>\n\n\n\n
    \n
    The Issue with Preprocessing CSS Custom Properties<\/a><\/blockquote>