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 编译。