转载

less编写css代码

css编写样式表我想大家应该都已经熟悉了。我在这里说的是使用 sublime 的插件进行less样式的编写，使用起来比原本的直接编写css样式，更加的简单与方便，css代码也变得更加的整齐。

sublime上直接使用less编写css代码

准备

电脑上的sublime已经安装了Less2Css插件。
电脑上安装了nodejs,并全局安装lessc插件。

使用（简单）

直接新建一个aa.less的文件，在其中编写less的代码。
ctrl+s保存下，在目录中出现aa.css文件可以直接在页面中使用。

less的简单介绍

什么是 less

LESSCSS是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css的赋予了动态语言的特性，如变量，继承，运算，函数等，更加方便css的编写和维护。

变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。

@color:#4d926F; #header{    color:@color; } h2{    color:@color } //编译后-- #header{    color:#4d926F; } h2{    color:#4d926F; }

混合

可以将一个定义好的classA 轻松的引入到另外一个classB中。

    .rounded-corners (@radius: 5px) {         -webkit-border-radius: @radius;         -moz-border-radius: @radius;         -ms-border-radius: @radius;         -o-border-radius: @radius;         border-radius: @radius;     }        #header {         .rounded-corners;     }     #footer {         .rounded-corners(10px);     }     // 编译后 --      #header {         -webkit-border-radius: 5px;         -moz-border-radius: 5px;         -ms-border-radius: 5px;         -o-border-radius: 5px;         border-radius: 5px;     }     #footer {         -webkit-border-radius: 10px;         -moz-border-radius: 10px;         -ms-border-radius: 10px;         -o-border-radius: 10px;         border-radius: 10px;     }

嵌套（最常使用）

我们可以在一个选择器中嵌套一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

   #header{       h1{         font-size:26px;         font-weight:bold;       }       p{         font-size:12px;         a{           text-decoration: none;           &:hover{             border-width: 1px;           }          }       }    }    // 编译后 --    #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;    }

函数和运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值直接的复杂关系。

   @the-border: 1px;    @base-color: #111;    @red:        #842210;         #header {         color: (@base-color * 3);         border-left: @the-border;         border-right: (@the-border * 2);    }    #footer {         color: (@base-color + #003300);         border-color: desaturate(@red, 10%);    }    // 编译后--    #header {         color: #333;         border-left: 1px;         border-right: 2px;    }    #footer {         color: #114411;         border-color: #7d2717;    }

正文到此结束