LESS-デフォルト変数

説明

デフォルト変数には、変数がまだ設定されていない場合にのみ変数を設定する機能があります。変数は後で定義することで簡単にオーバーライドできるため、この機能は必要ありません。

例

次の例は、LESSファイルでの_default variables_の使用を示しています-

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css"/>
      <title>LESS Default Variables</title>
   </head>

   <body>
      <h1>Welcome to finddevguides</h1>
      <p>LESS is a CSS pre-processor that enables customizable,
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

ファイル_style.less_を作成します。

style.less

@import "http://www.finddevguides.com/less/lib.less";//first declaration of @color
@color: green;//this will override @color defined previously
p {
   color : @color;
}

次のコードは、リンクから_lib.less_ファイルを_style.less_にインポートします：/less/lib.less [https://www.finddevguides.com/less/lib.less]パス-

lib.less

@color: blue;

次のコマンドを使用して、_style.less_を_style.css_にコンパイルできます-

lessc style.less style.css

上記のコマンドを実行します。それは次のコードで自動的に_style.css_ファイルを作成します-

style.css

p {
   color: green;
}

出力

上記のコードがどのように機能するかを確認するには、次の手順に従ってください-

上記のHTMLコードを less_default_variablesl ファイルに保存します。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

デフォルト変数なし

Less-default-variables

目次

LESS-デフォルト変数

説明

例

style.less

lib.less

style.css

出力