Less-variables-interpolation-url
提供：Dev Guides
少ない-URL
説明
変数は、URLを保持するために使用できます。
例
次の例は、_ESS_を使用してLESSファイルに_URL_を保持する方法を示しています-
<html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css"/>
<title>LESS URLs</title>
</head>
<body>
<div class = "myclass">
</div>
</body>
</html>ここで、_style.less_ファイルを作成します。
style.less
@images: "http://www.finddevguides.com";
.myclass {
background : url("@{images}/less/images/less_variables/birds.jpg");
width:800px;
height:500px;
}次のコマンドを使用して、_style.less_を_style.css_にコンパイルできます-
lessc style.less style.css上記のコマンドを実行します。それは次のコードで自動的に_style.css_ファイルを作成します-
style.css
.myclass {
background: url("http://www.finddevguides.com/less/images/less_variables/birds.jpg");
width: 800px;
height: 500px;
}出力
上記のコードがどのように機能するかを確認するには、次の手順に従ってください-
- 上記のHTMLコードを less_variables_interpolation_urll ファイルに保存します。
- このHTMLファイルをブラウザで開くと、次の出力が表示されます。
