首页 > 代码库 > Less入门

Less入门

2024-08-17 23:25:03   220人阅读

LESS 原理及使用方式

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。下面是一个简单的例子：

变量

使用@符号定义。例如：

/*变量声明*/@base: #f938ab;@images: "../img";@property: color;.box {    /*变量引用*/    color: @base;}body {    color: #444;    /*变量引用*/    background: url("@{images}/white-sand.png");}.widget {  @{property}: #0ee;  background-@{property}: #999;}

 

/*变量声明*/.box {  /*变量引用*/  color: #f938ab;}body {  color: #444;  /*变量引用*/  background: url("../img/white-sand.png");}.widget {  color: #0ee;  background-color: #999;}

 

混合（Mixin）

混合就是前面定义的一个样式，后文可以直接引用。示例：

/*带参数*/.roundedCorners(@radius: 5px) {    -moz-border-radius: @radius;    -webkit-border-radius: @radius;    border-radius: @radius;}/*@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。*/ .boxMargin(@up:0,@right:0,@down:0,@left:0){    margin: @arguments;}// 在另外的样式选择器中使用#header {    .roundedCorners;    .boxMargin(1px,2px,3px,4px)}#content {    .roundedCorners();    .boxMargin;}#footer {    .roundedCorners(10px);}

 

/*带参数*//*@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。*/#header {  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;  margin: 1px 2px 3px 4px;}#content {  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;  margin: 0 0 0 0;}#footer {  -moz-border-radius: 10px;  -webkit-border-radius: 10px;  border-radius: 10px;}

 

嵌套

可以在一个css里有多个css块，以方便我们更好的组织代码，编写css模板。

#header {    color: black;    .navigation {        font-size: 12px;    }    .logo {        width: 300px;    }}/*有&时,解析的是同一个元素或此元素的伪类没有&时, 解析是后代元素*/#header {    color: black;    &-navigation {        font-size: 12px;    }    &-logo {        width: 300px;    }    &:hover {        color: #ccc;    }}div {    color: black;    &-navigation {        font-size: 12px;    }    &-logo {        width: 300px;    }    &:hover {        color: #ccc;    }}

 

#header {  color: black;}#header .navigation {  font-size: 12px;}#header .logo {  width: 300px;}/*有&时,解析的是同一个元素或此元素的伪类没有&时, 解析是后代元素*/#header {  color: black;}#header-navigation {  font-size: 12px;}#header-logo {  width: 300px;}#header:hover {  color: #ccc;}div {  color: black;}div-navigation {  font-size: 12px;}div-logo {  width: 300px;}div:hover {  color: #ccc;}

运算

任何数字、颜色或者变量都可以参与运算。下面是一组案例：

 @init: #111111; @width:19px; @height:100%; @transition: @init*2; .switchColor {     color: @transition;     width: @width/2;     height: @height; }
.switchColor {  color: #222222;  width: 9.5px;  height: 100%;}

 

命名空间

有时候，你可能为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，一些属性集之后可以重复使用。
示例：

/*模块*/#bundle {  .button {    display: block;    border: 1px solid black;    background-color: grey;    &:hover {      background-color: white    }  }  .tab { /**/ }  .citation { /**/ }}/*下面复用上面的一部分代码*/#header a {  color: orange;  #bundle > .button;}
/*模块*/#bundle .button {  display: block;  border: 1px solid black;  background-color: grey;}#bundle .button:hover {  background-color: #ffffff;}#bundle .tab {  /**/}#bundle .citation {  /**/}/*下面复用上面的一部分代码*/#header a {  color: orange;  display: block;  border: 1px solid black;  background-color: grey;}#header a:hover {  background-color: #ffffff;}

 

作用域

子类里面的优先，找不到才往父类里找。

示例：

@var: red;#hearder{     color: @var;}#page {    color: @var;    @var: white;    #header {        color: @var;    }}
#hearder {  color: #ff0000;}#page {  color: #ffffff;}#page #header {  color: #ffffff;}

注释

css仅支持块注释 //。less里块注释和行注释都可以使用：//  /**/

导入

和css一样，你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less扩展名，则可以将扩展名省略掉：

@import "ip"; // ip.less 输出效果 = ip.less + test.less@import "typo.css"; //支持导入css

 

Less入门


联系
我们