css less

Posted 2020-06-14

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

LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

官网:

http://lesscss.cn/

node.js安装less

npm install -g less

gulp less使用

var gulp=require("gulp");

var less=require("gulp-less");

 

gulp.task("testless",function(){
gulp.src(‘src/css/*.less‘)
.pipe(less())
.pipe(gulp.dest("src/css"));

});

//监视文件的变化
gulp.task("watch",function(){
gulp.watch("src/css/*.less",[‘testless‘]);

});

 

如果less有错误，会提示:

Potentially unhandled rejection [2] Unrecognised input. Possibly missing opening
‘{‘ in file F:\\nodejs\\code\\lessLearn\\src\\css\\study.less line no. 15

 

 

在命令行中使用

一旦安装完成，就可以在命令行中调用，例如：

lessc styles.less

这样的话编译后的CSS将会输出到stdout中，你可以选择将这个输出重定向到文件中：

lessc styles.less > styles.css

如果你想输出一个压缩后的CSS，只要加到-x选项即可。如果你想要更NB的压缩，你也可以选择使用YUI CSS压缩器，只要加上--yui-compress选项即可。

直接运行lessc，不带任何参数将可以看到所有的命令行参数。

 

less语法

注释

// 单行注释，不会作为最终输出
/* 
    多行注释，以原生CSS的/*注释....*/形式作为最终输出
 */

 2. 变量(Variable)

     Less中的变量有以下规则：

1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成
2. 没有先定义后使用的规定；
3. 以最后定义的值为最终值；
4. 可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；
5. 定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；
6. 存在作用域，局部作用域优先级高于全局作用域。

   Less源码：

@color: color;
  @dialog: .dialog;
  @suffix: fix;
  // 空格将被忽略，若要保留空格则需要使用单引号或双引号
  @hi: ‘hello ‘;
  @dear: there  ;
      
  .dialog{
  　　// 用于 rule属性部件，必须使用"@{变量名}" 的形式
     [email protected]{color}: #888;
     // 用于 rule属性，必须使用"@{变量名}" 的形式
     @{color}: blue;
  }
  // 用于 选择器，必须使用"@{变量名}" 的形式
  @{dialog}{
     width: 200px;
  }
  @{dialog}::after{
     content: ‘: @{hi}@{dear}!‘;    // 用于 字符串拼接，必须使用"@{变量名}" 的形式
  }
  @h: 1000px;
  // 用于 选择器部件，必须使用"@{变量名}" 的形式
  [email protected]{suffix}{
  　　@h: 30px; // 存在作用域，局部作用域优先级高于全局作用域。
     height: @h; // 用于 属性值，两种形式均可使用
     line-height: 30px;
  }
      
  // 1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成
  // 2. 没有先定义后使用的规定；
  @dialog-border-color: #666;
  @dialog-border-width: 10px;
  @dialog-border-width: 1px; // 3. 以最后定义的值为最终值；

 最终输出：

.dialog {
  background-color: #888;
  color: blue;
}
.dialog {
  width: 200px;
}
.dialog::after {
  content: ‘: hello there!‘;
}
.ie-fix {
  height: 30px;
  line-height: 30px;
}

  列表类型

    less变量除了支持#FFF，12px，12，test等单值类型外，还支持列表类型，通过内置函数extract通过索引获取列表元素，通过内置函数length获取列表的元素个数

@colors: #FFF, #0F0, #F0F;
.skin{
  color: extract(@colors, 0);
  height: 12px * length(@colors);
}

（我测试时看到extract没有识别

）  

最终输出：

.skin{
  color: #FFF;
  height: 36px;
}

  3. 嵌套(Nested)

　　Less源码：

.main{
　　padding: 10px;
   > div {
   　　width: 100px;
   }
   .aside {
   　　width: 200px;
   }
  }
    

　　最终输出：

.main {
  padding: 10px;
}
.main > div {
  width: 100px;
}
.main .aside {
  width: 200px;
}

 

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

 http://lesscss.cn/features/#mixins-feature

"mix-in" properties from existing styles

You can mix-in class selectors and id selectors, e.g.

.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}

which results in:

.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

Notice that when you call the mixin, the parentheses are optional.

// these two statements do the same thing:
.a(); 
.a;

Not Outputting the Mixin

If you want to create a mixin but you do not want that mixin to be output, you can put parentheses after it.

.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

outputs

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

Selectors in Mixins

Mixins can contain more than just properties, they can contain selectors too.

For example:

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

Outputs

button:hover {
  border: 1px solid red;
}

Namespaces

If you want to mixin properties inside a more complicated selector, you can stack up multiple id‘s or classes.

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

.c {
  #outer > .inner;
}

and again both > and whitespace are optional

// all do the same thing
#outer > .inner;
#outer > .inner();
#outer .inner;
#outer .inner();
#outer.inner;
#outer.inner();

One use of this is known as namespacing. You can put your mixins under a id selector and this makes sure it won‘t conflict with another library.

Example:

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

 

 

 

浏览器端使用

LESSCSS也可以不经编译，直接在浏览器端使用。

使用方法：

下载LESSCSS的.js文件，例如lesscss-1.4.0.min.js。
在页面中引入.less文件

<link rel="stylesheet/less" href="example.less" />
需要注意rel属性的值是stylesheet/less，而不是stylesheet。

引入第1步下载的.js文件

<script src="lesscss-1.4.0.min.js"></script>
需要特别注意的是，由于浏览器端使用时是使用ajax来拉取.less文件，因此直接在本机文件系统打开（即地址是file://开头）或者是有跨域的情况下会拉取不到.less文件，导致样式无法生效。

还有一种情况容易导致样式无法生效，就是部分服务器（以IIS居多）会对未知后缀的文件返回404，导致无法正常读取.less文件。解决方案是在服务器中为.less文件配置MIME值为text/css（具体方法请搜索）。或者还有一种更简单的方法，即是直接将.less文件改名为.css文件即可。

参考：
http://lesscss.cn/
http://www.cnblogs.com/fsjohnhuang/p/4187675.html
http://www.1024i.com/demo/less/document.html