less
关注
分享
扫一扫
cvper
向前走，打破前方的迷雾.....
展开
-
less （一） less 的环境
less , css的预处理语言，扩展了css ,但是不能直接使用，需要编译成css文件；下面看看如何配置 less 的使用环境；前提：安装node 环境 ，了解 npm ,第一步：全局安装 less 上面我们就安装了less;第二步：我这里在 f 盘下创建了一个 less 文件夹，文件夹里面有两个文件 index.html sty.lessindex.html<!doctype ht...原创 2018-04-20 16:53:22 · 775 阅读 · 0 评论 -
less 把属性名作为变量的方式
有没有觉得 background-color这个名字太长了，想换一个短一点的？使用 less 就可以实现了：@bgc:background-color;div{ width:200px; height:200px; @{bgc}:red;}注意 的是在使用变量的时候需要 { } 包裹我们的变量名 ！...原创 2018-04-22 22:56:06 · 3612 阅读 · 0 评论 -
less 与 @media screen and ( .... )
在less 中使用媒体查询；我们使用less 和媒体查询实现下面的功能：当页面的宽度 > 500px 时，div 的背景颜色是绿色；当页面宽度<=500px 时，div的背景颜色显示红色；.abc(@bcg){ width:200px; height:200px; background-color:@bcg;}div{ .abc(green) }@media...原创 2018-04-22 21:23:39 · 8470 阅读 · 1 评论 -
less （七） when 的使用
下面看看 less when 的使用；我们写一个样式：当输入的宽度大于等于150px 的时候，给div添加一种样式； 当输入的宽度小于150px的时候，给div添加另外一种样式；使用when就可以实现上面的功能：.bgWidth(@width) when(@width<150){ width:100px; height...原创 2018-04-22 18:35:02 · 6472 阅读 · 0 评论 -
less（六） 混合的使用
直接看下面的代码：混合就相当于一个函数，我们可以使用不同的参数来反复使用这个函数； 上面的代码首先定义了一个函数，有两个参数，那么函数内部，我们的border参数的设置就使用了这些参数；定义完之后，我们在div内部的p标签上使用了这个函数；和使用 js 函数是差不多的；上面只是定义了参数，参数还可以指定默认值的，我们改变一下： @width:100;@height:100;@...原创 2018-04-21 12:42:38 · 818 阅读 · 0 评论 -
less （五） 父级选择 &
这个是什么意思呢，我们来看例子：<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="sty原创 2018-04-21 11:56:23 · 7621 阅读 · 0 评论 -
less （三） 一个less 文件引用另一个less文件
现在假设我们写了两个less文件，一个文件是a.less 另一个文件是 b.less;那么a.less文件中如何引用b.less中的文件呢？例子： 先新建如下的目录结构文件信息：index.html<!doctype html><html> <head> <meta charset="utf-8"> <tit...原创 2018-04-20 19:45:55 · 23525 阅读 · 2 评论 -
less（二） less的变量和注释
上篇中，我们简单了解了less的使用环境和怎么使用less;下面我们了解一下less 的变量和注释less 的注释/*这是第一种注释*///这是第二种注释 上面的第一种注释麻烦一点，但是当我们的less文件编译成css文件后，css文件中注释依然存在； 相反的第二种注释简单一点，但是编译成css 文件后，css 文件中是没有注释的；less 的变量在前一篇中，我们已经...原创 2018-04-20 17:49:47 · 1184 阅读 · 0 评论