Variable
In general, when we do web development, we have a set of variable definition specifications, taking sass as an example, as shown below
Color definition Specification $color-background: #222 $color-background-d: Rgba (0, 0, 0, 0.3) $color-highlight-background: #333//font definition specification $ font-size-small:12px$font-size-medium:14px$font-size-large:18px
The syntax for CSS variables is as follows
"Declaring variables"
Variables must begin with--. For example--example-variable:20px, meaning to assign 20px to the--example-varibale variable
You can place statements that declare variables inside any element, and if you want to set global variables, you can set to: root, body, or HTML
: Root{--bgcolor: #000;}A variable declaration is like a normal style declaration statement, or you can use an inline style
<body style= "--bgcolor: #000" >
"Use variables"
Use the Var () function as a variable and can be used anywhere. For example, VAR (--example-variable) returns the value corresponding to--example-variable
<body style= "--bgcolor: #000;" > <p style= "Width:100px;height:100px;background-color:var (--bgcolor)" ></p> </body>
The Var () function also has an optional parameter that sets the default value, which is used when the variable cannot get the value.
<p style= "Width:100px;height:100px;background-color:var (--bgcolor,pink)" ></p>
[note] Detailed usage of CSS variables.
@apply
Before introducing @apply, let's introduce the hybrid macro @mixin in sass, which refers to the code blocks that can be reused
For example, common text overflow hiding reuse
@mixin overflow-ellipsis{ Overflow:hidden; text-overflow:ellipsis; White-space:nowrap; }; p { @include overflow-ellipsis;}Applying rule set @apply is also a similar function. @apply is a collection of reference styles compared to Var (), and VAR () refers to a separate style value
: root{ --overflow-ellipsis:{ Overflow:hidden; text-overflow:ellipsis; White-space:nowrap;} ;}. title{ width:200px; @apply--overflow-ellipsis;}Custom Selectors
The custom selector is defined by @custom-selector, followed by a:-followed by the name of the custom selector, followed by the selector that needs to be defined, and multiple separated by commas
@custom-selector:--heading H1, H2, H3, H4, H5, H6;
In this way, the--heading becomes a selectable selector that can be used
:--heading{ margin:0;} H1, H2, H3, H4, H5, h6{ margin:0;}The above two pieces of code have the same effect
Selector nesting
CSS rules contain a lot of duplicate content
Table.colortable td { Text-align:center;} Table.colortable TD.C { text-transform:uppercase;} Table.colortable Td:first-child, table.colortable td:first-child+td { border:1px solid black;} table.colortable th { text-align:center; Background:black; Color:white;}After using the nested syntax, the code is as follows
table.colortable { & td { text-align:center; &.c {text-transform:uppercase} &:first-child, &:first-child + td {BORDER:1PX solid black} }
& th { text-align:center; Background:black; Color:white;} }When using nested style rules, you must be able to reference elements that are matched by the parent rule; After all, it is the entire nesting point. To achieve this, the specification defines a new selector, a nested selector, written as an ASCII symbol &
When used in a selector of a nested style rule, the nested selector represents an element that is matched by the parent rule. When used in any other case, it does not represent anything. (That is, it is valid, but does not match any element)
[Note the two types of error]& nested selectors are as follows
. foo { color:red; . Bar & {Color:blue;}}. foo { color:red; &.bar,. Baz {color:blue;}}"@nest"
To address the fragility of the above nested selectors &, you can use the @nest selector, @nest can be used more broadly, as long as the nested selector & Synergy
. foo { color:red; @nest & >. bar { color:blue; }} Equivalent to . foo {color:red;} . Foo >. bar {color:blue;}. foo { color:red; @nest. Parent & { color:blue; }} Equivalent to . foo {color:red;} . Parent. foo {color:blue;}. foo { color:red; @nest: Not (&) { color:blue; }} Equivalent to . foo {color:red;} : Not (. foo) {color:blue;} [note] The two types of error @nest selectors are as follows. foo { color:red; @nest. Bar { color:blue; }}. foo { color:red; @nest & Bar,. Baz { color:blue; }}At last
Unfortunately, in addition to the CSS variable variable can be used under the new version of Chrome, the new usage of other CSS selectors currently do not have browser support. However, the Cssnext plugin in the CSS post processor postcss can solve all problems
Just like the Cssnext website says, start using tomorrow's CSS syntax today
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
