less的布局安装及语法使用

[目录]

  • Less为何会油但是生?
  • 学习Less的网站
  • Less的设置环境
    • 离线的装置方式
    • 在线的安装格局
  • less转化成css

  • 先是步 新建3个less文件
  • 其次步 cmd解析编写翻译成css
    • GUI编写翻译工具
    • node.js
    • 使用clean-css 插件
    • 浏览器端不经编写翻译直接动用

  • Webstorm中less的使用

  • 哪些让less文件平素编写翻译成css文件
  • 怎么在Webstorm中安顿less文件的模板

  • Less语法

  • 注释
  • 变量(规则、使用)
  • Minxin混入
    • 类名混入
    • 函数混入
    • 带参数的函数混入
  • 嵌套
  • Import(引用)
  • 函数(内置函数和平运动算)
    • less中定义函数
    • 内置函数
      • 字符串函数
      • 综合类函数
      • 算数函数
      • 颜色函数
      • 判定函数

  • Bootstrap中less的定制

  • 叩问Bootstrap中less模块机制
  • 何以定制Bootstrap
    • 线下定制
    • 线上定制
  • 本子的翻新表明

Less为啥会出现?

css(层叠样式表)是一门标记性语言,html和css不是编制程序语言,未有变量,函数,作用域等概念。语法简单,可是看起来尤其的繁琐未有逻辑,而且许多的体裁都大方的冗余。
众多后台的职员写出来的css代码,未有正儿8经就那叁个的眼花缭乱。不便于维护和扩充。
Less、Sass和Stylus是css的预编写翻译语言,是一种编制程序语言,是后台人士开发出来的,是在css的语法基础之上,引入了变量,Mixin,运算以及函数等效能,下落了拥戴开销。
从此缀名叫.less的称之为less文件
less能够在各类语言、环境中央银行使,浏览器端、桌面客户端、服务端。

学习Less的网站

Less官网(英文)
本条英文官网是八个响应式站点
Less中文网
地方的英文网址是3个响应式站点的网站,下边是一个原封不动照搬的2个中文网址,但是大家上学的时候,依然要看上面包车型大巴这些网址进行学习
LESSCSS

Less的环境设置

怎么样评释你的电话机上有未有安装less?
要设置less首先要设置nodejs

win+宝马X5 –> cmd –> node -v(即便设置了node就会显得版本号) –>npm
-v(检查测试一下npm是或不是自带,要是有会议及展览示版本号) –> lessc
-v(假设设置了less也会突显版本号)

CoffeeScript 1

lessc.png

离线的设置格局

C: –> 用户/user –> 打开自个儿的用户
–>AppData(因为它是隐形文件,所以要先出示隐藏文件)–>Roaming
–> npm
–>假如已经安装了less就会有三个公文(less和less.cmd)、借使未有东西就把npm.zip进行理并答复制,如图:

CoffeeScript 2

file.png

在线的安装格局

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

CoffeeScript 3

install.png

好,那样就设置好less了

less转化成css

less是未有办法直接采纳在浏览器上边的,唯有css才能一直运用到浏览器的方面。所以大家要把less转化成css。

首先步 新建2个less文件

先新建二个less文件,保存到桌面

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

其次步 cmd解析编写翻译成css

GUI编写翻译工具

初学者提出利用GUI编写翻译工具来编写翻译less文件,上面是推荐的多少个编写翻译工具

node.js

设置了node之后就足以直接用node.js来编写翻译了。
在桌面目录中开拓cmd,然后执行命令dir(获取当前目录的全部文件) –>
在当前目录上面写lessc less.less less.css命令

CoffeeScript 4

less.png

就足以看来在桌面上同时生成了三个less.css的文本
开拓以后里面的始末是:

a{
    color:red;
}

诸如此类就能够在浏览器中动用了。
(在编写翻译的进程中,同时会进展检查,假诺有错就会报错)

使用clean-css 插件

安装了这些插件之后,输出的时候就足以转化成压缩过的css

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

浏览器端不经编写翻译直接利用

  • 下载LESSCSS的.js文件,例如lesscss-1.4.0.min.js
  • 在页面中引入.less文件

<link rel="stylesheet/less" href="example.less" />
注意这里rel里面的值是stylesheet/less,不是stylesheet
  • 引入js文件

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

尤其注意:那里浏览器选用的是ajax来拉取.less文件,所以一旦文件是file://起首和跨域的情形,就不或许拉取less文件,还有正是一对服务器(IIS居多)会对未知的后缀名的文书再次回到40肆,化解方案正是为.less文件配置MIME值为text/css,只怕直接将.less文件改名叫.css文件即可

