【css】动态的 css——less

less 是1种样式语言,它将 css 赋予了动态语言的风味,如变量、 继承、
运算、 函数。less 既能够在客户端上运营(协助ie6+,webkit,firefox),也足以信赖 Node.js 大概 Rhino 在服务端运营。

less 做为 css 的1种样式的恢宏,它并从未阉割 css 的机能,而是在存活的
css 语法上,添加了不计其数外加的功效,所以对于前端开发人士来所,学习 less
是1件易如反掌的事务。我们先看下用 less 写的一段 css:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
    box-shadow:         @style @c;
    -webkit-box-shadow: @style @c;
    -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
    .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { 
    color: saturate(@base, 5%);
    border-color: lighten(@base, 30%);
    div { .box-shadow(0 0 5px, 30%) }
}

在未曾学过 less
的情景下,我们并不知道那些代码是做吗用的,怎么生成大家所熟谙的 css
代码,以上代码通过 less 编写翻译后:

.box {
    color: #fe33ac;
    border-color: #fdcdea;
}
.box div {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

上面大家就协同来上学 less 吧。

大家领略尽管要选择 jquery 就务须在页面上引进 jquery 库,同样的在采纳less 编写 css 代码时,也要引进 less 库——less.js。点击这里下载
less 库。

下载好后壹旦在页面中引进就足以了。

<link rel="stylesheet/less" type="text/css" href="style.less" media="all" />
<script type="text/javascript" src="less.js"></script>

要留心外表引进样式的不2秘籍有所变动,rel 属性值为
stylesheet/less,样式的后缀变为 .less 同时 less 样式文件一定要在 less.js
前先引进。

引进了 less 之后,正式开端读书 less。

less 语法

1、变量

less
的变量充许你在体制中对常用的属性值举办定义,然后接纳到样式中,那样只要改变变量的值就足以变动全局的功力。和
javascript 中的全局变量有点类似。

甚至能够用变量名定义为变量。

@color: red;
@foot: 'color';

.head{
    color: @color;
}

.foot{
    color: @@foot;
}

输出:

.head {
  color: red;
}
.foot {
  color: red;
}

瞩目 less
中的变量为完全的“常量”,所以只好定义一回。

2、混合

错落正是概念三个 class,然后在别的 class 中调用那些 class。

.common{
    color: red;
}

.nav{
    background: #ccc;
    .common;
}

输出:

.common {
  color: red;
}
.nav {
  background: #ccc;
  color: red;
}

Css
中的 class, id 或许成分属性集都足以用同壹的主意引进。

3、带参数混合

在 less 中,你可以把 class 当做是函数,而函数是足以带参数的。

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

#header {
    .border-radius(4px);
}
.button {
    .border-radius(6px);  
}

聊到底输出:

#header {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.button {
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

咱俩还足以给参数设置默许值:

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

#header {
    .border-radius;  
}

最终输出:

#header {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

也足以定义不带参数属性集合,借使想要隐藏那几个特性集合,不让它揭发到CSS中去,可是还想在此外的质量集合中援引,就会意识这些情势13分的好用:

.wrap () {
    text-wrap: wrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
}

pre {
    .wrap 
}

输出:

pre {
    text-wrap: wrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
}

掺杂还有个重大的变量@arguments。

@arguments 包涵了富有传递进入的参数,当你不想处理各自的参数时,那些将很有用。

.border(@width:0,@style:solid,@color:red){
    border:@arguments;
}

.demo{
    .border(2px);
}

输出:

.demo {
    border: 2px solid #ff0000;
}

混合还有不少尖端的接纳,如形式相配等。在那边就不介绍了,只讲些基础的事物。

四、嵌套规则

less 能够让我们用嵌套的法门来写 css。上面是我们一直写的 css:

#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

用 less 大家就足以这么写:

#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover { border-width: 1px }
        }
    }
}

只顾
& 符号的选拔—要是您想写串联选拔器,而不是写后代选拔器,就能够用到
& 了。那一点对伪类尤其有用如 :hover。“

5、运算

其他数字、颜色依然变量都得以参预运算。

.demo{
    color: #888 / 4;
}

输出:

.demo {
    color: #222222;
}

less 完全能够拓展复杂四则运算,同样的复合运算也尚未难点。

6、Color 函数

less
提供了1多级的颜料运算函数。颜色会先被转载成 HSL 色彩空间,然后在通路级别操作。

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color

saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color

fadein(@color, 10%);      // return a color 10% *less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
fade(@color, 50%);        // return @color with 50% transparency

spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color

mix(@color1, @color2);    // return a mix of @color1 and @color2

选择起来卓殊简单:

@base: #f04615;

.class {
    color: saturate(@base, 5%);
    background-color: lighten(spin(@base, 8), 25%);
}

还足以领取颜色消息:

hue(@color);        // returns the `hue` channel of @color
saturation(@color); // returns the `saturation` channel of @color
lightness(@color);  // returns the 'lightness' channel of @color

例如:

@color: #f36;

#header {
    background-color: hsl(hue(@color),45%,90%);
}

输出:

#header {
    background-color: #f1dae0;
}

7、Math 函数

less 提供了壹组方便的数学函数,你可以行使它们处理局地数字类型的值。

round(1.67); // returns 2
ceil(2.4);   // returns 3
floor(2.6);  // returns 2

只要你想将贰个值转化为百分比,你能够应用 percentage 函数:

percentage(0.5); // returns 50%

八、命名空间

偶然,你恐怕为了越来越好社团 css
或然唯有是为了越来越好的卷入,将部分变量也许夹杂模块打包起来,你能够像上面那样在 #form中定义一些属性集之后能够重复使用:

#form {
    .submit () {
        display: block;
        border: 1px solid black;
        background: gray;
        &:hover { background: green }
    }
    .register { ... }
    .login { ... }
}

你只需求在 #myform 中像那样引进 .submit:

#myform {
    color: orange;
    #form > .submit;
}

9、作用域

和其他编制程序语言类似,less
变量也有功用域。首先会从地点查找变量恐怕夹杂模块,假设没找到的话会去父级效能域中寻找,直到找到截止。

@var: red;

#page {
    @var: white;
    #header {
        color: @var; // white
    }
}

#footer {
    color: @var; // red  
}

10、注释

css 情势的注明在 less 中是照旧保存的,同时 less
也支撑双斜线的笺注,但是编写翻译成 css 的时候自动过滤掉。

 

最后 less 还有一对别样的风味就不介绍了,我们能够去官网上看下。