LESS的相关内容
0、引子
1）什么是CSS预处理器?
CSS 预处理器就是用某一种语言用来为 CSS 增加一些动态语言的的特性(变量、函数、继承等)，
CSS预处理器可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处
简而言之: CSS预处理器就是升级版CSS
2）常见的CSS预处理器
Less、 Sass 、Stylus
1.为什么需要less?
1.1 CSS的语法虽然简单, 但它同时也带来一些问题
1.2 CSS需要书写大量看似没有逻辑的代码, 不方便维护及扩展, 也不利于复用,
1.3 造成这些原因的本质源于CSS是一门非程序式的语言, 没有变量/函数/作用域等概念
2.什么是less(Leaner Style Sheets)?
2.1 Less 是一门 CSS 预处理语言，为CSS赋予了动态语言的特征。
2.2 它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展
2.3 一句话：用类似JS的语法去写CSS
3.less基本使用:
3.1 在浏览器中直接运行
编写less文件–>引入less文件–>引入less.js–>运行
注意点:
一定要先引入less.css再引入less.js
如果less代码是写到单独的文件中, 一定要在服务端环境运行才能生效
3.2 提前预编译
编写less文件–>利用工具转换为css文件–>引入css文件
考拉客户端: http://koala-app.com/index-zh.html
开源中国 : https://tool.oschina.net/less
构建工具配置loader自动编译: 后续课程内容
注意点:
无需引入less.js, 无需在服务端运行
4.less
1. less中的注释
less中的注释和JS中的注释一样, 也有单行注释和多行注释
less中单行注释和多行注释最大的区别在于: 是否会被编译
单行注释不会被编译(不会出现在编译后的文件中)
多行注释会被编译 (会出现在编译后的文件中)
2.less中的变量
1.什么是变量?
和js中的概念基本一样
2.less中定义变量的格式
@变量名称: 值;
3.less中使用变量的格式
@变量名称;
4.和js一样可以将一个变量赋值给另外一个变量
@变量名称 : @变量名称;
5.和js一样less中的变量也有全局变量和局部变量
定义在 {} 外面的就是全局的变量, 什么地方都可以使用
定义在 {} 里面的就是局部变量, 只能在{}中使用
注意定: less中的变量是延迟加载的, 写到后面也能在前面使用
6.和js一样不同作用域的变量不会相互影响, 只有相同作用域的变量才会相互影响
和js一样在访问变量时会采用就近原则
@c: red;
.box1{
@c: blue;
width: @w;
height: @h;
background: @c;
margin-bottom: 20px;
@c: pink;
}
.box2{
width: @w;
height: @h;
background: @c;
}
@c: red;
3.less变量插值
1.什么是变量插值?
在less中如果属性的取值可以直接使用变量, 但是如果是属性名称或者选择器名称并不能直接使用变量
如果属性名称或者选择器名称想使用变量中保存的值, 那么必须使用变量插值的格式
2.变量插值的格式
格式: @{变量名称}
@size: 200px;
@w: width;
@s: div;
@{s}{
@{w}: @size;
height: @size;
background: red;
}
4.less中的运算
less中的运算和CSS3中新增的calc函数一样, 都支持+ - *
/* less */
div{
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%;
/*less中的运算和CSS3中新增的calc函数一样, 都支持+ - * / 运算*/
//margin-left: (-200px * 0.5);
margin-left: (-200px / 2);
}
5.less中的混合
1.什么是less中的混合(Mix in)?
将需要重复使用的代码封装到一个类中, 在需要使用的地方调用封装好的类即可
在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来
本质就是ctrl+c --> ctrl + v
2.less中混合的注意点:
如果混合名称的后面没有(), 那么在预处理的时候, 会保留混合的代码
如果混合名称的后面加上(), 那么在预处理的时候, 不会保留混合的代码
/*
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
*/
.center(){
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father{
width: 300px;
height: 300px;
background: red;
.center();
.son{
width: 200px;
height: 200px;
background: blue;
.center();
}
}
3.带参数的混合
.whc(@w, @h, @c){
width: @w;
height: @h;
background-color: @c;
}
div {
.whc(100px, 200px, pink)
}
4.带参数的混合, 并且带默认值
.whc(@w:200px, @h:100px, @c:blue){
width: @w;
height: @h;
background-color: @c;
}
div {
.whc()
}
5.给混合的指定形参传递数据
.whc(@w:200px, @h:100px, @c:blue){
width: @w;
height: @h;
background-color: @c;
}
div {
.whc(@c:pink)
}
6.可变参数
1）less中的@arguments和js中的arguments一样, 可以拿到传递进来的所有形参
2）less中的…表示可以接收 0个或多个参数,如果形参列表中使用了…, 那么…必须写在形参列表最后
.whc(@w:200px, @h:100px, @c:blue) {
width: @w;
height: @h;
background-color: @c;
}
.animate(@name, @time, ...) {
// 至少要接收 @name, @time
//transition: @name @time @mode @delay;
transition: @arguments;
}
div {
.whc(@c:pink);
.animate(all, 4s, linear, 0s);
}
div:hover {
width: 300px;
height: 400px;
background-color: skyblue;
}
7.混合中的匹配模式和通用匹配模式
1）混合的匹配模式：就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合
2）@_: 表示通用的匹配模式
什么是通用的匹配模式?
无论同名的哪一个混合被匹配了, 都会先执行通用匹配模式中的代码
// 三角形
.triangle(@_, @width, @color){
width: 0;
height: 0;
border-style: solid solid solid solid;
}
.triangle(Down, @width, @color){
//width: 0;
//height: 0;
border-width: @width;
//border-style: solid solid solid solid;
border-color: @color transparent transparent transparent;
}
.triangle(Top, @width, @color){
//width: 0;
//height: 0;
border-width: @width;
//border-style: solid solid solid solid;
border-color: transparent transparent @color transparent;
}
.triangle(Left, @width, @color){
//width: 0;
//height: 0;
border-width: @width;
//border-style: solid solid solid solid;
border-color: transparent @color transparent transparent;
}
.triangle(Right, @width, @color){
//width: 0;
//height: 0;
border-width: @width;
//border-style: solid solid solid solid;
border-color: transparent transparent transparent @color;
}
div{
/*
混合的匹配模式
就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合
*/
//.triangle(Down, 80px, green);
//.triangle(Top, 80px, green);
//.triangle(Left, 80px, green);
.triangle(Right, 80px, green);
}
6.less文件中导入其他less文件
// @import "triangle.less";
@import "triangle" // .less可以省略
div{
// 可以直接使用triangle.less中的triangle
.triangle(Down, 40px, red);
}
7.less中的内置函数
由于less的底层就是用JavaScript实现的,
所以JavaScript中常用的一些函数在less中都支持
less—内置函数
1.部分内置函数
-
混杂方法
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)
@str: "./images/1.jpg";
@str2: replace(@str,'1','2');
div {
width: 200px;
height: 200px;
background: url(@str2);
}
8.less的层级结构
- 如果在某一个选择器的{}中直接写上了其它的选择器, 会自动转换成后代选择器
&的作用, 是告诉less在转换的时候不用用后代来转换, 直接拼接在当前选择器的后面即可
.father{
width: 300px;
height: 300px;
background: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*如果在某一个选择器的{}中直接写上了其它的选择器, 会自动转换成后代选择器
例如以下代码: .father .son
*/
/*
.son{
// 这里的&的作用, 是告诉less在转换的时候不用用后代来转换, 直接拼接在当前选择器的后面即可
&:hover{
background: skyblue;
}
width: 200px;
height: 200px;
background: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
*/
&::before{
content: "子元素";
display: block;
background: yellowgreen;
width: 100px;
height: 100px;
}
}
/*
.son:hover{
background: skyblue;
}
*/
9.less中的继承
1.less中的继承和less中混合的区别
- 1.1 使用时的语法格式不同
- 1.2 转换之后的结果不同(混合是直接拷贝, 继承是并集选择器)
混合
// less
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father {
width: 300px;
height: 300px;
background: red;
.center;
.son {
width: 200px;
height: 200px;
background: blue;
.center;
}
}
转化为css====>
// css
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father {
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father .son {
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
center内的这一部分内容还是冗余
继承
// less
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father:extend(.center) {
width: 300px;
height: 300px;
background: red;
// .center;
.son:extend(.center) {
width: 200px;
height: 200px;
background: blue;
// .center;
}
}
转化为css====>
.center,
.father,
.father .son {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father {
width: 300px;
height: 300px;
background: red;
}
.father .son {
width: 200px;
height: 200px;
background: blue;
}
10.less中的条件判断
less中可以通过
when给混合添加执行限定条件, 只有条件满足(为真)才会执行混合中的代码
when表达式中可以使用比较运算符(> < >= <= =)、逻辑运算符、或检查函数来进行条件判断
- < > >= <= =
- (),() 相当于JS中的 || (或)
- ()and() 相当于JS中的 &&
- 判断类型的内置函数
/*
less中可以通过when给混合添加执行限定条件, 只有条件满足(为真)才会执行混合中的代码
when表达式中可以使用比较运算符(> < >= <= =)、逻辑运算符、或检查函数来进行条件判断
*/
/*
.size(@width,@height) when (@width = 100px){
width: @width;
height: @height;
}
*/
// (),() 相当于JS中的||
/*
.size(@width,@height) when (@width = 100px),(@height = 100px){
width: @width;
height: @height;
}
*/
// ()and()相当于JS中的&&
/*
.size(@width,@height) when (@width = 100px)and(@height = 100px){
width: @width;
height: @height;
}
*/
// ispixel判断传递的单位是不是px
.size(@width,@height) when (ispixel(@width)){
width: @width;
height: @height;
}
div{
.size(100px,100px);
background: red;
}
学习笔记❥(^_-)