less入门及语法了解

1.less官方网站:
英文:http://www/lesscss.org/
中文:http://www.lesscss.net/
2.less.js下载:
一.输入网址:http://www.lesscss.net
二.点击更新日志
less入门及语法了解
三.点击less.js
less入门及语法了解
四.点击右边的download zip
less入门及语法了解
五.在下载到的文件夹里找到压缩包
less入门及语法了解
六.点开找到less文件,dist/less
七.将less.min.js复制到项目文件里
八.在项目主页中引入:
less入门及语法了解
如果不引入less.min.js的话,css将无任何效果
3.less变量(跟sass用法类似)
一.普通的变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}
编译为:

#header {
  width: 10px;
  height: 20px;
}

二.作为选择器和属性名
使用时变量以@(变量名)的方式使用
less入门及语法了解
三.作为URL
less入门及语法了解
4.混合
混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
如果我们希望在其它规则集中使用这些属性,我们只需像下面这样输入所需属性的类(class)名称即可,如下所示:

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}
.bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了

5.Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力。

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
用 Less 语言我们可以这样书写代码:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

使用此方法将伪选择器(pseudo-selectors)与混合(mixins)一同使用:

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
less入门及语法了解less入门及语法了解 yanghongyan001 发布了4 篇原创文章 · 获赞 0 · 访问量 55 私信 关注
上一篇:css的三大渐变-线性渐变


下一篇:计蒜客 - 黑白石头