1、less
1.1 简要介绍
CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中。HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义。
作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。
1.2 原理及使用
本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。
1.3 Less安装环境
- 安装nodejs
在部分win8系统当中无法安装(解决办法的是 以管理员权限运行cmd然后再按写命令切换到安装包目录,直接命令执行)
安装完成nodejs之后
1、检测是否安装完成 node –v 查看版本
2、然后检测 npm是否自带 npm –v 查看版本
- 在线安装less
在cmd中运行 npm install –g less (部分电脑要 sudo 管理权限)
Lessc –v 查看版本 是否安装成功
1.4 语法
- 变量
- Mixin混入
- 嵌套
- Import
- 函数(内置函数 运算)
1.5 变量
LESS 允许开发者自定义变量,变量可以在全局样式中使用,变量使得样式修改起来更加简单。
@charset "UTF-8";
/*注释:在css当中可以使用,所有编译的过程当中生成在css文件*/
//注释:css不支持,不会编译在css文件
/*变量*/
//必须@前缀,:是等于的以上,必须分号结束;
//不能以数组开头,不能包含特殊字符,区分大小写
@mainColor:#e92323;
@className:box;
div{
background: @mainColor;
}
a:hover{
color: @mainColor;
}
//变量用于字符拼接使用方法
.@{className}{
color: @mainColor;
}
1.6 Mixin混入
- 类混入
/*组合样式的例子*/
.w50{
width: 50%;
}
.f_left{
float: left;
}
.f_right{
float: right;
}
/*类混入*/
.w50-f_left{
.w50();
.f_left();
}
- 函数混入
/*函数混入*/
/*定义函数*/
.w50(){
width: 50%;
}
/*
1.定义了参数(没有默认值),调用的时候必须传参
2.怎么定义默认值 和定义变量值是一样的
3.定义了参数(有默认值),可传可不传
*/
.f(@direction:left){
float: @direction;
}
.borderRadius(@width:100px){
border-radius: @width;
-webkit-border-radius:@width;
-moz-border-radius:@width;
-o-border-radius:@width;
-ms-border-radius:@width;
}
.w50-f_left{
.w50();
.f(right);
.borderRadius(20px);
}
1.7 嵌套
在我们书写标准 CSS 的时候,遇到多层的元素嵌套这种情况时,我们要么采用从外到内的选择器嵌套定义,要么采用给特定元素加 CLASS 或 ID 的方式
注意:需要连接的情况要用&,如a:hover
@charset "UTF-8";
.wjs_app{
display: block;
img{
display: none;
}
/*需要连接的情况:&*/
&:hover{
img{
display: block;
position: absolute;
left: 50%;
margin-left:-60px;
border: 1px solid #ccc;
border-top: none;
top:40px;
z-index: 100000;
}
}
> div{
display: block;
}
}
1.8 Import
@charset "UTF-8";
@import "variables";
@import "mixins";
@import "topBar";
@import "banner";
1.9 运算及函数
在我们的 CSS 中充斥着大量的数值型的 value,比如 color、padding、margin 等,这些数值之间在某些情况下是有着一定关系的,那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢?
escape(@string); // 通过 URL-encoding 编码字符串
e(@string); // 对字符串转义
%(@string, values...); // 格式化字符串
unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位
color(@string); // 将字符串解析为颜色值
data-uri([mimetype,] url); // * 将资源内嵌到css中,可能回退到url()
ceil(@number); // 向上取整
floor(@number); // 向下取整
percentage(@number); // 将数字转换为百分比,例如 0.5 -> 50%
round(number, [places: 0]); // 四舍五入取整
sqrt(number); // * 计算数字的平方根
abs(number); // * 数字的绝对值
sin(number); // * sin函数
asin(number); // * arcsin函数
cos(number); // * cos函数
acos(number); // * arccos函数
tan(number); // * tan函数
atan(number); // * arctan函数
pi(); // * 返回PI
pow(@base, @exponent); // * 返回@base的@exponent次方
mod(number, number); // * 第一个参数对第二个参数取余
convert(number, units); // * 在数字之间转换
unit(number, units); // * 不转换的情况下替换数字的单位
color(string); // 将字符串或者转义后的值转换成颜色
rgb(@r, @g, @b); // 转换为颜色值
rgba(@r, @g, @b, @a); // 转换为颜色值
argb(@color); // 创建 #AARRGGBB 格式的颜色值
hsl(@hue, @saturation, @lightness); // 创建颜色值
hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
hsv(@hue, @saturation, @value); // 创建颜色值
hsva(@hue, @saturation, @value, @alpha); // 创建颜色值
hue(@color); // 从颜色值中提取 hue 值(色相)
saturation(@color); // 从颜色值中提取 saturation 值(饱和度)
lightness(@color); // 从颜色值中提取 'lightness' 值(亮度)
hsvhue(@color); // * 从颜色中提取 hue 值,以HSV色彩空间表示(色相)
hsvsaturation(@color); // * 从颜色中提取 saturation 值,以HSV色彩空间表示(饱和度)
hsvvalue(@color); // * 从颜色中提取 value 值,以HSV色彩空间表示(色调)
red(@color); // 从颜色值中提取 'red' 值(红色)
green(@color); // 从颜色值中提取 'green' 值(绿色)
blue(@color); // 从颜色值中提取 'blue' 值(蓝色)
alpha(@color); // 从颜色值中提取 'alpha' 值(透明度)
luma(@color); // 从颜色值中提取 'luma' 值(亮度的百分比表示法)
saturate(@color, 10%); // 饱和度增加 10%
desaturate(@color, 10%); // 饱和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 设定透明度为 50%
spin(@color, 10); // 色相值增加 10
mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色
greyscale(@color); // 完全移除饱和度,输出灰色
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor,否则输出 @lightcolor
multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);
iscolor(@colorOrAnything); // 判断一个值是否是颜色
isnumber(@numberOrAnything); // 判断一个值是否是数字(可含单位)
isstring(@stringOrAnything); // 判断一个值是否是字符串
iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
isurl(@urlOrAnything); // 判断一个值是否是url
ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
isunit(@numberOrAnything, "rem"); // * 判断一个值是否是指定单位的数值
举例:
/*-------------------运算和函数--------------------------*/
@back:#333;
.test{
border: 1px solid @back*2;
background: lighten(#000, 10%);
color:darken(#000, 10%);
}
1.9 Less在浏览器中的使用方法
<!--需要将type类型改为less>
<link rel="stylesheet" type="text/less" href="less/index.less">
<!--引入less文件-->
<script src="lib/less/less.min.js"></script>
- 1.less无法在浏览器端直接使用
- 2.浏览器不识别
- 3.必须解析成css代码
- 4.通过less解析插件(javascript)
- 5.引入less文件需要加上 type="text/less"
- 6.less.watch(); 无刷新预览样式
- 7.以http形式打开网页预览
这种方法不会产生相应的css文件。
1.10 Less在webstorm中的使用方法
- 新建一个less文件夹
- 在文件夹中新建文件如index.less
- 在index.less中会有一个提示,点击ok或yes即可。
这种方法会产生相应的css文件
想更多了解可参考Less官网