为你的网站或者 App 建立一个 LESS CSS 的 按钮

在我们的网站建设中 css 都是必不可少的东西。他可以让我们网站布局更加的美观。但在开发的过程中，有诸多的不方便。因此，产省了 LESS LESS 相当与 动态的样式语言，可以动态的定义我们的样式。可以根据你的定义而产生不同的效果。 LESS 提供了诸如：变量， 混合，函数，嵌套运算符等功能。

三种使用 LESS 的方法

1.客户端

LESS 允许在浏览器中通过 LESS.js 实时进行编译。先好 LESS 代码,然后放在中 ，把 LESS.js也包含在中，记住，js要在样式css的之前。

2.服务端

如果你使用了 Node.js 或者 Rhino ，也可以在服务端使用 Less;

3.直接编译使用 Less

如果你不想在服务端或者客户端编译,你可以直接编译你的 Less 代码变成 CSS 代码，安装 LESS 使用npm编译，使用 lessc来编译 less文件;

lessc styles.less styles.css

下面我们就来创建一个实例吧。

style.less//Variables@base-color: #E5F5FB;@font-size: 16px;@size: 4px;//Define the colors@light-blue: #5AC1E4;@dark-blue: #0DA4D8;@dark-pink: #BB4E75;@darker-pink: #992E58;@light-green: #99AF5E;@dark-green: #75A61F;//Page bodybody{    background-color: @base-color;    font-family: 'Josefin Sans', sans-serif;}//Base style for button and text classes.base_button{    border-radius: @size;    display: inline-block;    font-size: @font-size;    color: #fff;}//Class button.button(@base, @hover){    //Inherit the base_button class    .base_button;    background-color: @base;    padding-bottom: @size;    //child element with class text inside class button    .text    {        .base_button;        background-color: @hover;        padding: @size+4;        //On Mouse hover        &:hover        {            position: relative;            top: -1px;        }    }}//Element with ID = blue-button#blue-button{    .button(@dark-blue, @light-blue);}//Element with ID = pink-button#pink-button{    .button(@darker-pink, @dark-pink);}//Element with ID = green-button#green-button{    .button(@dark-green, @light-green);}

index.html

    
    
     Click Me      
     Click Me      
     Click Me
    

使用 lessc 编译。