利用less编写CSS(参考英文文档)

less编写CSS(参考英文文档)

文档地址

对于使用前的说明

​ 如果使用less 编写,且还没有编写完成,就注意不要在映射出的css文件中编写;因为你即便写了也没用,再次使用less编写的时候less会全部映射覆盖原css文件.你之前编写的会全部覆盖掉.

不要觉得less不好用,当你写css代码500行之上的时候,你会发现你有多需要它.

变量

变量命名使用:@

(常用)案例

@a:color;
.a{color:@a};

结果:

.a {
  color: color;
}
/*# sourceMappingURL=./index.css.map */

另外,变量不只可以在使用之前编写,还可以在使用之后编写,也就是说,只要声明变量,不论在哪里声明,都可以在声明前,声明后使用.

---

@a:abcd;//也可以@a:.abcd;

.@{a}{   //上面注释:@{a}
  color:red;
}

.abcd {
  color: red;
}
/*# sourceMappingURL=./index.css.map */

---

// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

---

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

---

变量名称的综合变换:

@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;

结果:

content: "I am fnord.";

另外还有一个很重要的样例:

@a:{
  color:red;
}
.b{
  @a();//如果用的是变量,一定要加上括号,否则报错;
}

.b {
  color: red;
}
/*# sourceMappingURL=./index.css.map */

Mixins

将已有的样式表中的属性混合到另一个属性中

案例

.a{
  color:red;
}
// 这里一定要注意,对于用brace括起来的变量,需要使用前缀"."
.b{
  background:red;
  .a;//此处混合
    //另外,在其后添加上一个括号当做"函数也可以";
}

结果:

.a {
  color: red;
}
.b {
  background: red;
  color: red;
}
/*# sourceMappingURL=./index.css.map */

如果只是希望.a当做一个函数,为了节省css加载时间,不希望.出现在映射的css当中,那么

.a(){//只是在此处添加上了一个括号
  color:red;
}

.b{
  background:red;
  .a;//此处混合成功;
}

.b {
  background: red;
  color: red;
}
//也就没了a
/*# sourceMappingURL=./index.css.map */

注意:不只是类(.)名可用,id(#)和标签本身同样可以用

Nested Rules(嵌套)----最常用

​ 对于更深一层的样式表,比如a .b .c,如果对每一层都渲染,是会要一次次编写类名称的.但是less可以只写一次类名,也就是嵌套

案例

比如你既想编写#a的样式表,又想编写#a .b的样式表,只需如下:

#a{
  color:red;
  .b{
    background:red;
  }
}

结果:

#a {
  color: red;
}
#a .b {
  background: red;
}
/*# sourceMappingURL=./index.css.map */

不只有此用法,下面扩展:

对于伪类选择器的使用;

.a{
  color:red;
  &:hover{
    background-color: red;
  }
}

.a {
  color: red;
}
.a:hover {
  background-color: red;
}
/*# sourceMappingURL=./index.css.map */

对于上面的编写,一定要注意:如果想要引用父选择器,一定要加上==&==

如果不写&,就成下面的样子:

.a{
  color:red;
:hover{
    background-color: red;
  }
}

.a {
  color: red;
}
.a :hover {//注意,两个标签之间有一个空格,与你想要的相差甚远
  background-color: red;
}
/*# sourceMappingURL=./index.css.map */

这也就是说==,对于a标签中的标签,鼠标悬浮时颜色会便成为红色==

另外,文档中没写,但个人尝试所得:

.a{
  &>.b{//事实上,&可写可不写:>.b;
    color:red;
  }
}

.a > .b {
  color: red;
}
/*# sourceMappingURL=./index.css.map */

其他类似的选择器应该也成立;

---

还有,对于嵌套的选择器未必就是父子或者父类与子代之间的关系:

.a{
  &:hover{//对于个人所了解的情况下,一层嵌套,&永远代表着父类的名称(也仅仅是个名称,不做父类选择器),但是如果多层嵌套的话,就不是这样,对与多层,之后讲解
    color:red;
  }
}

.a:hover {//此处就不是父子之间的关系;
  color: red;
}
/*# sourceMappingURL=./index.css.map */

只不过默认在父选择器中什么都不写默认表示后代选择器.

操作符的使用

数学中的+ - * / 在less中都可以使用

案例:

@aa:5px;
@bb:10px;

.a{
padding: @aa+@bb;
}

.a {
  padding: 15px;//相加结果;
}
/*# sourceMappingURL=./index.css.map */

- * / 的使用暂不距离;

对于颜色来说,同样可以使用操作符.

E.g., if the user added two colors, then the green dimension of the result is equal to sum of green dimensions of input colors. If the user multiplied a color by a number, each color dimension will get multiplied.

