动态性的款式語言less英语的语法详解之自变量与

日期:2020-10-19 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

做为 CSS 的1种拓展,Less 不但彻底适配 CSS 英语的语法,并且连新增的特点也是应用 CSS 英语的语法。这样的设计方案使得学习培训 Less 很轻轻松松,并且你能够在任什么时候候返回到 CSS。less文档是以less做为文档后缀名,HTML引入时能够像css那样引入,以下:

<link rel="stylesheet/less" type="text/css" href="styles.less">

留意:本文叙述的1切全是根据1.4.0版本号,除非有独特标出。

自变量:
   自变量的功效便是把值界定在1个地区,随后在各部应用,这样能让编码更容易维护保养,以下:


拷贝编码
编码以下:

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

上面编码将色调#428bca赋给1个自变量@link-color,随后在color特性中应用自变量,对应的css以下:


拷贝编码
编码以下:

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

自变量不但能够用在特性值上,还可以用在挑选元素名,特性名(1.6.0适用),url和import方式。以下:

挑选元素名:


拷贝编码
编码以下:

// Variables
@mySelector: banner;
// Usage
<a href="mailto:.@{mySelector">.@{mySelector</a>} {
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;
<a href="mailto:background-@{property">background-@{property</a>}: #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%;

上面两个都会被编译程序成以下


拷贝编码
编码以下:

.lazy-eval-scope {
width: 9%;
}

问甚么第2个也会被编译程序成上面的css,这是由于当1个自变量被界定两次时,最终1次界定的起效。就相近于css中,对同1个元素界定不一样的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;
}

留意:1n+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;
}
}</p> <p>.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重新写过款式:
在开发设计中大家会界定1些通用性款式,随后独立款式在加上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;
}