阳光博文 你的空间 知识的容器

LESS学习小结

Less CSS 是一个使用广泛的 CSS 预处理器,对CSS进行扩展,减少很多CSS 的代码量。
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助?Node.js).

引入你的.less样式文件的时候要设置rel属性值为“stylesheet/less”:
<linkrel="stylesheet/less"type="text/css"href="styles.less">
然后点击页面顶部download按钮下载less.js,
在<head>中引入:<scriptsrc="less.js"type="text/javascript"></script>
注意你的less样式文件一定要在引入less.js前先引入。
备注:请在服务器环境下使用!本地直接打开可能会报错!

在命令行下使用
你可以在终端调用LESS解析器:
$lesscstyles.less
上面的命令会将编译后的CSS传递给stdout,你可以将它保存到一个文件中:$lesscstyles.less>styles.css
如何你想将编译后的CSS压缩掉,那么加一个-x参数就可以了.


变量
@color: #4d926f;
#header { color: @color; }
@color: #253636;
@highlight: "color";
@color: #ff3636;     //覆盖第一次的定义
#header {color: @@highlight;}        //多次反复解析

Mixins——混入, 类似函数或宏
.borderRadius(@radius:3px){
        -moz-border-radius: @radius;
        -webkit-border-radius: @radius;
        border-radius: @radius;
}
#header { .borderRadius(10px); }
.btn { .borderRadius}      

Mixins注意事项
a.可以不使用参数      
  .wrap(){…}      .pre{ .wrap }
b.内置变量@arguments代表所有参数(运行时)的值    
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
box-shadow: @arguments;
}
注意,在参数没有默认值的前提下使用@arguments调用时必须赋值,否则会导致整个页面内的less语法出错而失效。
c. Mixins必须使用ID或者类,即#xx或.xx,否则无效。
d.如果以mixins的名称直接引用(e.g. .mixExample),必须保证存在.mixExample(){..}或者.minExample(@arg  :   defaultValue),即必须存在能够匹配的Mixins定义。


嵌套
#header {
   &.fl{ float: left; }
   .mln { margin-left: 0; }
 }

函数 & 运算
@the-border: 1px;
@red: #842210;
    
#footer {
    color: @base-color + #003300;
    border-color: desaturate(@red, 10%);
}
运算主要是针对任何数字、颜色、变量的操作,支持加、减、乘、除、()或者更复杂的综合运算;而Functions主要是针对颜色,同时提供了部分数学函数,具体的API可参阅文档。

命名空间, 类似继承
 #bundle {
    .button () {
        display: block; border: 1px solid black;
        background-color: grey;
        &:hover { background-color: white }
    }
    .tab { ... }
    .citation { ... }
  }
  命名空间使用
 #header a {
    color: orange;
    #bundle > .button;
}   即,我们先使用Mixins进行封装,然后通过命名空间引用封装内部需要的部分,这样就可以重复使用封装好的模块,同时能够十分便利地进行扩展。

作用域
    @var: red;
    #page {
        @var: white;
         #header { color: @var; // white }
    }
     #footer {
        color: @var; // red
    }
    
    Less中的变量、Mixins等的作用域都只是当前文件!
    
    
模式匹配, 类似多态
    .mixin (dark, @color) {
        color: red;
    }
    .mixin (light, @color) {
        color: green;
     }
    .mixin (@_, @color) {
        display: block;
     }
模式匹配调用
    @switch: light;
    .class {
         .mixin(@switch, #888);
    }

    .class {
        color: #a2a2a2;
        display: block;
    }
    普通变量仅匹配自身,@_可以匹配任何值。
    参数个数同样可以用于模式匹配。

    
    
    Guard expressions,类似if else
    .mixin (@a) when (lightness(@a) >= 50%) {
        background-color: black;
    }
    .mixin (@a) when (lightness(@a) < 50%) {
        background-color: white;
    }
    .mixin (@a) { color: @a; }    

    .class1 { .mixin(#ddd) }
    .class2 { .mixin(#555) }
    Guard expressions 说明
所有可以进行的比较运算包括: >     >=     =      =<     < 共5个。
比较时仅有一个真值true,其余所有为假。
同样具有其他语言中的与或非功能,其运算符号非别是:
, 代表或,即有一个为真条件就为真。
and代表与,要求所有条件为真。
not取反。
优先级同样是not > and > ,
.mixin (@a) when (@a > 10), (@a < -10) and (@a > -20){
        color: red;
    }
    
    
Importing
可以在main文件中通过下面的形势引入 .less 文件:
        @import "lib.less";
        @import "lib";
如果希望导入一个CSS文件而且不想LESS对它进行处理,只需要使用.css后缀就可以:
@import "lib.css"; 这样LESS就会跳过它不去处理它.

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
@{name}来对变量进行引用。

避免编译
.class { filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; }
.class { filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); }
~”xxxx”来避免LESS引擎处理部分独特CSS语法。

使用JavaScript
@var: `"hello".toUpperCase() + '!'`;
@var: "HELLO!";
使用反引号`将js语句包围来调用js,同时可以通过js访问页面元素。
@height: `document.body.clientHeight`;

@arguments变量
@arguments包含了所有传递进来的参数.如果你不想单独处理每一个参数的话就可以像这样写:
.box-shadow(@x:0,@y:0,@blur:1px,@color:#000){
box-shadow:@arguments;
-moz-box-shadow:@arguments;
-webkit-box-shadow:@arguments;
}
.box-shadow(2px,5px);将会输出:
box-shadow:2px5px1px#000;
-moz-box-shadow:2px5px1px#000;
-webkit-box-shadow:2px5px1px



LESS提供了一系列的颜色运算函数.颜色会先被转化成HSL色彩空间,然后在通道级别

操作:
lighten(@color,10%);//returnacolorwhichis10%*lighter*than@color
darken(@color,10%);//returnacolorwhichis10%*darker*than@color
saturate(@color,10%);//returnacolor10%*more*saturatedthan@color
desaturate(@color,10%);//returnacolor10%*less*saturatedthan@color
fadein(@color,10%);//returnacolor10%*less*transparentthan@color
fadeout(@color,10%);//returnacolor10%*more*transparentthan@color
spin(@color,10);//returnacolorwitha10degreelargerinhuethan@color
spin(@color,-10);//returnacolorwitha10degreesmallerhuethan@color
使用起来相当简单:
@base:#f04615;
.class{
color:saturate(@base,5%);
background-color:lighten(spin(@base,8),25%);}
你还可以提取颜色信息:
hue(@color);//returnsthe`hue`channelof@color
saturation(@color);//returnsthe`saturation`channelof@color
lightness(@color);//returnsthe'lightness'channelof@color
如果你想在一种颜色的通道上创建另一种颜色,这些函数就显得那么的好用,例如:
@new:hsl(hue(@old),45%,90%);
@new将会保持@old的色调,但是具有不同的饱和度和亮度

在线咨询