前端让前端飞Web前端之路

less的配置安装及语法使用

2017-07-06  本文已影响746人  顽皮的雪狐七七

[目录]

Less为什么会出现？

css(层叠样式表)是一门标记性语言，html和css不是编程语言，没有变量，函数，作用域等概念。语法简单，但是看起来非常的繁琐没有逻辑，而且很多的样式都大量的冗余。
很多后台的人员写出来的css代码，没有规范就非常的凌乱。不方便维护和扩展。
Less、Sass和Stylus是css的预编译语言，是一种编程语言，是后台人员开发出来的，是在css的语法基础之上，引入了变量，Mixin，运算以及函数等功能，降低了维护成本。
以后缀名为.less的称之为less文件
less可以在多种语言、环境中使用，浏览器端、桌面客户端、服务端。

学习Less的网站

Less官网（英文）
这个英文官网是一个响应式站点
Less中文网
上面的英文网站是一个响应式站点的网站，下面是一个原封不动照搬的一个中文网站，但是我们学习的时候，还是要看下面的这个网站进行学习
LESSCSS

Less的环境安装

如何证明你的机子上有没有安装less？
要安装less首先要安装nodejs

win+R --> cmd --> node -v(如果安装了node就会显示版本号) -->npm -v(检测一下npm是否自带，如果有会显示版本号) --> lessc -v（如果安装了less也会显示版本号）

lessc.png

离线的安装方式

C： --> 用户/user --> 打开自己的用户 -->AppData（因为它是隐藏文件，所以要先显示隐藏文件）-->Roaming --> npm -->如果已经安装了less就会有两个文件（less和less.cmd）、如果没有东西就把npm.zip进行复制，如图：

file.png

在线的安装方式

打开npm --> npm install -g less --> 回车

install.png

好，这样就安装好less了

less转化成css

less是没有办法直接使用在浏览器上面的，只有css才能直接使用到浏览器的上面。所以我们要把less转化成css。

第一步 新建一个less文件

先新建一个less文件，保存到桌面

@color:red;
a{
    color:@color;
}

第二步 cmd解析编译成css

GUI编译工具

初学者建议使用GUI编译工具来编译less文件，下面是推荐的几个编译工具

node.js

安装了node之后就可以直接用node.js来编译了。
在桌面目录中打开cmd，然后执行命令dir（获取当前目录的所有文件） --> 在当前目录上面写lessc less.less less.css命令

less.png

就可以看到在桌面上同时生成了一个less.css的文件
打开之后里面的内容是：

a{
    color:red;
}

这样就可以在浏览器中使用了。
（在编译的过程中，同时会进行检查，如果有错就会报错）

使用clean-css 插件

安装了这个插件之后，输出的时候就可以转化成压缩过的css

$ lessc --clean-css styles.less styles.min.css

浏览器端不经编译直接使用

<link rel="stylesheet/less" href="example.less" />
注意这里rel里面的值是stylesheet/less，不是stylesheet

<script src="lesscss-1.4.0.min.js"></script>

特别注意：这里浏览器使用的是ajax来拉取.less文件，所以如果文件是file://开头和跨域的情况，就无法拉取less文件，还有就是部分服务器（IIS居多）会对未知的后缀名的文件返回404，解决方案就是为.less文件配置MIME值为text/css，或者直接将.less文件改名为.css文件即可

Webstorm 中的less的使用

如何让less文件直接编译成css文件

每次要修改less，都要修改编译一下less，比较麻烦。所以在webstorm中进行自动化编译。
打开webstorm --> 新建一个less文件夹 --> 新建一个文件File --> 名称是test.less --> 此时在屏幕上会出现一句话

less1.png

这句话的意思是，要不要监听less，让其自动化编译生成css文件，点击Add watcher，会弹出一个对话框：

lesswatch.png

这个对话框中的东西我们只关心画框的部分就可以了，这个地址是我们刚才进行离线安装的地址，如果是空的的话就把地址进行手动的复制。点击ok就可以自动的进行编译了。
在less中写语法之后，可以看到右边的目录中，less文件有一个箭头，点开其目录下自动生成了一个css文件。

