LESS

less是什么

less css是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、继承、运算、函数等，更方便css的编写和维护

less于css，相当于jquery于JavaScript

编译工具

koala --初学者推荐 m可以去官网下载：http://koala-app.com/

Node.js库

浏览器端

less语法

less注释

1. /**/ 会被编译出来

2. // 不会被编译

                                                                          main.less
/* 我会被编译出来 */
// 我不会被编译出来复制代码

                                                                           main.css
/* 我会被编译出来 */复制代码

变量

用@声明变量

                                                                          main.less
@width: 300px;
.box {
  width: @width;
  height: @width;
  background: pink;
}
复制代码

                                                                           main.css
.box {
    width: 300px;
    height: 300px;
    background: pink;
}复制代码

混合

1. 可直接引用 class

                                                                          main.less
.border {
    border: 1px solid #ddd;
}
.box {
    width: @width;
    height: @width;
    background: pink;
    .border;
}复制代码

                                                                           main.css
.box {
  width: 300px;
  height: 300px;
  background: pink;
  border: 1px solid #ddd;
}复制代码

2. 可带参数，并且可以设置默认值

                                                                          main.less
.padding(@padding) {
  padding:@padding;
}
.margin_left(@margin_left:10px) {
  margin-left: @margin_left;
}
.border_radius(@radius:10px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.box {
  width: @width;
  height: @width;
  background: pink;
  .border;
  .padding(10px); // 无默认值时 必须指定值
  .margin_left(20px); // 指定值时 用指定的值
  .border_radius(); // 不指定值时 用默认值
}复制代码

                                                                           main.css
.box {
  width: 300px;
  height: 300px;
  background: pink;
  border: 1px solid #ddd;
  padding: 10px;
  margin-left: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}复制代码

匹配模式

1. @_ 全部匹配

                                                                          main.less
// 匹配模式 写各个方向的三角形
.triangle(top, @w: 10px, @c: red) {
  border-width: @w;
  border-color: transparent transparent @c transparent;
  border-style: dashed dashed solid dashed;
}
.triangle(bottom, @w: 10px, @c: red) {
  border-width: @w;
  border-color: @c transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}
.triangle(left, @w: 10px, @c: red) {
  border-width: @w;
  border-color: transparent @c transparent transparent;
  border-style: dashed solid dashed dashed;
}
.triangle(right, @w: 10px, @c: red) {
  border-width: @w;
  border-color: transparent transparent transparent @c;
  border-style: dashed dashed dashed solid;
}
.triangle(@_, @w: 10px, @c: red) {
  width: 0;
  height: 0;
  overflow: hidden;
}
.triangle_example {
  .triangle(top)
}复制代码

                                                                           main.css
.triangle_example {
  border-width: 10px;
  border-color: transparent transparent #ff0000 transparent;
  border-style: dashed dashed solid dashed;
  width: 0;
  height: 0;
  overflow: hidden;
}复制代码

运算

                                                                          main.less
// 运算
@width: 300px;
.box_3 {
  width: @width - 100;
  height: @width;
  background: pink;
}复制代码

                                                                           main.css
.box_3 {
  width: 200px;
  height: 300px;
  background: pink;
}复制代码

嵌套规则

1.  对尾类的使用  - &:hover 或 &:focus  (& 代表上一级选择器)

                                                                          main.html
<ul class="list">
    <li>王俊凯</li>
    <li>王源</li>
    <li>易洋千玺</li>
</ul>复制代码

                                                                          main.less
// 嵌套规则
.list {
  background: paleturquoise;
  li {
    line-height: 45px;
    color: #333;
    list-style: none;
    &:hover {
      color: #fff;
    }
  }
}
复制代码

                                                                           main.css
.list {
  background: paleturquoise;
}
.list li {
  line-height: 45px;
  color: #333;
  list-style: none;
}
.list li:hover {
  color: #fff;
}
复制代码

@arguments变量

@arguments包含了所有传递进来的参数

如果你不想单独处理每一个参数的话就可以这样写

                                                                          main.less
.border_arg(@w: 2px, @type: solid, @c: #ddd) {
  border: @arguments;
}
.test_arg {
  .border_arg();
}复制代码

                                                                           main.css
.test_arg {
  border: 2px solid #dddddd;
}复制代码

避免编译

有时候我们需要输出一些不正确的CSS语法或者使用一些LESS不认识的专有语法

要输出这样的值我们可以在字符串前加上一个～''

                                                                               main.less
// 其实我们的本意是 要浏览器计算calc
.box_4 {
  width: calc(100% - 30px);
  height: 300px;
  background: paleturquoise;
}
.box_5 {
  width: ~'calc(100% - 30px)';
  height: 300px;
  background: palegoldenrod;
}复制代码

                                                                           main.css
.box_4 {
  width: calc(70%);
  height: 300px;
  background: paleturquoise;
}
.box_5 {
  width: calc(100% - 30px);
  height: 300px;
  background: palegoldenrod;
}复制代码

!important关键字

                                                                          main.less
.border_radius(@radius:10px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.box_6 {
  width: 300px;
  height: 300px;
  background: pink;  
  .border_radius()!important;
}
复制代码

                                                                           main.css
.box_6 {
  width: 300px;
  height: 300px;
  background: pink;
  -webkit-border-radius: 10px !important;
  -moz-border-radius: 10px !important;
  border-radius: 10px !important;
}复制代码

注：以上css均为对应less编译后的样子，html中引入的样式文件为css文件

更多

lesscss网站： lesscss.org

lesscss中文网：lesscss.cn

转载于:https://juejin.im/post/5c1a09025188251f1f32087d