シリーズ記事ディレクトリ
記事ディレクトリ
1.変動が少ない
1. セレクタ変数
セレクターを動的にする
index.html ファイル
- ID セレクターとクラス セレクター
<div id="wrap">
Hello Less!
</div>
<div class="wrap">
Hello World!
</div>
index.less ファイル
- 1 つ目は、セレクターのタイプ (id セレクター)を判別することです。
- 2つ目は不定セレクターの型(id/classセレクター)
// 选择器变量
@mySelector: #wrap;
@wrap: wrap;
@{
mySelector} {
color: #ccc;
width: 50%;
}
.@{
wrap} {
color: skyblue;
width: 50%;
}
#@{
wrap} {
color: aqua;
width: 50%;
}
index.css ファイル
- 自動的にエスケープされた css ファイル
#wrap {
color: #ccc;
width: 50%;
}
.wrap {
color: skyblue;
width: 50%;
}
#wrap {
color: aqua;
width: 50%;
}
2. 属性変数
コードの記述を減らす
index.html ファイル
注: これは、次のテストで使用される公開 HTML 構造です。
<div id="wrap">
Hello Less!
</div>
index.less ファイル
- プロパティ変数、設定プロパティ
// 选择器变量
@mySelector: #wrap;
@wrap: wrap;
// 属性变量
@borderStyle: border-style;
@solid: solid;
@{
mySelector} {
@{
borderStyle}: @solid;
}
index.css ファイル
- 自動的にエスケープされた css ファイル
#wrap {
border-style: solid;
}
3.url 変数
プロジェクト構造が変更されたら、その変数を次のように変更します。
index.less ファイル
@images: "../../img";
body {
background: url("@{images}/xxx.png");
}
index.css ファイル
- 自動的にエスケープされた css ファイル
body {
background: url("../../img/xxx.png");
}
4. 変数を宣言する
構造: @name: {プロパティ: 値}
使用: @name()
例: で...示さ
index.less ファイル
@Rules: {
width: 60px;
height: 30px;
border: 1px solid #ccc;
/*第一步： 溢出隐藏 */
overflow: hidden;
/* 第二步：让文本不会换行， 在同一行继续 */
white-space: nowrap;
/* 第三步：用省略号来代表未显示完的文本 */
text-overflow: ellipsis;
}
#wrap {
@Rules();
}
index.css ファイル
- 自動的にエスケープされた css ファイル
#wrap {
width: 60px;
height: 30px;
border: 1px solid #ccc;
/*第一步： 溢出隐藏 */
overflow: hidden;
/* 第二步：让文本不会换行， 在同一行继续 */
white-space: nowrap;
/* 第三步：用省略号来代表未显示完的文本 */
text-overflow: ellipsis;
}
5.可変操作
- 加算または減算の場合、最初のデータの単位が基数として使用されます
- 掛け算、割り算は単位が統一されていることに注意
- スペースに注意してください
index.less ファイル
@width: 300px;
@color: #ccc;
#wrap {
width: @width - 20;
height: @width - 20 * 2;
margin: (@width - 200) * 2;
color: @color*1;
background-color: @color + #111;
}
index.css ファイル
- 自動的にエスケープされた css ファイル
#wrap {
width: 280px;
height: 260px;
margin: 200px;
color: #cccccc;
background-color: #dddddd;
}
6. 変数の範囲
近接の原則
index.less ファイル
@var:@a;
@a:100%;
#wrap {
width: @var;
@a:9%;
border: 1px solid #ccc;
}
index.css ファイル
- 自動的にエスケープされた css ファイル
#wrap {
width: 9%;
border: 1px solid #ccc;
}
7. 変数を使用して変数を定義する
index.less ファイル
@fond:@var;
@var:'fond';
#wrap::after {
content: @var;
}
index.css ファイル
- 自動的にエスケープされた css ファイル
#wrap::after {
content: 'fond';
}
2.入れ子が少ない
1. & の使用
&: 前のセレクターの名前
index.html ファイル
- 複数レベルのネスト
<div class="center">
<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>
</div>
index.less ファイル
- &: 前のセレクターの名前
- 書き込み可能かどうか
.center {
width: 100px;
height: 100px;
background: red;
& #list {
width: 50px;
height: 50px;
background: skyblue;
li {
width: 20px;
height: 20px;
background: #ccc;
}
}
}
index.css ファイル
- 自動的にエスケープされた css ファイル
.center {
width: 100px;
height: 100px;
background: red;
}
.center #list {
width: 50px;
height: 50px;
background: skyblue;
}
.center #list li {
width: 20px;
height: 20px;
background: #ccc;
}
2. メディアのお問い合わせ
index.less ファイル
#main {
@media screen {
@media (max-width: 768px) {
width: 100px;
}
}
@media tv {
width: 2000px;
}
}
index.css ファイル
- 自動的にエスケープされた css ファイル
@media screen and (max-width: 768px) {
#main {
width: 100px;
}
}
@media tv {
#main {
width: 2000px;
}
}
3. ヒント: プライベート スタイルを追加する
例: 非表示から表示へのスタイル切り替えの実装
index.less ファイル
#main {
&.show {
display: block;
}
}
.show {
display: none;
}
index.css ファイル
- 自動的にエスケープされた css ファイル
#main.show {
display: block;
}
.show {
display: none;
}
index.html ファイル
- メインノードを取得し、非表示から表示へのスタイルを実装します
const main = document.getElementById('main')
main.classList.add("show")
ここはフロントエンド食料品店です。あなたの