那如果没有出现Add watcher那句话，怎么配置？
文件 --> 设置 --> 工具 --> File Watchers --> 点击最右边拦的 "+" 号 --> 有一个less --> 也会弹出刚才的对话框 --> 配置完点击确定就可以了。

如何在Webstorm中配置less文件的模板

在文件夹中新建 --> 新建 --> 编辑文件模板 --> 点击上面的 "+" 号 --> 名称 less file / 扩展（后缀名） less --> 内容写 @charset "utf-8"; --> 确定
这样就在新建的文件中配置好了less的文件。

Less语法

注释

/*这个注释可以在css中使用，也可以在less中使用*/
// 这个注释可以在less中使用，但是因为css不支持，所以这种类型的注释是没有办法编译到css文件中的

变量（variable）

变量允许我们定义一系列通用的样式，在需要的时候去调用，这样在修改的时候只需要修改全局的变量就可以了，十分的方便。

规则：

less 变量以@作为前缀，不能以数字开头， 不能包含特殊字符。

使用：

/*定义了一个变量*/
@mainColor:#ff4400;

a:hover{
    color:@mainColor;
}

p{
    border: 1px solid @mainColor;
}

/*也可以进行变量的拼接*/
@left:left;
/*拼接使用的时候要大括号包住*/
border-@{left}: 1px solid @mainColor;

Mixin混入

什么是混入，这个是在bootstrap中经常看到的一个东西。混入可以将定义好的class A轻松的引入到class B中，从而简单实现class B继承所有class A的属性。
定义的时候前面要加点。

类名混入

假如我定义了一个按钮1，按钮中有一些属性，我在别的地方又有一个按钮2，要加上这个按钮1的属性，和一些别的属性，如果按照css的方式我要重新写一遍，那我就需要进行混入了。
来上代码：

/*原来的按钮的一些属性和别的属性*/
.btn{
    width:200px;
    height: 50px;
    background: #fff;
}

.btn_border{
    border: 1px solid #ccc;
}

.btn_danger{
    background: red;
}

.btn_block{
    display: block;
    width: 100%;
}

/*对css类的样式进行混入*/
.btn_b_d_b{
    .btn();
    .btn_border();
    .btn_danger();
    .btn_block();
}

函数混入

上面的东西有一些不好的地方，就是虽然我写的时候比较简洁了，但是编译的时候还是全部都编译进去了。这个时候可以混入函数。(具体的函数知识在后面写的)

.btn(){
    width:200px;
    height:200px;
    background: #fff;
}

.btn_border(){
    border:1px solid #ccc;
}

.btn_b{
    .btn();
    .btn_border();
}

这样这里面的.btn和.btn_border都不会显示到css文件之中去，可以降低css中的代码冗余。但是如果我要对样式的具体值进行改变呢，就涉及到参数了

带参数的函数混入

注意：在定义参数要传入默认值，如果没有默认值，调用的时候必须要传入值

/*less这样会报错*/
.btn_border(@len){
    border:1px solid #ccc;
}

.btn_b{
    .btn();
    .btn_border();
}

/*两种解决方案*/
/*1.在定义的时候传入默认值*/
.btn_border(@len:10px){
    border:1px solid #ccc;
    border-radius:@len;
}

.btn_b{
    .btn();
    .btn_border();
}

/*如果是上面的写法，最终的border-radius是10px*/
.btn_b{
    .btn();
    .btn_border(20px);
}
/*如果调用的时候传入参数了，最终是20px*/
/*2.定义的时候没有默认值，在调用的时候传入值*/
.btn_border(@len){
    border:1px solid #ccc;
    border-radius:@len;
    -webkit-border-radius:@len;
    -moz-border-radius:@len;
    -ms-border-radius:@len;
    -o-border-radius:@len;
}

.btn_b{
    .btn();
    .btn_border(10px);
}

嵌套

嵌套可以增强代码的层级关系，我们也可以通过嵌套来实现继承，这样很大程度减少了代码量，代码量看起来更加清晰。