@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

方法

less中有很多的方法可供使用,

下面的例子使用百分比将0.5转换为50%，将基本色的饱和度增加5%，然后将背景色设置为25%调亮并旋转8度

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

变量范围

变量的范围和编程语言很相似,有一点不同:变量可以放置在范围内的任何一个地方,并不是先声明后使用

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

导入文件

你可以导入一个.less文件和其中任意的变量

@import "library"; // library.less
@import "typo.css";

将变量应用于其他地方

Extend

因为没看过视频教程,不知道其专业中文名称是什么,暂时就说是extend;

.a{
  color:red;
}
.b{
  &:extend(.a);//此处为重点
}

.a,
.b {
  color: red;
}
/*# sourceMappingURL=./index.css.map */

是不是觉得和下面的结果一样?

.a{
  color:red;
}
.b{
.a;//
}

.a {
  color: red;
}
.b {
  color: red;
}
/*# sourceMappingURL=./index.css.map */

但事实上css代码行数和代码量有所增加

只能说各有好处

嵌套:如果以后丢失了less文件,那么可以直接在css上修改(本身就很人性化)但是代码量增加

extend:简化代码量,但是less文件丢失以后,会很难修改,因为对于同一个样式不同的操作不在同一个地方

上面的extend代码还可以写成下面:

.a{
  color:red;
}
.b:extend(.a){
  
}

结果显示和上面一样;

有所不同的是一个将extend放在了选择器上,一个将其放入样式表内部;

all关键字:

