LESSCSSとは何ですか?使い方？

零下一度

リリース： 2017-07-26 11:17:07

オリジナル

1507 人が閲覧しました

LESSCSSとは

LESSCSSは、CSS前処理言語の一種である動的スタイル言語であり、CSSに似た構文を使用し、変数、継承、演算、関数などの動的言語の特性をCSSに与えます。など、CSS の記述と保守が容易になります。

LESSCSS は、ブラウザ、デスクトップクライアント、サーバーなどの複数の言語と環境で使用できます。

言語機能のクイックプレビュー:

変数:

変数を使用すると、一連の一般的なスタイルを個別に定義し、必要に応じて呼び出すことができます。したがって、全体的なスタイルを調整する場合、数行のコードを変更するだけで済む場合があります。

LESSソースコード:

@color: #4D926F;

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

ログイン後にコピー

コンパイルされたCSS:

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

ログイン後にコピー

Mixins

Mixinsは、定義されたクラスAを別のクラスBに簡単に導入でき、クラスBの実装が簡単になりますクラスAのすべての属性を継承します。関数を使用するのと同じように、パラメーターを使用して呼び出すこともできます。

LESS ソースコード:

.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);
}

ログイン後にコピー

コンパイルされた 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;
}

ログイン後にコピー

ネスト

継承を実現するために 1 つのセレクター内に別のセレクターをネストすることができ、コードの量が大幅に削減され、コードがより明確になります。

より少ないソースコード:

ネスト

継承を実現するために、あるセレクターを別のセレクター内にネストすることができます。これにより、コードの量が大幅に削減され、コードがより明確になります。

LESS ソースコード:

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

ログイン後にコピー

コンパイルされた 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;
}

ログイン後にコピー

関数と演算

演算は、加算、減算、乗算、および除算の演算を提供します。属性値間の複雑な関係を実装します。 LESS の関数は JavaScript コードにマップされているため、必要に応じてプロパティ値を操作できます。

LESS ソースコード:

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%);
}

ログイン後にコピー

コンパイルされた CSS:

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

ログイン後にコピー

以上がLESSCSSとは何ですか?使い方？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。