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 編譯。