LESS-n番目の式

説明

n番目の式の形式は拡張において重要です。それ以外の場合は、セレクタを異なるものとして扱います。 n番目の式 1n + 2 と n + 2 は同等ですが、extendはこの式を異なるものとして扱います。

たとえば、次のコードで1つのLESSファイルを作成します-

:nth-child(n+2) {
   color: #BF70A5;
   font-style: italic;
}
.child:extend(:nth-child(1n+2)){}

コマンドプロンプトで上記のコードをコンパイルすると、次のようなエラーメッセージが表示されます。

Less Extend

コンパイル後、次のCSSコードを取得します。

:nth-child(n+2) {
   color: #BF70A5;
   font-style: italic;
}

属性セレクタでは、次の例でわかるように、引用タイプは重要ではありません-

例

次の例は、LESSファイルで* n *番目の式を使用する方法を示しています-

extend_syntax

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css"/>
   </head>

   <body>
      <div class = "style">
         <h2>Hello!!!!!</h2>
      </div>
      <p class = "img">Welcome to finddevguides</p>
   </body>
</html>

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

style.less

[title = finddevguides] {
   font-style: italic;
}

[title = 'finddevguides'] {
   font-style: italic;
}

[title = "finddevguides"] {
   font-style: italic;
}
.style:extend([title = finddevguides]) {}
.container:extend([title = 'finddevguides']) {}
.img:extend([title = "finddevguides"]) {}

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

lessc style.less style.css

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

style.css

[title = finddevguides],
.style,
.container,
.img {
   font-style: italic;
}

[title = 'finddevguides'],
.style,
.container,
.img {
   font-style: italic;
}

[title = "finddevguides"],
.style,
.container,
.img {
   font-style: italic;
}

出力

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

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

Less Extend

Less-nth-expression

LESS-n番目の式

説明

例

extend_syntax

style.less

style.css

出力

目次