Less的基本使用
时间:2019-10-18
本文章向大家介绍Less的基本使用,主要包括Less的基本使用使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Less
Less介绍
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。
Less的基本使用
注释
// 这是单行注释
/*
这是多行注释
*/
注意:单行注释不会参与预处理, 只有多行注释才会参与预处理。
变量
// less中定义变量额格式:@变量名: 变量值
@width: 100px;
// less中也可以通过值传递给变量赋值
@height: @width;
注意:
less中也有作用域相关概念,不在 {} 内的是全局变量;在 {} 内的是局部变量,只能在 {} 使用
less中只有在相同作用域中的变量才会相互影响, 后定义的会覆盖先定义的
- less中变量的取值服从就近原则
less中变量的加载时延迟加载,写在后面也能调用
变量插值
在Less中,既可以用变量名表示属性值,也可以用变量名表示选择器名、属性名,但是在表示选择器名、属性名时,需要将变量用{}括起来。
@d: div;
@w: width;
@h: height;
@s: 100px;
@{d}{
@{w}: @s;
@{h}: @s;
}
运算
在less中,可以和css3中的cale()函数一样进行简单的加减乘除运算。
@size: 200px;
div{
width: @size * 2;
height: @size / 2;
}
混合
在less中,可以将重复的代码提取出来,形成一个单独的类, 然后在将类名放入需要的地方,,浏览器在执行代码时会将抽出来的类拷贝后放在需要的位置。
// 在类名后加()的话,在less混合处理完成后,不会显示那个类,不加()的话则那个类就不会消失
.center(){
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
div{
.center();
}
带形参的混合
在Less中可以像JavaScript一样给混合传递参数。
// 传递参数时可以指定默认值
.whc(@w: 100px, @h: 100px, @c: red){
width: @w;
height: @h;
background: @c;
}
div:nth-of-type(1){
.whc(200px, 200px, yellow);
}
div:nth-of-type(2){
.whc();
}
div:nth-of-type(3){
.whc(@c: yellow);
}
混合中的可变参数
- 在Less的混合中,可以使用
...
来代替零个或多个新参,...
前的新参个数就是调用混合时需要传入的最少实参个数。 Less混合中可以使用
@arguments
来接受所有实参.animate(@name, @time, ...){ translation: @arguments; }
混合匹配模式
混合中后定义的变量会覆盖先定义的变量,但是可以通过或者匹配模式来定义同名变量
通用匹配模式:无论匹配了那种模式都要先执行通用模式中的代码,通过匹配模式的匹配符是
@_
.tranBd(@w){ width: 0; height: 0; border-width: @w; border-style: solid; border-color: transparent; } .triangle(@_, @w, @c){ .tranBd(@w); } .triangle(top, @w, @c){ border-bottom-color: @c; } .triangle(bottom, @w, @c){ border-top-color: @c; } .triangle(right, @w, @c){ border-left-color: @c; } .triangle(left, @w, @c){ border-right-color: @c; }
导入其他Less文件
可以使用@import
来导入外部Less文件,文件的.less后缀可以省略。
@import './css/triangle';
内置函数
由于Less的底层就是用JavaScript实现的,所以一些常用的JS函数在Less中也能实现。
image-size("file.jpg"); // => 100px 50px
image-width("file.jpg"); // => 100px
image-height("file.jpg"); // => 50px
// 单位转换
convert(9s, "ms"); // => 9000ms
convert(14cm, mm); // => 140mm
convert(8, mm); // => 8
// 列表
@list: "A", "B", C, "D";
length(@list); // => 4
extract(@list, 3); // => C
*/
// 数学
/*
ceil(2.1); // => 3 向上取整
floor(2.1); // => 2 向下取整
percentage(.3); // => 30% 转百分比
round(1.67, 1); // => 1.7 四舍五入,保留一位小数点
sqrt(25cm); // => 5cm 取平方根
abs(-5cm); // => 5cm 取绝对值
pi(); // => 3.141592653589793 圆周率π
max(3px, 42px, 1px, 16px); // => 42px
min(3px, 42px, 1px, 16px); // => 1px
*/
// 字符串
/*
replace("Hi Tom?", "Tom", "Jack"); // => "Hi Jack"
*/
// 判断类型
/*
isnumber(56px); // => true 是否含数字
isstring("string"); // => true
iscolor(#ff0); // => true
iscolor(blue); // => true
iskeyword(keyword); // => true
isurl(url(...)); // => true
ispixel(56px); // => true
isem(7.8em); // => true
ispercentage(7.8%); // => true
isunit(4rem, rem); // => true 是否为指定单位
isruleset(@rules); // => true 是否为变量
*/
// 颜色操作
/*
增加饱和度
saturate(color, 20%)
减少饱和度
desaturate(color, 20%)
增加亮度
lighten(color, 20%)
减少亮度
darken(color, 20%)
降低透明度
fadein(color, 10%)
增加透明度
fadeout(color, 10%)
设置绝对不透明度(覆盖原透明度)
fade(color, 20%)
旋转色调角度
spin(color, 10)
将两种颜色混合,不透明度包括在计算中。
mix(#f00, #00f, 50%)
与白色混合
tint(#007fff, 50%)
与黑色混合
shade(#007fff, 50%)
灰度,移除饱和度
greyscale(color)
返回对比度最大的颜色
contrast(color1, color2)
*/
// 颜色混合
/*
每个RGB 通道相乘,然后除以255
multiply(color1, color2);
与 multiply 相反
screen(color1, color2);
使之更浅或更暗
overlay(color1, color2)
避免太亮或太暗
softlight(color1, color2)
与overlay相同,但颜色互换
hardlight(color1, color2)
计算每个通道(RGB)基础上的两种颜色的平均值
average(color1, color2)
-->
层级结构
// 在less中,如果在一个选择器内部在加上一个选择器的话,表示两者是层级结构。
.father{
.son{
// ...
//在less的层级结构中,如果要表示一个选择器的伪类选择器的话,可以在其内部使用 &:选择器名 的方式。
&:hover{
// ...
}
}
// 在less的层级结构中,如果要表示一个选择器的伪元素选择器的话,可以在其内部使用 &::选择器名 的方式。
&::before{
// ...
}
}
继承
继承与混合的区别 :
- 混合的本质是拷贝,只是减少了less文件中的冗余代码,并没有减少css文件中的冗余
- 继承的本质是并集选择器,减少了css中的代码
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
//继承的格式: 需要继承的选择器:extends(被继承的选择器)
.father:extend(.center){
width: 400px;
height: 400px;
background: red;
.son:extend(.center){
width: 200px;
height: 200px;
background: yellow;
}
}
条件判断
在less中,可以给混合添加条件判断,条件判断的类型可以是:
- 比较运算符(=, >, <, >=, <=)
- 逻辑运算符( (),() ()and() not())
- 以及内置比较函数(isem ispixel ...)
.size(@w, @h) when (@w >= 100px)and(@h >= 100px){
width: @w;
height: @h;
}
div{
.size(100px, 100px);
background: red;
}
原文地址:https://www.cnblogs.com/luwenfeng/p/11700432.html
- Nginx 配置文件安全分析
- 一个写SQL语句的便利工具
- OpenFlow网络中的路由服务
- Python中萌新不知道的小魔法(一)
- 基于Scrapy的全球最大成人网站PornHub爬虫
- Python标准库笔记(7) — copy模块
- Python项目实战——开发网易云音乐插件
- 将已有项目代码通过命令行方式上传到github,简易傻瓜教程(图文)将已有项目代码通过命令行方式上传到github,傻瓜教程(图文)1. 创建一个github项目2. 在Repository name
- mac执行git命令出现xcrun: error: invalid active developer path解决方法
- centos修改主机名
- SSH免密登录,RSA认证登录
- Zookeeper安装部署调试命令
- Facebook 直播是如何承受海量压力的?
- 将 Redis 作为图数据库
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法