less笔记
less
less环境安装
安装nodejs
选择合适自己电脑的版本下载,傻瓜式安装包安装,安装过程略。
检测是否安装成功
打开cmd,输入 node –v
查看版本。
若出现以下现象代表安装成功,版本号可能有所不同。
安装less
-
在线安装
- 打开cmd,输入
npm install -g less
(部分电脑要 sudo 管理权限) - 查看版本:
lessc -v
- 打开cmd,输入
-
离线安装
-
打开我的电脑,进入此目录。(AppData是隐藏文件夹)
-
C:\Users\当前用户名\AppData\Roaming\npm
-
把下载的less解压包解压进去即可。
-
配置webstrom
附:命令行编译less文件(不太推荐)
用cmd进入写好的less文件目录下,执行以下命令:
lessc less文件.less 编译后文化名.css
快速入门
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
PS:也支持css原生语法。
注释
与css文件注释一样。
// 也是注释,但不会编译到css文件当中。
定义变量
LESS 允许开发者自定义变量,变量可以在全局样式中使用,变量使得样式修改起来更加简单。
- 语法:@变量名: 值;
- 不能以数字开头,不能包含特殊字符,区分大小写。
- 当使用变量且需要字符拼接的时候,@{定义过的变量}。
例:
@mainColor:#e92322;
@className:box;
// 变量使用
div {
background: @mainColor;
}
/*变量用于字符拼接使用方法*/
[email protected]{className}{
color: @mainColor;
}
Mixin混入
Mixin(混入)功能对用开发者来说并不陌生,很多动态语言都支持 Mixin(混入)特性,它是多重继承的一种实现,在 LESS 中,**混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS,就像在当前 CLASS 中增加一个属性一样。 **
可以混入类选择器或id选择器。
-
类混入
-
在一个样式类中引入另一些样式类,调用格式:
.样式名(); 或 .样式名;
,()是可选。.f_left { float: left; } .f_right { float: right; } /*类混入*/ .w50-f_left{ .w50; .f_left; }
-
-
Mixin作为函数
-
mixin中定义的变量和mixin是可见的,可以在调用者的范围内使用。只有一个例外,如果调用者包含一个具有相同名称的变量(包括由另一个mixin调用定义的变量),则不会复制变量。只有受调用者本地范围中存在的变量才受到保护。从父作用域继承的变量将被重写。
ps:定义的函数不会被编译,只有调用时才会被编译。
-
定义函数 格式:
.函数名(){}
.w50(){ width: 50%; } .w50-f_left(){ .w50(); }
-
带参数的函数 (若要传带默认值的参数,只要在参数后加上:值)
.f(@direction){ float: @direction; } // 带默认值参数 .w(@width:100px){ width: @width; } .w50-f_left{ .f(right); .w(); }
-
嵌套
在我们书写标准 CSS 的时候,遇到多层的元素嵌套这种情况时,我们要么采用从外到内的选择器嵌套定义,要么采用给特定元素加 CLASS 或 ID 的方式 。
即每嵌套一层代表加一个css加一个层级(即空格),&(衔接上)。
.wjs_app{
display:block;
img {
display: none;
}
&:hover {
img{
display: block;
position: absolute;
}
}
> div{
display: block
}
}
// 编译生成的css
.wjs_app {
display: block;
}
.wjs_app img {
display: none;
}
.wjs_app:hover img {
display: block;
position: absolute;
}
.wjs_app > div {
display: block;
}
组合样式
.my-inline-block {
display: inline-block;
font-size: 0;
}
.thing1 {
&:extend(.my-inline-block);
}
.thing2 {
&:extend(.my-inline-block);
}
// 编译生成的css
.my-inline-block,
.thing1,
.thing2 {
display: inline-block;
font-size: 0;
}
Import
格式: @import "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"); // * 判断一个值是否是指定单位的数值
less在浏览器上使用的方法
<link rel="stylesheet/less" type="text/less" href="styles.less" />
<!-- 需要less解析插件less.js -->
<script src="less.js" type="text/javascript"></script>
<!-- 可加可不加,实时更新,即不用重新刷新浏览器即可更新样式 -->
<script>less.watch();</script>