一、概念
1.什么是CSS预处理器?
CSS 预处理器就是用某一种语言用来为 CSS 增加一些动态语言的的特性(变量、函数、继承等);CSS预处理器可以让你的 CSS 更加简洁,适应性更强,代码更直观等诸多好处;
简而言之: CSS预处理器就是升级版CSS;
2.常见的CSS预处理器
Less、 Sass 、Stylus
1.为什么需要less?
1.1CSS的语法虽然简单, 但它同时也带来一些问题
1.2CSS需要书写大量看似没有逻辑的代码, 不方便维护及扩展, 也不利于复用,
1.3造成这些原因的本质源于CSS是一门非程序式的语言, 没有变量/函数/作用域等概念
2.什么是less(Leaner Style Sheets)
2.1Less 是一门 CSS 预处理语言,为CSS赋予了动态语言的特征。
2.2它扩展了 CSS 语言,增加了变量、Mixin(混合)、嵌套、函数和运算等特性,使 CSS 更易维护和扩展
2.3一句话:用类似JS的语法去写CSS
4.less基本使用:
第一种方式:(存在性能问题)
4.1在浏览器中直接运行
编写less文件–>引入less文件–>引入less.js–>运行
less.js文件的来源(网页最下面有个下载):http://lesscss.cn/
注意点:
一定要先引入less.css再引入less.js(这里引入less.css时要在stylesheet后面加上/less),在运行的时候才通过less.js对less文件进行加工处理,这样存在性能问题。
如果less代码是写到单独的文件中, 一定要在服务端环境运行才能生效
第二种方式(现在学的是自己转换,后面学到可以通过工具自动转换)
4.2提前预编译
编写less文件–>利用工具转换为css文件–>引入css文件
考拉客户端: http://koala-app.com/index-zh.html
(刷新、编译后自动在对应文件下生成一个.css文件)
开源中国 : https://tool.oschina.net/less
构建工具配置loader自动编译: 后续课程内容
注意点:
无需引入less.js, 无需在服务端运行
二、less中的注释
less中的注释和JS中的注释一样, 也有单行注释和多行注释。 less中单行注释和多行注释最大的区别在于: 是否会被编译。
- 单行注释不会被编译(不会出现在编译后的文件中)
- 多行注释会被编译 (会出现在编译后的文件中)
三、变量
1.什么是变量?
和js中的概念基本一样
2.less中定义变量的格式
@变量名称: 值;
3.less中使用变量的格式
@变量名称;
4.和js一样可以将一个变量赋值给另外一个变量
@变量名称 : @变量名称;
5.和js一样less中的变量也有全局变量和局部变量
定义在{ }外面的就是全局的变量, 什么地方都可以使用;
定义在{ }里面的就是局部变量, 只能在{ }中使用;
注意定: less中的变量是延迟加载的, 写到后面也能在前面使用;
6.和js一样不同作用域的变量不会相互影响, 只有相同作用域的变量才会相互影响,和js一样在访问变量时会采用就近原则;
1.什么是变量插值?
在less中如果属性的取值可以直接使用变量, 但是如果是属性名称或者选择器名称并不能直接使用变量;
如果属性名称或者选择器名称想使用变量中保存的值, 那么必须使用变量插值的格式;
2.变量插值的格式
格式: @{变量名称}
四、Less中的混合
1.什么是less中的混合(Mix in)?
将需要重复使用的代码封装到一个类中, 在需要使用的地方调用封装好的类即可;
在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来;
本质就是ctrl+c --> ctrl + v
2.less中混合的注意点:
- 如果混合名称的后面没有(), 那么在预处理的时候, 会保留混合的代码;
- 如果混合名称的后面加上(), 那么在预处理的时候, 不会保留混合的代码;
3.混合后,结构为后代关系,加上 & 则为交集关系;例1:
.a{
.b{ }
}
上面处理后为:.a .b{ } //有空格
例2:
.a{
&.b{ }
}
上面处理后为:.a.b{ } //无空格
五、Less中的可变参数混合;
less中的…表示可以接收0个或多个参数;
如果形参列表中使用了…, 那么…必须写在形参列表最后;
.animate(@name, @time, ...){
//transition: @name @time @mode @delay;
transition: @arguments; //less中的@arguments和js中的arguments一样, 可以拿到传递进来的所有形参
}
div{
width: 200px;
height: 200px;
background: red;
//transition: all 4s linear 0s;
//.animate(all, 4s, linear, 0s);
.animate(all, 4s, linear, 0s);
}
div:hover{
width: 400px;
height: 400px;
background: blue;
}
六、Less中的匹配模式:
@_: 表示通用的匹配模式
什么是通用的匹配模式?
无论同名的哪一个混合被匹配了, 都会先执行通用匹配模式中的代码;
用边框制作一个三角符号:
.triangle(@_, @width, @color){
width: 0;
height: 0;
border-style: solid solid solid solid;
}
.triangle(Down, @width, @color){
border-width: @width;
//border-style: solid solid solid solid;
border-color: @color transparent transparent transparent;
}
.triangle(Top, @width, @color){
border-width: @width;
//border-style: solid solid solid solid;
border-color: transparent transparent @color transparent;
}
.triangle(Left, @width, @color){
border-width: @width;
border-color: transparent @color transparent transparent;
}
.triangle(Right, @width, @color){
border-width: @width;
border-color: transparent transparent transparent @color;
}
div{
//混合的匹配模式, 就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合
//.triangle(Down, 80px, green);
//.triangle(Top, 80px, green);
//.triangle(Left, 80px, green);
.triangle(Right, 80px, green);
}
七、Less中导入其他less
@import “ xxx” // xxx为另一个less文件的名字
Div {
}
八、less中的内置函数
由于less的底层就是用JavaScript实现的,
所以JavaScript中常用的一些函数在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)
例:
@str: "./../images/1.jpg";
@str2: replace(@str, "1", "2");
div{
width: 200px;
height: 200px;
//background: url(@str2);
background: desaturate(yellow, 50%);
}
div:hover{
background: saturate(yellow, 50%);
}
九、less中的继承
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/*
1.less中的继承和less中混合的区别
1.1使用时的语法格式不同
1.2转换之后的结果不同(混合是直接拷贝, 继承是并集选择器)
*/
.father:extend(.center){
width: 300px;
height: 300px;
background: red;
//.center;
.son:extend(.center){
width: 200px;
height: 200px;
background: blue;
//.center;
}
}
十、Less中的条件判断
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;
}
.size(@width,@height) when (ispixel(@width)){
width: @width;
height: @height;
}
div{
.size(100px,100px);
background: red;
}
-End