Webstorm 中的less的使用

哪些让less文件直接编写翻译成css文件

历次要修改less,都要修改编写翻译一下less,相比较费心。所以在webstorm中展开自动化编写翻译。
打开webstorm –> 新建3个less文件夹 –> 新建七个文书File –>
名称是test.less –> 此时在显示屏上会出现一句话

CoffeeScript 5

less1.png

那句话的意思是,要不要监听less,让其自动化编写翻译生成css文件,点击Add
watcher,会弹出三个对话框:

CoffeeScript 6

lesswatch.png

那个对话框中的东西大家只关怀画框的有个别就能够了,那一个地方是大家刚刚实行离线安装的地址,即使是空的的话就把地点进行手动的复制。点击ok就能够自动的拓展编译了。
在less中写语法之后,能够看来右侧的目录中,less文件有3个箭头,点开其目录下自动生成了三个css文件。

那若是未有现身Add watcher那句话,怎么布局?
文件 –> 设置 –> 工具 –> File 沃特chers –> 点击最左边拦的
“+” 号 –> 有3个less –> 也会弹出方才的对话框 –>
配置完点击鲜明就能够了。

怎么着在Webstorm中配备less文件的模版

在文书夹中新建 –> 新建 –> 编辑文件模板 –> 点击上边的 “+” 号
–> 名称 less file / 增添(后缀名) less –> 内容写 @charset
“utf-8”; –> 鲜明
如此那般就在新建的公文中布局好了less的文件。

Less语法

注释

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

变量(variable)

变量允许大家定义一文山会海通用的体制,在必要的时候去调用,那样在改动的时候只须要修改全局的变量就可以了,11分的便利。

规则:

less 变量以@作为前缀,不能够以数字开首, 无法包括特殊字符。

使用:

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

a:hover{
    color:@mainColor;
}

p{
    border: 1px solid @mainColor;
}

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

Mixin混入

怎样是混入,这一个是在bootstrap中不时看到的3个东西。混入能够将概念好的class
A轻松的引入到class B中,从而不难完结class B继承全数class A的天性。
概念的时候前面要加点。

类名混入

即便小编定义了一个按钮1,按钮中有局部属性,笔者在别的地点又有2个按钮贰,要加上这么些按钮一的性格,和局地别的属性,假使依照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,那是有1种解耦的花费思量,”高内聚,低耦合”。
上面来梳理一下构造:
<less里面所急需的模块>

  • 变量
  • 函数
  • CoffeeScript,效用模块(视本身的景观而定)
  • 总(引用变量、函数、作用模块)

哪些引入?

@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();
}

置于函数

具体的有函数手册

函数手册

字符串函数
  • escape(@string); // 通过 UCRUISERL-encoding 编码字符串
  • e(@string); // 对字符串转义
  • %(@string, values…); // 格式化字符串
综合类函数
  • unit(@dimension, [@unit: “”]); // 移除或沟通属性值的单位
  • color(@string); // 将字符串解析为颜色值
  • data-uri([mimetype,] url); // *
    将财富内嵌到css中,或者回退到url()
算数函数
  • ceil(@number); // 向上取整
  • floor(@number); // 向下取整
  • percentage(@number); // 将数字转换为百分比,例如 0.伍 -> 2/肆
  • round(number, [places: 0]); // 四舍5入取整(第3个人是精度)
  • sqrt(number); // * 计算数字的平方根(参数能够带单位)
  • abs(number); // * 数字的相对值(参数能够带单位)
  • sin(number); // * sin函数(未有单位默许弧度值)

sin(1deg);   //1角度角的正弦值   0.01745240643728351
sin(1grad);  //1百分度角的正弦值   0.015707317311820675
/*百分度是将一个圆周分为400份,每份为一个百分度,英文gradian,简写grad*/
  • asin(number); // * arcsin函数
    • 参数-一到1里面的浮点数,再次回到值弧度为单位,区间在-PI/二 到 PI/2之间,超出范围输出NaNrad
  • cos(number); // * cos函数
    • 与sin函数1样
  • acos(number); // * arccos函数
    • 参数-壹到壹之间的浮点数,再次回到值弧度为单位,区间在 0 在 PI
      之间,超出范围输出NaNrad
  • tan(number); // * tan函数
    • 与sin函数一样
  • atan(number); // * arctan函数
    • 再次来到值区间在 -PI/二 到 PI/二 之间,别的和asin一样
  • pi(); // * 返回PI
  • pow(@base, @exponent); // * 返回@base的@exponent次方
    • 重回值和@base有同一的单位,第1个单位忽略,不符合规则重返NaN
  • mod(number, number); // * 第二个参数对第3个参数取余
    • 重回值与第三个参数单位相同,能够拍卖负数和浮点数
  • convert(number, units); // * 在数字之间转移
  • unit(number, units); // * 不转换的事态下替换数字的单位