.c:extend(.d all) {//此处还是慎用为好
  // extends all instances of ".d" e.g. ".x.d" or ".d.x"
}
.c:extend(.d) {
  // extends only instances where the selector will be output as just ".d"

另外,还可以一次编写,包含多个extend

.a{
  color:red;
}
.b{
  background:red;
}
.c{
  &:extend(.a,.b);//此处为重点
}

.a,
.c {
  color: red;
}
.b,
.c {
  background: red;
}
/*# sourceMappingURL=./index.css.map */

注意,所有的extend都必须出现在最后面,不能出现在中间部分`

pre:hover:extend(div pre).nth-child(odd)  //这样编写是错误的

同样,extend也可以在括号中嵌套

.a{
  .b{
&:extend(.c .d);
  }
}

.c{
  .d{
    color:red;
  }
}

.c .d,
.a .b {
  color: red;
}

extend的精准匹配

.a.class,
.class.a,
.class > .a {
  color: blue;
}
.test:extend(.class) {} 这将不会匹配上面的任何一个;

*.class {
  color: blue;
}
.noStar:extend(.class) {} /同样,这也不会匹配上面的--这是语法,没有为什么,只要记住这个例外就可

对于伪类选择器的顺序也十分重要

link:hover:visited{
  color:red;
}
.selector:extend(link:visited:hover){};//尽管和上面的显示一样,但仍不会匹配;

link:hover:visited {
  color: red;
}
/*# sourceMappingURL=./index.css.map */

对于nth的表达

:nth-child(1n+3) {
  color: blue;
}
.child:extend(:nth-child(n+3)) {}//同样不会被匹配,尽管1n+3和n+3相同

选择器中的引号并不很重要

[title=identifier] {
  color: blue;
}
[title='identifier'] {
  color: blue;
}
[title="identifier"] {
  color: blue;
}
//上面三个表示的是一样的


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

extend并不能匹配变量:

此处有争议:因为我所测试的是可以匹配到变量的,暂且不论,将测试结果显示如下:

@variable: .bucket;
@{variable} { // interpolated selector
  color: blue;
}
.some-class:extend(.bucket) {} // does nothing, no match is found

.bucket,//此处已经匹配成功,可能是我看的英文文档属于旧版的缘故
.some-class {
  color: blue;
}
/*# sourceMappingURL=./index.css.map */

但是以下确实无法匹配成功:

.bucket {
  color: blue;
}
.some-class:extend(@{variable}) {} // interpolated selector matches nothing
@variable: .bucket;

.bucket {
  color: blue;
}
/*# sourceMappingURL=./index.css.map */

但是注意:

.bucket {
  color: blue;
}
@{variable}:extend(.bucket) {}
@variable: .selector;

.bucket, .selector {//此处可以匹配成功,注意和上面不要混淆
  color: blue;
}

目前没有检测重复的能力:

.alert-info,
.widget {
  /* declarations */
}

.alert:extend(.alert-info, .widget) {}

.alert-info,
.widget,
.alert,
.alert {//两个alert:但是不影响布局
  /* declarations */
}

对于Mixins的扩展

嵌套

.a(){
  &:hover{
    color:red;
  }
}
.bt{
  .a();
}

.bt:hover {
  color: red;
}
/*# sourceMappingURL=./index.css.map */

Namespaces

#outer {
  .inner {
    color: red;
  }
}

.c {
  #outer > .inner;//此处的>可选
}

// 这些表示都是相同的, 但是个人认为使用时还是有些规律的好;
#outer > .inner;
#outer > .inner();
#outer .inner;
#outer .inner();
#outer.inner;
#outer.inner();

对于以上的一个使用是:你可以将其name()放到一个id选择器下,以免和来自其他的less文件产生冲突

#my-library {
  .my-mixin() {
    color: black;
  }
}
// which can be used like this
.class {
  #my-library > .my-mixin();
}

Guarded Namespaces

如果名称空间中一个guard(when),那么只有当guard条件返回true时才会被使用;

#namespace when (@mode=huge) {
//其实上面的解释也就是when(true/false)只有返回true才可以显示在css中;相当于判断语句
  .mixin() { /* */ }
}

#namespace {
  .mixin() when (@mode=huge) { /* */ }
}

带有参数的Mixins

.a(@color)//@color充当参数;
{
  color:@color;
}
.b{
  .a(red);
}

.b {//对于一个参数的扩展;
  color: red;
}
/*# sourceMappingURL=./index.css.map */

当然参数中可以有默认值;

.a(@color:blue)//blue为默认值;
{
  color:@color;
}
.b{
  .a();//当然如果没有参数,可以直接调用.a;
}

.b {
  color: blue;
}
/*# sourceMappingURL=./index.css.map */

对于大量的参数

此处一定要注意:对于大量的参数尽量使用分隔符";“而不是”,".因为很有可能less会编译出你想不到的结果;下面的图片既是原因:

但其实我个人不知道他所说的list是什么;总之使用semicolon不会出错就对了!

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QFetfu9Q-1625717729851)(https://i.loli.net/2021/07/08/sa3jox7I1ZfQ8zv.png)]

.a(@color:red)
{
color:red;
}
//没有填写参数这两个.a都会显现出来;注意不要出错;
.a()
{
  background:red;
}
.c{
  .a();
}

.c {
  color: red;
  background: red;
}
/*# sourceMappingURL=./index.css.map */

多个参数案例

.a(@color:red;@padding:2px)
{
color:@color;
padding: @padding;
}

@arguments

这表示所有的参数;

.a(@margin0;@margin1;@margin2;@margin:3)
{
  margin:@arguments;
}

.b{
  .a(1px;2px;3px;4px);
}

.b {
  margin: 1px 2px 3px 4px;//也就是说@arguments代表了所有的参数;
}
/*# sourceMappingURL=./index.css.map */

将Mixins当做’“函数”'使用

在调用函数之后,那么函数中的变量就可以在调用函数的样式表中使用;(但是我个人并没有实际应用到开发中,暂且不知其用处)

.mixin() {
  @width:  100%;
  @height: 200px;
}
.caller {
  .mixin();
  width:  @width;
  height: @height;
}

.caller {
  width:  100%;
  height: 200px;
}

可以当做一个简单的函数;

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}

div {
  padding: 33px;
}

Import指令扩展

导入,不止可以导入less,还可以css,等

文件扩展

@import "foo";      // foo.less is imported
@import "foo.less"; // foo.less is imported
@import "foo.php";  // foo.php imported as a less file
@import "foo.css";  // statement left in place, as-is

导入options

Syntax: @import (keyword) "filename";

The following import directives have been implemented:
reference: use a Less file but do not output it
inline: include the source file in the output but do not process it
less: treat the file as a Less file, no matter what the file extension
css: treat the file as a CSS file, no matter what the file extension
once: only include the file once (this is default behavior)
multiple: include the file multiple times
optional: continue compiling when file is not found

可以使用不只一个选项

reference

使用@import(reference) “index.less” 来导入额外的文件,但是只要里面的文件不被所导入的文件所使用,就不会显示在映射的css中;

引用样式不会显示出来,除非被用作mixin或者扩展

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zC7zb7Iq-1625717729853)(https://i.loli.net/2021/07/08/apTXC5vLVPu94yW.png)]

inline

Use @import (inline) to include external files, but not process them.

Example: @import (inline) "not-less-compatible.css";

You will use this when a CSS file may not be Less compatible; this is because although Less supports most known standards CSS, it does not support comments in some places and does not support all known CSS hacks without modifying the CSS.

So you can use this to include the file in the output so that all CSS will be in one file.

less

Use @import (less) to treat imported files as Less, regardless of file extension.

Use @import (css) to treat imported files as regular CSS, regardless of file extension. This means the import statement will be left as it is.

once

默认只导入一次,也就是说,对于同一文件,如果导入了多次,那么除了第一次外,其他导入会被省略,此处是默认值;

@import (once) "foo.less";
@import (once) "foo.less"; // this statement will be 

multiple

可以导入多次并不被忽略,和once相反;

// file: foo.less
.a {
  color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";

.a {
  color: green;
}
.a {
  color: green;
}

个人感觉没什么必要

optional

只有当文件存在的时候才会导入,如果不存在的话就不会导入.

但是如果不写这一个optional,文件不存在的时候就会报错;

Mixin Guards

可用作判断语句,if/ else;

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

比较运算:>,>=,=,=<,<

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }
//上面两个相同;

.class {
  .truth(40);//只要不是true就是false;和某些编程语言不通;
}

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
//使用and组合;

.mixin (@a) when (@a > 10), (@a < -10) { ... }
//使用or或者","组合

Type Checking Functions

.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
.mixin (@a; @b: black) when (iscolor(@b)) { ... }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CUth28f1-1625717729855)(https://i.loli.net/2021/07/08/MdWstze9gCINUf3.png)]

还有很多其他的方法,在此不再举例;

类似于条件语句的Mixins

.mixin (@a) when (@a > 0) { ...  }
.mixin (@a) when (default()) { ... }
//这里的default()就相当于else 也就是说,@a<=0的时候才会实行

循环语句

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}

div {
  .loop(5); // launch the loop
}

div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

---

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

merge

The merge feature allows for aggregating values from multiple properties into a comma or space separated list under a single property. merge is useful for properties such as background and transform.

举例:

comma

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

space

.mixin() {
  transform+_: scale(2);
}
.myclass {
  .mixin();
  transform+_: rotate(15deg);
}

.myclass {
  transform: scale(2) rotate(15deg);
}

注意:To avoid any unintentional joins, merge requires an explicit + or +_ flag on each join pending declaration.

父类选择器

一般使用:

a {
  color: blue;
  &:hover {
    color: green;
  }
}

a {
  color: blue;
}

a:hover {
  color: green;
}

另外,只有想不到,没有做不到

此处最适合有item的地方;使用起来更为方便

.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }

  &-custom {
    background-image: url("custom.png");
  }
}

.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");
}

对于许多的&

此处较为复杂

.link {
  & + & {
    color: red;
  }

  & & {
    color: green;
  }

  && {
    color: blue;
  }

  &, &ish {
    color: cyan;
  }
}

.link + .link {
  color: red;
}
.link .link {
  color: green;
}
.link.link {
  color: blue;
}
.link, .linkish {
  color: cyan;
}

两层嵌套(这里不太容易理解,但是记住就可)

.grand {
  .parent {
    & > & {
      color: red;
    }

    & & {
      color: green;
    }

    && {
      color: blue;
    }

    &, &ish {
      color: cyan;
    }
  }
}

.grand .parent > .grand .parent {
  color: red;
}
.grand .parent .grand .parent {
  color: green;
}
.grand .parent.grand .parent {
  color: blue;
}
.grand .parent,
.grand .parentish {
  color: cyan;
}

---

以上就是less的大部分内容,另外还有一些"函数"没有描述

由于函数那一部分比语法部分都长,也懒得看了,这里是函数地址

url(“ok.png”);
}
&-cancel {
background-image: url(“cancel.png”);
}

&-custom {
background-image: url(“custom.png”);
}
}

.button-ok {
background-image: url(“ok.png”);
}
.button-cancel {
background-image: url(“cancel.png”);
}
.button-custom {
background-image: url(“custom.png”);
}

##### 对于许多的& 

> 此处较为复杂

.link {
& + & {
color: red;
}

& & {
color: green;
}

&& {
color: blue;
}

&, &ish {
color: cyan;
}
}

.link + .link {
color: red;
}
.link .link {
color: green;
}
.link.link {
color: blue;
}
.link, .linkish {
color: cyan;
}

###### 两层嵌套(这里不太容易理解,但是记住就可)

.grand {
.parent {
& > & {
color: red;
}

& & {
  color: green;
}

&& {
  color: blue;
}

&, &ish {
  color: cyan;
}

}
}

.grand .parent > .grand .parent {
color: red;
}
.grand .parent .grand .parent {
color: green;
}
.grand .parent.grand .parent {
color: blue;
}
.grand .parent,
.grand .parentish {
color: cyan;
}

---

以上就是less的大部分内容,另外还有一些"函数"没有描述

由于函数那一部分比语法部分都长,也懒得看了,这里是[函数地址](http://lesscss.cn/functions/)
而且此处只是对于文档的一部分整理,并非全部,也不是按照文档编写,之前已经看过文档,这次只是为了复习一下,想到了什么就写什么