.nav{
    border-bottom: 1px solid #ccc;
    font-size: 12px;
    color:#666;
    a {
        color:#666;
    }
    > .container{
        line-height: 40px;
        text-align: center;
        > div{
        height:40px;
            ~ div{
            border-left:1px solid #ccc;
            }
        }
    }
}

这个时候要注意一个问题，就是如果在写伪元素、交集选择器的时候，就会出现问题，直接写嵌套中间会默认的加上空格。那么如何拼接上去呢？

/*下面就是如何书写伪元素和交集选择器的写法，前面要加&*/
.nav{
      font-size:12px;
      &:hover{
            text-decoration:none;
      }
      &::before{
            content:"";
      }
}

Import（引用）

用less写文件的时候，可以一个模块写一个less，但是index里面都要引用，引用那么多个less文件就不合适了，这个时候就要建立一个总的less，这是有一种解耦的开发思想，"高内聚，低耦合"。
下面来梳理一下结构：
<less里面所需要的模块>

如何引入？

@import "variable.less";      /*引入变量，后面可以加后缀*/
@import "mixin";              /*引入函数*/
@import "topBar";             /*引入功能模块1*/
@import  "navBar";            /*引入功能模块2*/

函数（内置函数和运算）

js中有两种定义函数的方式

1.function fun(){ }
2.var fun = function(){ }

less中定义函数

a{
    color:red/2;     /*结果是#800000*/
}

li{
    width:100%/7;  /*每个li标签的宽度都是ul的1/7 */
}

.a(@len:12){
    width:100%/@len;
    color:lighten(#ddd,10%);   /*亮度提高10%，结果是#f7f7f7*/
}

col-xs-1{
    .a();
}

内置函数

具体的有函数手册

函数手册

字符串函数
综合类函数
算数函数
sin(1deg);   //1角度角的正弦值   0.01745240643728351
sin(1grad);  //1百分度角的正弦值   0.015707317311820675
/*百分度是将一个圆周分为400份，每份为一个百分度，英文gradian，简写grad*/
颜色函数
/*如果想使用一种颜色来创建另一种颜色的时候就很方便*/
@new: hsl(hue(@old),45%,90%);

/*这里@new 将使用@old 的色相值，以及它自己的饱和度和亮度*/

hsv(90,100%,50%)

输出#408000

hue(hsl(90,100%,50%))

输出  90

saturation(hsl(90,100%,50%))

输出  100%

lightness(hsl(90,100%,50%))

输出  50%
颜色运算（Color operations）

颜色值运算有几点注意事项：
参数必须单位/格式相同
百分比将作为绝对值处理，10%增加10%，是20%而不是11%
参数值只能在限定的范围内
返回值的时候，除了十六进制外将其他格式做简化处理

颜色混合（Color blending）

颜色混合的方式与图像编辑器 Photoshop, Firework 或者 GIMP 的图层混合模式 (layer blending modes) 相似，因此制作 .psd 文件时处理颜色的方法可以同样用在 CSS 中。

判断函数

含*号的函数只在1.4.0 beta以上版本中可用

Bootstrap中less的定制

了解Bootstrap中less模块机制

如何定制Bootstrap

线下定制

找到bootstrap的源码 --> less文件夹 --> 修改源码 --> bootstrap.less
比如：
Bootstrap默认的栅格系统有12列，间距15px，如果需要改的时候，修改变量Grid system中的
@grid-columns 12改成18
@grid-gutter-width 15px改成12px
类似于这样修改完毕之后进行编译，shift+鼠标右键 --> 此处打开命令窗口 --> lessc bootstrap.less bootstrap.css --> 回车

线上定制

定制并下载 -->不要哪个就把勾去掉 --> 修改哪个就修改 --> 点击编译并下载

版本的更新说明

在less的1.4.0的版本已经更新了，这个版本中引入了一些新的特性。什么派生啦，新的数学函数啦，还有严格运算模式啦，有兴趣的可以深入的了解一下。

上一篇下一篇

猜你喜欢

热点阅读