Was ist LESSCSS? Wie benutzt man?

Was ist LESSCSS

LESSCSS ist eine dynamische Stilsprache, eine Art CSS-Vorverarbeitungssprache. Sie verwendet eine CSS-ähnliche Syntax und verleiht CSS eine dynamische Sprache. B. Variablen, Vererbung, Operationen, Funktionen usw., erleichtern das Schreiben und Verwalten von CSS.

LESSCSS kann in mehreren Sprachen und Umgebungen verwendet werden, einschließlich Browsern, Desktop-Clients und Servern.

Schnelle Vorschau der Sprachfunktionen:

Variablen:

Variablen ermöglichen es uns, eine Reihe allgemeiner Stile separat zu definieren und sie dann bei Bedarf aufzurufen. Wenn wir also globale Stilanpassungen vornehmen, müssen wir möglicherweise nur ein paar Codezeilen ändern.

WENIGER Quellcode:

@color: #4D926F;

#header {
    color: @color;
}
h2 {
    color: @color;
}

Kompiliertes CSS:

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

Mixins

Mixins können leicht eine definierte Klasse A in eine andere Klasse B einführen und dabei einfach erkennen, dass Klasse B alle Attribute in Klasse A erbt. Wir können es auch mit Parametern aufrufen, genau wie bei der Verwendung einer Funktion.

WENIGER Quellcode:

.rounded-corners (@radius: 5px) {-webkit-border-radius: @radius;-moz-border-radius: @radius;-ms-border-radius: @radius;-o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

Kompiliertes CSS:

#header {-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;
    border-radius: 5px;
}
#footer {-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;
    border-radius: 10px;
}

Verschachtelt

Wir können einen Selektor in einem anderen Selektor verschachteln, um eine Vererbung zu erreichen, was die Codemenge erheblich reduziert und den Code klarer aussehen lässt.

WENIGER Quellcode:

Verschachtelung

Wir können einen Selektor in einem anderen Selektor verschachteln, um eine Vererbung zu erreichen, wodurch die Codemenge erheblich reduziert wird und der Code klarer aussieht.

WENIGER Quellcode:

#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px
            }
        }
    }
}

Kompiliertes CSS:

#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

Funktionen und Operationen

Operationen bieten Additions-, Subtraktions-, Multiplikations- und Divisionsoperationen. Wir können Operationen an Attributwerten und Farben durchführen, sodass komplexe Beziehungen zwischen Attributwerten realisiert werden können. Funktionen in LESS werden auf JavaScript-Code abgebildet, sodass Sie bei Bedarf Eigenschaftswerte bearbeiten können.

WENIGER Quellcode:

the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
}
#footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, 10%);
}

Kompiliertes CSS:

#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

Das obige ist der detaillierte Inhalt vonWas ist LESSCSS? Wie benutzt man?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!