less構文(一)変数とextend
15848 ワード
要約:
CSSの拡張として、LessはCSS構文を完全に互換性があるだけでなく、新しい特性もCSS構文を使用しています.このようなデザインはLessの勉強を楽にし、いつでもCSSに戻ることができます.lessファイルはlessをファイル接尾辞名とし、HTML参照時にcssのように参照することができます.以下のようにします.
注:本明細書で説明するすべては、特に明記されていない限り、1.4.0バージョンに基づいています.
変数:
変数の役割は、値を1つの場所に定義し、あちこちで使用することです.これにより、コードのメンテナンスが容易になります.次のようにします.// Variables
@link-color: #428bca; // sea blue
//
a:link {
color: @link-color;
}
.widget {
color: #fff;
background: @link-color;
}
上記のコードは、色#428 bcaを変数@link-colorに割り当て、colorプロパティで変数を使用します.対応するcssは次のとおりです.a:link {
color: #428bca;
}
.widget {
color: #fff;
background: #428bca;
}
変数は、属性値だけでなく、要素名、属性名(1.6.0サポート)、urlメソッド、importメソッドの選択にも使用できます.次のようになります.
要素名を選択:// Variables
@mySelector: banner;
// Usage
.@{mySelector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
コンパイル後は.banner {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
url: // Variables
@images: "../img";
//
body {
color: #444;
background: url("@{images}/white-sand.png");
}
コンパイル後body {
color: #444;
background: url("../img/white-sand.png");
}
@import: // Variables
@themes: "../../src/themes";
// Usage
@import "@{themes}/tidal-wave.less";
コンパイル後@import "../../src/themes/tidal-wave.less";
属性名:@property: color;
.widget {
@{property}: #0ee;
background-@{property}: #999;
}
コンパイル後.widget {
color: #0ee;
background-color: #999;
}
変数の変数名は、次のように変数であってもよい.@fnord: "I am fnord.";
@var: "fnord";
content: @@var;
コンパイル後content: "I am fnord.";
遅延ロード:
変数は遅延ロードをサポートするので、変数定義の前に使用できます.次のようになります..lazy-eval {
width: @var;
}
@var: @a;
@a: 9%;
または.lazy-eval-scope {
width: @var;
@a: 9%;
}
@var: @a;
@a: 100%;
上の2つは次のようにコンパイルされます..lazy-eval-scope {
width: 9%;
}
2番目が上のcssにコンパイルされるのは、1つの変数が2回定義されると、最後の定義が有効になるからです.cssと同様に、同じ要素に対して異なるcssスタイルを定義し、最後に定義が有効になります.例えば次のような@var: 0;
.class1 {
@var: 1;
.class {
@var: 2;
three: @var;
@var: 3;
}
one: @var;
}
コンパイル後.class1 .class {
three: 3;
}
.class {
one: 1;
}
Extend：
拡張セレクタはlessの擬似クラスセレクタで、現在のセレクタをコピーし、新しいスタイルを定義しますが、元の不便さnav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
コンパイル後nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}
構文:
.a:extend(.b) {}
.a {
&:extend(.b);
}
.e:extend(.f) {}
.e:extend(.g) {}
//
.e:extend(.f, .g) {}
ネストされたセレクタ:
.bucket {
tr {
color: blue;
}
}
.some-class:extend(.bucket tr) {}
コンパイル後.bucket tr,
.some-class {
color: blue;
}
正確な一致:
.a.class,
.class.a,
.class > .a {
color: blue;
}
.test:extend(.class) {} //
nth：
:nth-child(1n+3) {
color: blue;
}
.child:extend(n+3) {}
コンパイル後:nth-child(1n+3) {
color: blue;
}
注意:1 n+3とn+3はcssでは等価であるがlessでは等価ではない.
属性セレクタ:
[title=identifier] {
color: blue;
}
[title='identifier'] {
color: blue;
}
[title="identifier"] {
color: blue;
}
.noQuote:extend([title=identifier]) {}
.singleQuote:extend([title='identifier']) {}
.doubleQuote:extend([title="identifier"]) {}
コンパイル後[title=identifier],
.noQuote,
.singleQuote,
.doubleQuote {
color: blue;
}
[title='identifier'],
.noQuote,
.singleQuote,
.doubleQuote {
color: blue;
}
[title="identifier"],
.noQuote,
.singleQuote,
.doubleQuote {
color: blue;
}
注意:lessでは単一引用符の二重引用符は区別されません
キーワードall:
.a.b.test,
.test.c {
color: orange;
}
.test {
&:hover {
color: green;
}
}
.replacement:extend(.test all) {}
コンパイル後.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
color: orange;
}
.test:hover,
.replacement:hover {
color: green;
}
変数セレクタ:
@variable: .bucket;
@{variable} { // interpolated selector
color: blue;
}
.some-class:extend(.bucket) {}//
.bucket {
color: blue;
}
.some-class:extend(@{variable}) {} //
@variable: .bucket;
注意:extendは変数に一致しません.
@media：
@media print {
.screenClass:extend(.selector) {} // extend inside media
.selector {
color: black;
}
}
.selector {
color: red;
}
@media screen {
.selector {
color: blue;
}
}
コンパイル後@media print {
.selector,
.screenClass {
color: black;
}
}
.selector {
color: red;
}
@media screen {
.selector {
color: blue;
}
}
注:extendは@mediaで前に定義されたものにのみ一致し、後に定義されたものは無視されます.
extendを使用してスタイルを書き換えるには、次の手順に従います。
開発では、いくつかの一般的なスタイルを定義し、classを追加し、cssの後で前の原理を上書きしてスタイルを実現します.extendは、次のような効果を実現することもできます..animal {
background-color: black;
color: white;
}
.bear {
&:extend(.animal);
background-color: brown;
}
cssコードを減らす:
.my-inline-block() {
display: inline-block;
font-size: 0;
}
.thing1 {
.my-inline-block;
}
.thing2 {
.my-inline-block;
}
コンパイル後:.thing1 {
display: inline-block;
font-size: 0;
}
.thing2 {
display: inline-block;
font-size: 0;
}
extendの使用.my-inline-block {
display: inline-block;
font-size: 0;
}
.thing1 {
&:extend(.my-inline-block);
}
.thing2 {
&:extend(.my-inline-block);
}
コンパイル後.my-inline-block,
.thing1,
.thing2 {
display: inline-block;
font-size: 0;
}
変数の役割は、値を1つの場所に定義し、あちこちで使用することです.これにより、コードのメンテナンスが容易になります.次のようにします.
// Variables
@link-color: #428bca; // sea blue
//
a:link {
color: @link-color;
}
.widget {
color: #fff;
background: @link-color;
}上記のコードは、色#428 bcaを変数@link-colorに割り当て、colorプロパティで変数を使用します.対応するcssは次のとおりです.
a:link {
color: #428bca;
}
.widget {
color: #fff;
background: #428bca;
}変数は、属性値だけでなく、要素名、属性名(1.6.0サポート)、urlメソッド、importメソッドの選択にも使用できます.次のようになります.
要素名を選択:
// Variables
@mySelector: banner;
// Usage
.@{mySelector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}コンパイル後は
.banner {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}url:
// Variables
@images: "../img";
//
body {
color: #444;
background: url("@{images}/white-sand.png");
}コンパイル後
body {
color: #444;
background: url("../img/white-sand.png");
}@import:
// Variables
@themes: "../../src/themes";
// Usage
@import "@{themes}/tidal-wave.less";コンパイル後
@import "../../src/themes/tidal-wave.less";属性名:
@property: color;
.widget {
@{property}: #0ee;
background-@{property}: #999;
}コンパイル後
.widget {
color: #0ee;
background-color: #999;
}変数の変数名は、次のように変数であってもよい.
@fnord: "I am fnord.";
@var: "fnord";
content: @@var;コンパイル後
content: "I am fnord.";遅延ロード:
変数は遅延ロードをサポートするので、変数定義の前に使用できます.次のようになります.
.lazy-eval {
width: @var;
}
@var: @a;
@a: 9%;または
.lazy-eval-scope {
width: @var;
@a: 9%;
}
@var: @a;
@a: 100%;上の2つは次のようにコンパイルされます.
.lazy-eval-scope {
width: 9%;
}2番目が上のcssにコンパイルされるのは、1つの変数が2回定義されると、最後の定義が有効になるからです.cssと同様に、同じ要素に対して異なるcssスタイルを定義し、最後に定義が有効になります.例えば次のような
@var: 0;
.class1 {
@var: 1;
.class {
@var: 2;
three: @var;
@var: 3;
}
one: @var;
}コンパイル後
.class1 .class {
three: 3;
}
.class {
one: 1;
}Extend：
拡張セレクタはlessの擬似クラスセレクタで、現在のセレクタをコピーし、新しいスタイルを定義しますが、元の不便さnav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
コンパイル後nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}
構文:
.a:extend(.b) {}
.a {
&:extend(.b);
}
.e:extend(.f) {}
.e:extend(.g) {}
//
.e:extend(.f, .g) {}
ネストされたセレクタ:
.bucket {
tr {
color: blue;
}
}
.some-class:extend(.bucket tr) {}
コンパイル後.bucket tr,
.some-class {
color: blue;
}
正確な一致:
.a.class,
.class.a,
.class > .a {
color: blue;
}
.test:extend(.class) {} //
nth：
:nth-child(1n+3) {
color: blue;
}
.child:extend(n+3) {}
コンパイル後:nth-child(1n+3) {
color: blue;
}
注意:1 n+3とn+3はcssでは等価であるがlessでは等価ではない.
属性セレクタ:
[title=identifier] {
color: blue;
}
[title='identifier'] {
color: blue;
}
[title="identifier"] {
color: blue;
}
.noQuote:extend([title=identifier]) {}
.singleQuote:extend([title='identifier']) {}
.doubleQuote:extend([title="identifier"]) {}
コンパイル後[title=identifier],
.noQuote,
.singleQuote,
.doubleQuote {
color: blue;
}
[title='identifier'],
.noQuote,
.singleQuote,
.doubleQuote {
color: blue;
}
[title="identifier"],
.noQuote,
.singleQuote,
.doubleQuote {
color: blue;
}
注意:lessでは単一引用符の二重引用符は区別されません
キーワードall:
.a.b.test,
.test.c {
color: orange;
}
.test {
&:hover {
color: green;
}
}
.replacement:extend(.test all) {}
コンパイル後.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
color: orange;
}
.test:hover,
.replacement:hover {
color: green;
}
変数セレクタ:
@variable: .bucket;
@{variable} { // interpolated selector
color: blue;
}
.some-class:extend(.bucket) {}//
.bucket {
color: blue;
}
.some-class:extend(@{variable}) {} //
@variable: .bucket;
注意:extendは変数に一致しません.
@media：
@media print {
.screenClass:extend(.selector) {} // extend inside media
.selector {
color: black;
}
}
.selector {
color: red;
}
@media screen {
.selector {
color: blue;
}
}
コンパイル後@media print {
.selector,
.screenClass {
color: black;
}
}
.selector {
color: red;
}
@media screen {
.selector {
color: blue;
}
}
注:extendは@mediaで前に定義されたものにのみ一致し、後に定義されたものは無視されます.
extendを使用してスタイルを書き換えるには、次の手順に従います。
開発では、いくつかの一般的なスタイルを定義し、classを追加し、cssの後で前の原理を上書きしてスタイルを実現します.extendは、次のような効果を実現することもできます..animal {
background-color: black;
color: white;
}
.bear {
&:extend(.animal);
background-color: brown;
}
cssコードを減らす:
.my-inline-block() {
display: inline-block;
font-size: 0;
}
.thing1 {
.my-inline-block;
}
.thing2 {
.my-inline-block;
}
コンパイル後:.thing1 {
display: inline-block;
font-size: 0;
}
.thing2 {
display: inline-block;
font-size: 0;
}
extendの使用.my-inline-block {
display: inline-block;
font-size: 0;
}
.thing1 {
&:extend(.my-inline-block);
}
.thing2 {
&:extend(.my-inline-block);
}
コンパイル後.my-inline-block,
.thing1,
.thing2 {
display: inline-block;
font-size: 0;
}
nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}.a:extend(.b) {}
.a {
&:extend(.b);
}.e:extend(.f) {}
.e:extend(.g) {}
//
.e:extend(.f, .g) {}.bucket {
tr {
color: blue;
}
}
.some-class:extend(.bucket tr) {}.bucket tr,
.some-class {
color: blue;
}.a.class,
.class.a,
.class > .a {
color: blue;
}
.test:extend(.class) {} // :nth-child(1n+3) {
color: blue;
}
.child:extend(n+3) {}:nth-child(1n+3) {
color: blue;
}[title=identifier] {
color: blue;
}
[title='identifier'] {
color: blue;
}
[title="identifier"] {
color: blue;
}
.noQuote:extend([title=identifier]) {}
.singleQuote:extend([title='identifier']) {}
.doubleQuote:extend([title="identifier"]) {}[title=identifier],
.noQuote,
.singleQuote,
.doubleQuote {
color: blue;
}
[title='identifier'],
.noQuote,
.singleQuote,
.doubleQuote {
color: blue;
}
[title="identifier"],
.noQuote,
.singleQuote,
.doubleQuote {
color: blue;
}.a.b.test,
.test.c {
color: orange;
}
.test {
&:hover {
color: green;
}
}
.replacement:extend(.test all) {}.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
color: orange;
}
.test:hover,
.replacement:hover {
color: green;
}@variable: .bucket;
@{variable} { // interpolated selector
color: blue;
}
.some-class:extend(.bucket) {}// .bucket {
color: blue;
}
.some-class:extend(@{variable}) {} //
@variable: .bucket;@media print {
.screenClass:extend(.selector) {} // extend inside media
.selector {
color: black;
}
}
.selector {
color: red;
}
@media screen {
.selector {
color: blue;
}
}@media print {
.selector,
.screenClass {
color: black;
}
}
.selector {
color: red;
}
@media screen {
.selector {
color: blue;
}
}.animal {
background-color: black;
color: white;
}
.bear {
&:extend(.animal);
background-color: brown;
}.my-inline-block() {
display: inline-block;
font-size: 0;
}
.thing1 {
.my-inline-block;
}
.thing2 {
.my-inline-block;
}.thing1 {
display: inline-block;
font-size: 0;
}
.thing2 {
display: inline-block;
font-size: 0;
}.my-inline-block {
display: inline-block;
font-size: 0;
}
.thing1 {
&:extend(.my-inline-block);
}
.thing2 {
&:extend(.my-inline-block);
}.my-inline-block,
.thing1,
.thing2 {
display: inline-block;
font-size: 0;
}