CSS => Anpassade egenskaper (variabler)

Introduktion

CSS-variabler tillåter författare att skapa återanvändbara värden som kan användas i ett CSS-dokument.

Till exempel är det vanligt i CSS att återanvända en enda färg i ett dokument. Innan CSS-variabler skulle detta innebära återanvändning av samma färgvärde många gånger i ett dokument. Med CSS-variabler kan färgvärdet tilldelas en variabel och refereras på flera platser. Detta gör det lättare att ändra värden och är mer semantisk än att använda traditionella CSS-värden.

Syntax

: root {} / * pseudoklass som möjliggör en mer global definition av variabler * /
- varifierbart namn: värde ; / * definiera variabel * /
var (- variabelnamn, standardvärde ) / * använd definierad variabel med standardvärde fallback * /

Anmärkningar

CSS-variabler anses för närvarande vara en experimentell teknologi.

BROWSERSTÖD / KOMPATIBILITET

Firefox: Version 31 + (aktiverad som standard)

Mer information från Mozilla

Chrome: version 49 + (aktiverat som standard) .

"Den här funktionen kan aktiveras i Chrome version 48 för testning genom att aktivera den experimental Web Platform . Ange chrome://flags/ i din Chrome-adressfält för att få åtkomst till den här inställningen."

IE: stöds inte.

Edge: Under utveckling

Safari: version 9.1+

Variabel färg

:root {
  --red: #b00;
  --blue: #4679bd;
  --grey: #ddd;
}
.Bx1 {
  color: var(--red);
  background: var(--grey);
  border: 1px solid var(--red);
}

Variabla dimensioner

:root {
  --W200: 200px;
  --W10: 10px;
}
.Bx2 {
  width: var(--W200);
  height: var(--W200);
  margin: var(--W10);
}

Variabel Cascading

CSS-variabler kaskader på ungefär samma sätt som andra egenskaper och kan omarbetas säkert.

Du kan definiera variabler flera gånger och endast definitionen med den högsta specificiteten gäller för det valda elementet.

Antagande av denna HTML:

<a class="button">Button Green</a>
<a class="button button_red">Button Red</a>
<a class="button">Button Hovered On</a>

Vi kan skriva detta CSS:

.button {
  --color: green;
  padding: .5rem;
  border: 1px solid var(--color);
  color: var(--color);
}

.button:hover {
  --color: blue;
}

.button_red {
  --color: red;
}

Och få detta resultat:

Giltiga / invalider

Namnge Vid namngivning av CSS-variabler innehåller den bara bokstäver och streck precis som andra CSS-egenskaper (t.ex.: radhöjd, -moz-box-dimensionering) men det bör börja med dubbla streck (-)

//These are Invalids variable names
--123color: blue;
--#color: red;
--bg_color: yellow
--$width: 100px;

//Valid variable names
--color: red;
--bg-color: yellow
--width: 100px;

CSS-variabler är skiftlägeskänsliga.

/* The variable names below are all different variables */
--pcolor: ;
--Pcolor: ;
--pColor: ;

Tomt mot rymden

/* Invalid */
    --color:;

/* Valid */
  --color: ; /* space is assigned */

sammanlänkningar

    /* Invalid - CSS doesn't support concatenation*/
    .logo{
        --logo-url: 'logo';
        background: url('assets/img/' var(--logo-url) '.png');
    }

    /* Invalid - CSS bug */
    .logo{
        --logo-url: 'assets/img/logo.png';
        background: url(var(--logo-url));
    }

    /* Valid */
    .logo{
        --logo-url: url('assets/img/logo.png');
        background: var(--logo-url);
    }

Var försiktig när du använder enheter

    /* Invalid */
    --width: 10;
    width: var(--width)px;

    /* Valid */
    --width: 10px;
    width: var(--width);

    /* Valid */
    --width: 10;
    width: calc(1px * var(--width)); /* multiply by 1 unit to convert */
    width: calc(1em * var(--width));

Med mediefrågor

Du kan ställa om variabler inom mediefrågor och få de nya värdena att kaskad vart de än används, något som inte är möjligt med förprocessorvariabler.

Här ändrar en mediefråga variablerna som används för att skapa ett mycket enkelt rutnät:

html

<div></div>
<div></div>
<div></div>
<div></div>

CSS

:root{
    --width: 25%;
    --content: 'This is desktop';
}
@media only screen and (max-width: 767px){
    :root{
        --width:50%;
        --content: 'This is mobile';
    }
}
@media only screen and (max-width: 480px){
    :root{
        --width:100%;
    }
}

div{
    width: calc(var(--width) - 20px);
    height: 100px;
}
div:before{
    content: var(--content);
}

/* Other Styles */
body {
    padding: 10px;
}

div{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight:bold;
    float:left;
    margin: 10px;
    border: 4px solid black;
    background: red;
}

Du kan försöka ändra storlek på fönstret i den här CodePen-demonstrationen

Här är en animerad skärmdump av storleksändringens storlek:

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

CSS
Anpassade egenskaper (variabler)

Sök…