CSS variables try Playing

CSS is wonderful, can be for your page bed clothes, a variety of colorful clothes, but for the developer, he is not smart enough, so there are a variety of preprocessor sass, less, Stylus (I suggest sass scss syntax), These preprocessor can greatly improve the flexibility of CSS, and enhance the organization and maintenance of CSS code. But after all, is not the biological, and then responsible for CSS development of those who sit, and began to give CSS some new features, this article to discuss the progress and application of CSS variables.
The latest exploration of CSS variables is embodied in CSS Custom Properties for cascading Variables Module level 1, the latest update on May 6, 2014, currently working on the draft, so this article is only for research exploration only, There is a risk of modification in the knowledge points involved, which will be updated later in this article.

Why did you come?

We know that a website or application often contains a large number of CSS, these CSS, some of the property values are often reused, such as the color system used by the site, background color, text colors, link color, etc., these reused property values scattered in a large number of CSS documents, if you need to modify some of these values, For example, the revision of color, it is a nightmare, we need each file to find, replace, dazzling, mechanical repetition of a large number of operations unavoidably error, inevitably head large, so the organization and maintenance of CSS code has become a disturbing use of CSS important bottleneck.
Of course, CSS preprocessing can effectively solve these problems, the use of pre-processor has become the de facto industry standard, sass is becoming more and more front-end er choice. However, we need to deploy the compilation environment, need to let the development tool support SASS, etc., need some additional work. What if one day we could use a preprocessor like the normal CSS?
So there is the CSS Various.

Silking

As for variables, they are defined and used, and then we analyze them separately.

Defining variables

We store the values that need to be reused in a custom property, which is identified with a double dashed line, as shown in the following code.

/* 变量定义 */:root{  --main-color: #06c;}/* 变量使用 */#fooh1{  color: var(--main-color);}

Variable name

Custom attribute names and variable names follow the rules for defining CSS identifiers, which can include alphanumeric (a-z,a-z,0-9), ISO 10646 characters list characters, u+00a0 and above, underscores (_), hyphens (-), etc., and cannot begin with numbers, hyphens + numbers, double hyphens.
CSS variable syntax, case sensitive, can contain letters, numbers, underscores, hyphens, and preferably do not start with numbers, hyphens.

/ * The correct variable name * /: Root{  --link-color: #06c;     --_hover-color: #f6c;     --tooltip_color: #ff0;  --main_background_color: #333; }/ * The following two variables are valid, representing two variables * /: Element{  --link-color:#06c;  --link-color:#66c; }

The value of the variable can accept any syntax-compliant value, its default value is "", but cannot be "", otherwise an error will be received.

Inheritance and overwrite of variables

The Declaration and use of variables follows the cascading nature of CSS, similar to the scope of variables within a common programming language. Take a look at the following code.

: Root {  --color: blue; }Div {  --color: green; }#alert {  --color: red; }*{  color: var (--color); }<P>I inherited Blue  from  the Root element!</P><Div>I got Green Set directly  on Me!</Div><Div ID=Alert' > while I got Red Set directly  on Me! <P>I’m Red too,because  of Inheritance!</P></Div>

Using variables

We can use variables in the form of Var (), but we cannot use variables in property names, selectors, only variables in property values, and the syntax for using variables is as follows.

/ * VAR () accepts two parameters, custom property name (variable name), default value * First parameter custom-property-name call variable * The second parameter is optional, specifying the default value when the custom variable is invalid. */var() =var(<Custom-property-name>[, <any-value>]? )/ * For example * //* In the component ' s style: */. Component . Header {  color: var (--header-color, Blue);} . Component . Text {  color: var (--text-color, Black);} /* In the larger application ' s style: */. Component {  --text-color: #080; / * Header-color isn ' t set, and so remains blue, the fallback value * / }

We can nest calls to CSS variables.

/*one Example * /: Root {  --main-color: #c06;  --accent-background: linear-gradient (to Top, var (--main-color), white)  ; }/*another Example * /< One>< Both><three/></ Both></ One> One   {  --foo: tenpx; } Both   {  --bar: Calc (var (--foo) + tenpx); }three {  --foo: Calc (var (--bar) + tenpx); }

Inclusive

For front-end developers, inclusive is always a difficult to match the pain, as a "geek thinking" front-end er, we still have to work hard.
First take a look at the current appalling compatibility of CSS variables, as shown in the data from Caniuse.

The whole line of red Wood has, only Firefox know, but also how to play.
A brother said, I will be capricious, how to play? The foreigner wrote a patch (Polyfill), we might as well try.

Only the very solution

To sum up, CSS variables in the draft phase, browser-compatible general, today wrote this article only for open horizons, the use of knowledge reserves. We also ask you to use a pre-processor such as sass or less.
For more details, use the list below to find out.

• Reference
• MDN Info
• Caniuse

Thanks

Front-end development whqet, focus on front-end development, share related resources. CSDN Expert blog, Wang Haiqing hope to be able to help you.
This article is linked in the original, http://blog.csdn.net/whqet/article/details/43758285
You are welcome to visit the Independent blog Http://whqet.github.io

CSS variables try Playing