css less

2016-02-17 12:38 youxin 阅读(2208) 评论(0) 编辑收藏举报

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中的变量有以下规则：

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

Less源码：

@color: color;
  @dialog: .dialog;
  @suffix: fix;
  // 空格将被忽略，若要保留空格则需要使用单引号或双引号
  @hi: 'hello ';
  @dear: there  ;
      
  .dialog{
  　　// 用于 rule属性部件，必须使用"@{变量名}" 的形式
     background-@{color}: #888;
     // 用于 rule属性，必须使用"@{变量名}" 的形式
     @{color}: blue;
  }
  // 用于 选择器，必须使用"@{变量名}" 的形式
  @{dialog}{
     width: 200px;
  }
  @{dialog}::after{
     content: ': @{hi}@{dear}!';    // 用于 字符串拼接，必须使用"@{变量名}" 的形式
  }
  @h: 1000px;
  // 用于 选择器部件，必须使用"@{变量名}" 的形式
  .ie-@{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;
}

注意 & 符号的使用 — 如果你想写串联选择器，而不是写后代选择器，就可以用到 & 了。这点对伪类尤其有用如 :hover 和 :focus。

例如：

.bordered {
    &.float {
        float: left;
    }
    .top {
        margin: 5px;
    }
}

会输出：

.bordered.float {
    float: left;
}
.bordered .top {
    margin: 5px;
}

例子:
color: red;
text-decoration: none;
&:hover {
/*有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素，&表示当前选择器的父选择器*/
color: black;
text-decoration: underline;
}
}

`&` 的高级用法

用在选择器中的&还可以反转嵌套的顺序并且可以应用到多个类名上。

例如：

.child, .sibling {
    .parent & {
        color: black;
    }
    & + & {
        color: red;
    }
}

输出：

.parent .child,
.parent .sibling {
    color: black;
}
.child + .child,
.child + .sibling,
.sibling + .child,
.sibling + .sibling {
    color: red;
}

&也可以用在混合中用于指示嵌套这个混合的父选择器。

混合可以将一个定义好的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文件

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

还有一种情况容易导致样式无法生效，就是部分服务器（以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

会员力量，点亮园子希望

刷新页面返回顶部

有心故我在

css less

在命令行中使用

`&` 的高级用法

Not Outputting the Mixin

Selectors in Mixins

Namespaces

About

有心故我在

css less

在命令行中使用

& 的高级用法

Not Outputting the Mixin

Selectors in Mixins

Namespaces

About

`&` 的高级用法