颜色函数
  • color(string); // 将字符串大概转义后的值转换到颜色
    • 见综合函数
  • rgb(@r, @g, @b); // 转换为颜色值
    • 参数是整数0-25五,百分比0-百分百,转化为十陆进制
  • rgba(@r, @g, @b, @a); // 转换为颜色值
    • 参数前多个是整数0-255,百分比0-百分之百,第多少个是0-1依旧百分比0-百分之百,
  • argb(@color); // 创建 #AABMWX三途睿欧GGBB 格式的颜色值
    • 使用在IE滤镜中,以及.NET和Android开发中
  • hsl(@hue, @saturation, @lightness); // 创造颜色值
    • 透过色相、饱和度、亮度二种值
    • @hue : 整数0-360 表示度数
    • @saturation : 百分比0-百分百 或然数字 0 – 1
    • @lightness: 百分比0-百分百 或许数字0 – 一
    • 再次来到值十六进制的颜色值

/*如果想使用一种颜色来创建另一种颜色的时候就很方便*/
@new: hsl(hue(@old),45%,90%);

/*这里@new 将使用@old 的色相值,以及它自己的饱和度和亮度*/
  • hsla(@hue, @saturation, @lightness, @阿尔法); // 创立颜色值
  • hsv(@hue, @saturation, @value); // 创设颜色值
    • @hue 表示色相 , 整数0-360象征度数
    • @saturation 表示饱和度,百分比0-百分之百 或数字0-一
    • @value 代表色调,百分比0-百分之百 或数字0-一
    • 创制不透明的颜料对象

hsv(90,100%,50%)

输出#408000
  • hsva(@hue, @saturation, @value, @阿尔法); // 成立颜色值
  • hue(@color); // 从颜色值中领取 hue 值(色相)
    • 返回值0-360的整数

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

输出  90
  • saturation(@color); // 从颜色值中领取 saturation 值(饱和度)
    • 返回值 百分比0-100

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

输出  100%
  • lightness(@color); // 从颜色值中领取 ‘lightness’ 值(亮度)
    • 回去0-100的百分比率

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

输出  50%
  • hsvhue(@color); // * 从颜色中提取 hue 值,以HSV色彩空间表示(色相)
    • 返回0-360 的整数
  • hsvsaturation(@color); // * 从颜色中提取 saturation
    值,以HSV色彩空间表示(饱和度)

    • 返回0-100百分比
  • hsvvalue(@color); // * 从颜色中领到 value
    值,以HSV色彩空间表示(色调)

    • 返回0-100百分比
  • red(@color); // 从颜色值中领到 ‘red’ 值(均红)
    • 回来整数0-25伍
  • green(@color); // 从颜色值中领取 ‘green’ 值(浅橙)
    • 归来整数0-255
  • blue(@color); // 从颜色值中领到 ‘blue’ 值(古铜黑)
    • 归来整数0-25五
  • 阿尔法(@color); // 从颜色值中领取 ‘阿尔法’ 值(发光度)
    • 再次回到浮点数0-壹
  • luma(@color); // 从颜色值中领到 ‘luma’ 值(亮度的比重表示法)
    • 再次来到百分比0-百分之百
水彩运算(Color operations)

水彩值运算有几点注意事项:
参数必须单位/格式相同
比例将作为相对值处理,一成充实十分一,是伍分之一而不是1壹%
参数值只还好限定的限定内
重回值的时候,除了十陆进制外将别的格式做简化处理

  • saturate(@color, 一成); // 饱和度扩张 一成
  • desaturate(@color, 10%); // 饱和度下跌 1/10
  • lighten(@color, 1/10); // 亮度扩大 1/10
  • darken(@color, 1/10); // 亮度下降 百分之10
  • fadein(@color, 10%); // 不光滑度扩大 1/10,更不透明
  • fadeout(@color, 百分之10); // 不反射率降低 百分之10,更透明
  • fade(@color, 四分之二); // 设定折射率为 一半
  • spin(@color, 十); // 色相值扩大 十
    • 向自由方向旋转颜色的色相角度,旋转范围是0-360,超越将从源点继续旋转,比如旋转360和720是同样的结果。
    • 亟需留意的是,颜色要经过 QashqaiGB
      进行格式转换,那一个进度不可能保存深蓝的色相值(原野绿未有饱和度,色相值也就不曾意思了),因而要通过函数保留颜色的色相值
    • 因为颜色值永远输出为君越GB格式,因而spin()函数对暗绿无效
  • mix(@color1, @color2, [@weight: 50%]); // 混合三种颜色
    • 其八个参数是平衡三种颜色的百分比,默许是二分一
  • greyscale(@color); // 完全移除饱和度,输出海螺红
    • 与desaturate(@color, 百分之百)效果一样
  • contrast(@color1, [@darkcolor: black], [@lightcolor: white],
    [@threshold: 43%]); // 要是 @color一 的 luma 值 > 四3% 输出
    @darkcolor,不然输出 @lightcolor

    • 相比颜色的,相比复杂,等选用的时候再说吧
