Less入门

Posted 2020-08-16 积少成多

LESS 原理及使用方式

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。下面是一个简单的例子：

变量

使用@符号定义。例如：

/*变量声明*/

@base: #f938ab;
@images: "../img";
@property: color;
.box {
    /*变量引用*/
    color: @base;
}

body {
    color: #444;
    /*变量引用*/
    background: url("@{images}/white-sand.png");
}

.widget {
  @{property}: #0ee;
  [email protected]{property}: #999;
}

 

/*变量声明*/
.box {
  /*变量引用*/
  color: #f938ab;
}
body {
  color: #444;
  /*变量引用*/
  background: url("../img/white-sand.png");
}
.widget {
  color: #0ee;
  background-color: #999;
}

 

混合（Mixin）

混合就是前面定义的一个样式，后文可以直接引用。示例：

/*带参数*/

.roundedCorners(@radius: 5px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}

/*
@arguments 在 Mixins 中具是一个很特别的参数，
当 Mixins 引用这个参数时，该参数表示所有的变量，
很多情况下，这个参数可以省去你很多代码。
*/ 

.boxMargin(@up:0,@right:0,@down:0,@left:0){
    margin: @arguments;
}

// 在另外的样式选择器中使用
#header {
    .roundedCorners;
    .boxMargin(1px,2px,3px,4px)
}

#content {
    .roundedCorners();
    .boxMargin;
}

#footer {
    .roundedCorners(10px);
}

 

/*带参数*/
/*
@arguments 在 Mixins 中具是一个很特别的参数，
当 Mixins 引用这个参数时，该参数表示所有的变量，
很多情况下，这个参数可以省去你很多代码。
*/
#header {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 1px 2px 3px 4px;
}
#content {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 0 0 0 0;
}
#footer {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

 

嵌套

可以在一个css里有多个css块，以方便我们更好的组织代码，编写css模板。

#header {
    color: black;
    .navigation {
        font-size: 12px;
    }
    .logo {
        width: 300px;
    }
}


/*
有&时,解析的是同一个元素或此元素的伪类
没有&时, 解析是后代元素
*/

#header {
    color: black;
    &-navigation {
        font-size: 12px;
    }
    &-logo {
        width: 300px;
    }
    &:hover {
        color: #ccc;
    }
}

div {
    color: black;
    &-navigation {
        font-size: 12px;
    }
    &-logo {
        width: 300px;
    }
    &:hover {
        color: #ccc;
    }
}

 

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
/*
有&时,解析的是同一个元素或此元素的伪类
没有&时, 解析是后代元素
*/
#header {
  color: black;
}
#header-navigation {
  font-size: 12px;
}
#header-logo {
  width: 300px;
}
#header:hover {
  color: #ccc;
}
div {
  color: black;
}
div-navigation {
  font-size: 12px;
}
div-logo {
  width: 300px;
}
div:hover {
  color: #ccc;
}

运算

任何数字、颜色或者变量都可以参与运算。下面是一组案例：

 @init: #111111;
 @width:19px;
 @height:100%;
 @transition: @init*2;
 .switchColor {
     color: @transition;
     width: @width/2;
     height: @height;
 }

.switchColor {
  color: #222222;
  width: 9.5px;
  height: 100%;
}

 

命名空间

有时候，你可能为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，一些属性集之后可以重复使用。
示例：

/*模块*/
#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
  .tab { /**/ }
  .citation { /**/ }
}

/*下面复用上面的一部分代码*/
#header a {
  color: orange;
  #bundle > .button;
}

/*模块*/
#bundle .button {
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#bundle .button:hover {
  background-color: #ffffff;
}
#bundle .tab {
  /**/
}
#bundle .citation {
  /**/
}
/*下面复用上面的一部分代码*/
#header a {
  color: orange;
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#header a:hover {
  background-color: #ffffff;
}

 

作用域

子类里面的优先，找不到才往父类里找。

示例：

@var: red;
#hearder{
     color: @var;
}
#page {
    color: @var;
    @var: white;
    #header {
        color: @var;
    }
}

#hearder {
  color: #ff0000;
}
#page {
  color: #ffffff;
}
#page #header {
  color: #ffffff;
}

注释

css仅支持块注释 //。less里块注释和行注释都可以使用：//  /**/

导入

和css一样，你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less扩展名，则可以将扩展名省略掉：

@import "ip"; // ip.less 输出效果 = ip.less + test.less
@import "typo.css"; //支持导入css