css なしの language_html/css_WEB-ITnose のプリコンパイルに関する簡単な説明

ご存知のとおり、CSS は比較的単純な構文とユーザーの要件が比較的低いマークアップ言語です。ただし、CSS を使用する場合、一見非論理的に見えるコードを大量に記述する必要があることに気づいたかどうかはわかりませんが、これはメンテナンスや拡張に不便であり、特に CSS を書くことができない人にとっては再利用に役立ちません。よく整理されて保守しやすい CSS コードを書くのは難しいです。この時点で、Coke は、このいたずらな CSS のために、私たちのプログラマが全能であることを静かに伝えます。less 言語は特別に開発されました。それでは、Coke がこの新しい友達を詳しく紹介しましょう~~~

1.less の紹介:

1.less 言語は CSS の構文に基づいており、変数、Mixin (混合)、演算、関数などを導入します。関数を使用すると、少ないコードでより多くのことを実行できるようになります。

2. .less 導入 (2 つの方法):

1. クライアントは .less ファイルを使用します: まず http://lesscss.org からless.js ファイルをダウンロードし、それを LESS を導入する必要がある HTML に追加します。ソース ファイル 次のコード:

<link rel="stylesheet/less" type="text/css" href="styles.less">

ここでの rel 属性の値は「stylesheet/less」であることに注意してください。

もう 1 つのポイントは、less ソース ファイルが正しくコンパイルおよび解析されることを保証するために、less.js を導入する前に、less ソース ファイルを導入する必要があるということです。

<script src="../less.min.js"></script>

2. サーバー側で使用します。 LESS コンパイラ。less ソース ファイルをコンパイルして最終的な CSS ファイルを生成します (推奨)。現在、サーバー側での LESS の使用は、LESS ソース ファイルをコンパイルして最終的な CSS ファイルを生成します。一般的に使用される方法は、ノード パッケージ マネージャー (npm) を使用して LESS をインストールすることです。インストールが成功した後、LESS ソース ファイルをノード環境でコンパイルできます。

プロジェクト開発の初期段階では、クライアント側を使用するかサーバー側を使用するかに関係なく、使用したい CSS または LESS ファイルを HTML ページまたはブリッジ ファイルに導入する方法を見つける必要があります。LESS は非常に便利なツールを提供します。おなじみの機能 - 入力。このキーワードを使用して、必要な .less または .css ファイルを導入できます。 例:

@import “variables.less”;

.less ファイルでは、次のように接尾辞を省略することもできます:

@import “variables”;

CSS の導入は、.css 接尾辞を省略できないことを除いて、LESS ファイルと同じです。

3. .less 構文の紹介:

1. 変数: 一度定義すると再利用:

@color:#505253;.bg-color{    background-color:@color;}.border-color{    border:1px solid @color;}

上に示すように: @color は Coke によって定義されたばかりの変数で、 .bg-color と .bg-color の両方で使用できます。 border-color 使ってください

2. --Mixins を混ぜます: クラスを宣言し、他のクラスで現在のクラスを呼び出します

.roundeCorers(@radius:5px){    -moz-border-radius:@radius;    -webkit-border-radius:@radius;    border-radius:@radius;}#header{    .roundeCorers;}#footer{    .roundeCorers(10px);}

注: パラメータが使用されていない場合、@radius はパラメータです。デフォルト値は #header で使用される 5px です。

3. 継承

スタイルのセットを使用するクラスがあり、このスタイルを使用する別のクラスを作成します。次のように、前のクラスのスタイルを継承できます。

.base-style {    font-size: 12px;    color: red;}

最初 1つ目の継承の記述方法:

.content{    .base-style();    background-color: white;}

2つ目の継承の記述方法:

.content{    &:extend(.base-style);    background-color: white;}

2つの記述方法は異なり、コンパイル後に生成されるCSSスタイルも異なります

1つ目:

.base-style{    font-size: 12px;    color: red;}.content {    font-size: 12px;    color: red;    background-color: white;}

2 番目:

.base-style,.content{    font-size: 12px;    color: red;}.content {    background-color: white;}

4. ネストルール:

html:

<div id="header">    <h1><a href="">www.xdpie.com</a></h1>    <p>自游自驾</p></div>

LESS:

#header {    display: inline;    float: left;    h1 {    font-size: 26px;    font-weight: bold;    a {        text-decoration: none;        color: #f36;        &:hover {            text-decoration: underline;            color: #63f;            }        }    }    p {        font-size: 12px;    }}

5. 機能と操作:

Coke は次の URL を提供します。参考:

http://less.bootcss.com/functions/

6. ロジック制御: LESS は、ガードを介した単純な Tuvan ブランチ制御をサポートするために、ミックスインを使用します

たとえば、コントロールを実装したいとします。 ::placeholder スタイル mixin を渡すときは、色を設定するだけです。それ以外の場合は、デフォルトの色が出力されます。 me: ガード内のdefault()はelseとして機能します

そうそう、lessの主な使い方については、Cokeがたくさん話してくれます。最後に、ブロガーの皆様のお役に立てれば幸いです。 ~~

プリコンパイル済み CSS とは:

Sass (Scss)、Less、Stylus

Sass 公式 Web サイト: http://sass-lang.com/ http://www.w3cplus.com/sassguide/

Less 公式 Web サイト: http://lesscss.org/ 中国語: http://less.bootcss .com/

Stylus ドキュメント: http://learnboost.github.io/stylus/ LESS と SCSS の比較: https://css-tricks.com/sass-vs-less/

LESS と SCSS 参考として使用できるプロジェクトと書籍:

1 Bootstrap は LESS を使用します

2. 『Sass and Compass in Practice』では主に Sass の使い方を説明しています