颜色混合(Color blending)

颜色混合的秘籍与图像编辑器 Photoshop, Firework 或然 GIMP 的图层混合方式(layer blending modes) 相似,因而创设 .psd
文件时处理颜色的艺术能够同样用在 CSS 中。

  • multiply(@color1, @color2);
    • 分别将三种颜色的库罗德GB二种值做乘法运算,然后再除以255,输出的结果是更深的颜料
    • 对应ps中的“变暗/正片叠底”
  • screen(@color1, @color2);
    • 结果是更亮的水彩,对应ps中的“变亮/滤色”
  • overlay(@color1, @color2);
    • 重组前边七个函数的效能,让浅的更浅,深的更深,类似于ps中的“叠加”
    • 第多少个参数的附加的对象,第一个参数是被增大的颜色
  • softlight(@color1, @color2);
    • 与overlay效果1般,只是当纯浅桔黄和纯洋红作为参数的时候输出结果不是纯黑月光蓝,对应ps中的“柔光”
    • 先是个参数是混合色(光源),第3个参数是被混合的颜色
  • hardlight(@color1, @color2);
    • 与overlay效果一般,可是由首个颜色参数决定输出颜色的亮度或黑度,对应ps中的“强光/亮光/线性光/点光”
    • 先是个参数是混合色(光源),第三个参数是被混合的颜料
  • difference(@color1, @color2);
    • 从第3个颜色值中减去第3个,输出是更深的颜色,对应ps中的“差值/排除”
    • 先是个参数是被减的颜色对象,第一个参数是缩减的水彩对象
  • exclusion(@color1, @color2);
    • 意义和difference函数效果1般,只是输出结果差距更小,ps中的“差值/排除”
    • 先是个参数是被减的颜料对象,第二个参数是减掉的颜色对象
  • average(@color壹, @color二);//对GL450GB三种颜色取平均值
  • negation(@color1, @color2);
    • 和difference函数效果相反,输出结果是更亮的颜色
    • 留神:效果相反不意味做加法运算
    • 先是个参数是被减的颜料对象,第二个参数是缩减的颜色对象
认清函数
  • iscolor(@colorOrAnything); // 判断多少个值是或不是是颜色
  • isnumber(@numberOrAnything); // 判断贰个值是还是不是是数字(可含单位)
  • isstring(@stringOrAnything); // 判断一个值是还是不是是字符串
  • iskeyword(@keywordOrAnything); // 判断二个值是还是不是是关键字
  • isurl(@urlOrAnything); // 判断一个值是或不是是url
  • ispixel(@pixelOrAnything); // 判断二个值是不是是以px为单位的数值
  • ispercentage(@percentageOrAnything); // 判断一个值是不是是百分数
  • isem(@emOrAnything); // 判断1个值是或不是是以em为单位的数值
  • isunit(@numberOrAnything, “rem”); // *
    判断3个值是不是是钦赐单位的数值

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

Bootstrap中less的定制

叩问Bootstrap中less模块机制

  • 在Bootstrap的less文件夹中有三个总文件是bootstrap.less
    • 内部有导入的变量、函数、基础样式(伊始化文件、图标)、主旨样式、组件、javascript组件等
  • 在函数mixins.less中援引了不少的模块的函数
    • 里面有弹出框、有按钮、有面板等重重的模块

怎样定制Bootstrap

线下定制

找到bootstrap的源码 –> less文件夹 –> 修改源码 –>
bootstrap.less
比如:
Bootstrap私下认可的栅格系统有1二列,间距一五px,假设须求改的时候,修改变量Grid
system中的
@grid-columns 12改成18
@grid-gutter-width 15px改成12px
好像于那样修改实现之后进展编译,shift+鼠标右键 –> 此处打开命令窗口
–> lessc bootstrap.less bootstrap.css –> 回车

线上定制

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

本子的换代表达

在less的壹.4.0的本子现已更新了,那些版本中引入了一些新的表征。什么派生啦,新的数学函数啦,还有严苛运算情势啦,有趣味的能够深深的询问一下。