CSS预处理器之less
1.基础内容
1.1什么是CSS预处理器?
- CSS 预处理器就是用某一种语言用来为 CSS 增加一些动态语言的的特性(变量、函数、继承等)，CSS预处理器可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处
简而言之: CSS预处理器就是升级版CSS - 2.常见的CSS预处理器 :Less、 Sass 、Stylus
1.2 为什么需要less?
- CSS的语法虽然简单, 但它同时也带来一些问题
- CSS需要书写大量看似没有逻辑的代码, 不方便维护及扩展, 也不利于复用,造成这些原因的本质源于CSS是一门非程序式的语言, 没有变量/函数/作用域等概念
1.3 什么是less(Leaner Style Sheets)?
- Less 是一门 CSS 预处理语言，为CSS赋予了动态语言的特征。它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展。
- 一句话：用类似JS的语法去写CSS
1.4 less基本使用
第一种用法
在浏览器中直接运行
编写less文件-->引入less文件-->引入less.js-->运行-
注意点:
<link rel="stylesheet/less" href="css/index.less"> 注意和引入css区别-
一定要先引入less.css再引入less.js
如果less代码是写到单独的文件中, 一定要在服务端环境运行才能生效
第二种用法
- 提前预编译(解决性能问题)
编写less文件-->利用工具转换为css文件-->引入css文件
考拉客户端: http://koala-app.com/index-zh.html
开源中国 : https://tool.oschina.net/less
构建工具配置loader自动编译
注意点:
无需引入less.js, 无需在服务端运
1.5 注释
- less中的注释和JS中的注释一样, 也有单行注释和多行注释
less中单行注释和多行注释最大的区别在于: 是否会被编译
单行注释不会被编译(不会出现在编译后的文件中)
多行注释会被编译 (会出现在编译后的文件中)
2.变量定义与使用
2.1基本使用
/* 1.什么是变量? 和js中的概念基本一样 2.less中定义变量的格式 @变量名称: 值; 3.less中使用变量的格式 @变量名称; @w: 400px; @h: 200px; 4.和js一样可以将一个变量赋值给另外一个变量 @变量名称 : @变量名称; @h: @w; 5.和js一样less中的变量也有全局变量和局部变量 定义在{}外面的就是全局的变量, 什么地方都可以使用 定义在{}里面的就是局部变量, 只能在{}中使用 注意定: less中的变量是延迟加载的, 写到后面也能在前面使用 6.和js一样不同作用域的变量不会相互影响, 只有相同作用域的变量才会相互影响(后定义的覆盖先定义的) 和js一样在访问变量时会采用就近原则 */
2.2 变量插值(基本不用)
@size: 200px; @w: width; @s: div; /* 1.什么是变量插值? 在less中如果属性的取值可以直接使用变量, 但是如果是属性名称或者选择器名称并不能直接使用变量 如果属性名称或者选择器名称想使用变量中保存的值, 那么必须使用变量插值的格式 2.变量插值的格式 格式: @{变量名称} */ @{s}{ @{w}: @size; height: @size; background: red; }
3. less中的运算
//想要让一个元素居中 传统做法 div{ width: 200px; height: 200px; background: blue; position: absolute; left: 50%; /*以下的方式不利于编码, 因为需要我们自己口算元素宽度的一半是多少*/ /*margin-left: -100px;*/ /*以下的方式不利于兼容, 因为transform属性是CSS3新增的, 只有支持C3属性的浏览器才可以使用*/ /*transform: translateX(-50%);*/ /*在CSS3中新增了一个calc函数, 可以实现简单的+ - * / 运算*/ /*margin-left: calc(-200px / 2);*/ margin-left: calc(-200px * 0.5); } /*less中的运算和CSS3中新增的calc函数一样, 都支持+ - * / 运算*/ //margin-left: (-200px * 0.5); margin-left: (-200px / 2);
4.less中的混合
4.1 不带参数的混合
/* 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(); } }
4.2 带参数的混合
// 这里就是带参数的混合 /* .whc(@w, @h, @c){ width: @w; height: @h; background: @c; } */ // 这里就是带参数的混合, 并且带默认值 .whc(@w:100px, @h:100px, @c:pink){ width: @w; height: @h; background: @c; } .box1{ //直接传递参数 .whc(200px, 200px, red); // 这里是给混合的指定形参传递数据 .whc(@c:red); } .box2{ .whc(300px, 300px, blue); }
4.3 混合的可变参数
/* 1.less中的@arguments和js中的arguments一样, 可以拿到传递进来的所有形参,不用一个一个传 传递参数如下1 不传递参数就写...如下2 但是比如transition 需要至少接受两个参数,为了不错误,就先传递两个参数,在写... 如3 2.less中的...表示可以接收0个或多个参数 如果形参列表中使用了..., 那么...必须写在形参列表最后 */ /* 1..... .animate(@name, @time, @mode, @delay){ //transition: @name @time @mode @delay; transition: @arguments; } 2. .animate(...){ //transition: @name @time @mode @delay; transition: @arguments; } 3. */ .animate(@name, @time, ...){ //transition: @name @time @mode @delay; transition: @arguments; } div{ width: 200px; height: 200px; background: red; //transition: all 4s linear 0s; //.animate(all, 4s); .animate(all, 4s, linear, 0s); } div:hover{ width: 400px; height: 400px; background: blue; }
4.4 混合中的匹配模式及通用匹配模式
/* 混合的匹配模式: 就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合 @_: 表示通用的匹配模式 什么是通用的匹配模式? 无论同名的哪一个混合被匹配了, 都会先执行通用匹配模式中的代码。 比如我们实现一个三角形无论上下左右都得写width,height, border-style,而通过通用的匹配模式,就能把这些重复的代码写在一个里面,减少代码冗余. .triangle(Down, @width, @color){ width: 0; height: 0; border-width: @width; border-style: solid solid solid solid; border-color: @color transparent transparent transparent; } */ //我们来通过less实现一个三角形 .triangle(@_, @width, @color){ width: 0; height: 0; border-style: solid solid solid solid; } //下三角 .triangle(Down, @width, @color){ border-width: @width; border-color: @color transparent transparent transparent; } //下三角 .triangle(Top, @width, @color){ border-width: @width; 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); }
5.less中导入其他less文件
- @import "triangle.less";
@import "triangle"; 可以不加后缀
6.less中的内置函数
<script> /* 由于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) */ </script>
7.less中的层级结构
在less中使用伪元素和伪类
/*如果在某一个选择器的{}中直接写上了其它的选择器, 会自动转换成后代选择器 例如以下代码: .father .son */ .father{ width: 300px; height: 300px; background: red; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* .son{ // 这里的&的作用, 是告诉less在转换的时候不用用后代来转换, 直接拼接在当前选择器的后面即可 如果不加&,就会变成这样 .father .son :hover多了一个空格 */ &: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; } }
8. less中的继承
.center{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* 1.less中的继承和less中混合的区别 1.1使用时的语法格式不同 .father:extend(.center){} 1.2转换之后的结果不同(混合是直接拷贝, 继承是并集选择器) */ .father:extend(.center){ width: 300px; height: 300px; background: red; //.center; .son:extend(.center){ width: 200px; height: 200px; background: blue; //.center; } }
9.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; }
