LESS CSS 的简单使用

为你的网站或者 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 body
body
{
    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

<div>
    <a href="#"><span class="text">Click Me</span></a>  
    <a href="#"><span class="text">Click Me</span></a>  
    <a href="#"><span class="text">Click Me</span></a>
</div>

使用 lessc 编译。