少ない構文 (1) 変数と extend_html/css_WEB-ITnose

概要:

CSS の拡張機能として、Less は CSS 構文と完全に互換性があるだけでなく、新機能にも CSS 構文を使用します。この設計により学習が容易になり、いつでも CSS にフォールバックできます。 HTML を引用する場合、less ファイルには次のように css のように引用できます。

注: この記事で説明されている内容は、特に断りのない限り、バージョン 1.4.0 に基づいています。

変数:

変数の機能は、次のように、1 か所で値を定義し、それをあらゆる場所で使用することで、コードの保守が容易になります。

// Variables@link-color:        #428bca; // sea blue// 用法a:link {  color: @link-color;}.widget {  color: #fff;  background: @link-color;}

上記のコードは、色 #428bca を a変数 @link-color を指定し、color 属性で変数を使用します。対応する CSS は次のとおりです。

a:link {  color: #428bca;}.widget {  color: #fff;  background: #428bca;}

変数は属性値だけでなく、要素名、属性名の選択にも使用できます (サポートされています)。 1.6.0 では）、URL とインポート方法。次のように:

要素名を選択:

// 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 にコンパイルされると、これはなぜなら、変数が 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:

拡張セレクターは、現在のセレクターをコピーして新しいスタイルを定義しますが、元の不便さはありません

。

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;}

注:

1n+3 と n+ 3 は同等ですCSS ではありますが、それほど同等ではありません。 属性セレクター:

[title=identifier] {  color: blue;}[title='identifier'] {  color: blue;}[title="identifier"] {  color: blue;}.noQuote:extend([title=identifier]) {}.singleQuote:extend([title='identifier']) {}.doubleQuote:extend([title="identifier"]) {}

Compiled

[title=identifier],.noQuote,.singleQuote,.doubleQuote {  color: blue;}[title='identifier'],.noQuote,.singleQuote,.doubleQuote {  color: blue;}[title="identifier"],.noQuote,.singleQuote,.doubleQuote {  color: blue;}

注:

less Keyword 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 を使用してスタイルを書き換えます:

開発中、いくつかの共通のスタイルを定義し、次に個別のスタイルにクラスを追加し、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;}