前端less从入门到入门
一、less简介
less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
less 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。
less的中文官网：lesscss.cn/
bootstrap中less教程：www.bootcss.com/p/lesscss/
Less编译工具----koala 官网：www.koala-app.com（其实现在像vscode等都可以使用插件代替，如 Easy LESS）
二、less中的常见注意点（文中代码可自行操作，代码文件可在gitee中查看）
1、less中的注释
以//开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中
2、less中的变量
使用@来申明一个变量：@pink：pink;
1.作为普通属性值只来使用：直接使用@pink
2.作为选择器和属性名：#@{selector的值}的形式
3.作为URL：@{url}
@color:pink;
// 以下两种用的少
@m:margin; // 属性名
@url:"../img/zdy.jpg";
@slector:#wrap; // 选择器
*{
@{m}: 0;
padding: 0;
}
@{slector}{
.inner{
margin: @zero auto;
// background: @color;
background: url("@{url}");
}
}
4.变量的延迟加载--less中体现逻辑性的地方（）
// > > > > > > > > > > > > > > > > > > > .less文件 > > > > > > > > > > > > > > > > > > >
@var: 0;
.class {
@var: 1;
.brass {
@var: 2;
three: @var; //3 本行会等这个作用域里所有内容解析完后，再回到本行，所以是3
@var: 3;
}
one: @var; //1
}
// > > > > > > > > > > > > > > > > > > > .css文件 > > > > > > > > > > > > > > > > > > >
.class {
one: 1;
}
.class .brass {
three: 3;
}
3、less中的嵌套规则
1.基本嵌套规则
2.&的使用(&可以理解为代表前面的选择器)
----嵌套后出现空格导致二者成为父子关系，功能实现异常，加上&编译后删除空格变成兄弟关系
// > > > > > > > > > > > > > > > > > > > .less文件 > > > > > > > > > > > > > > > > > > >
#wrap{
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
.inner{
width: 100px;
height: 100px;
background: @color;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
&:hover{
background:blue
}
}
}
// > > > > > > > > > > > > > > > > > > > .css文件 > > > > > > > > > > > > > > > > > > >
#wrap {
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
}
#wrap .inner {
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
#wrap .inner:hover { // .less文件中的:hover前不加&
// 就会是 #wrap .inner :hover
background: blue;
}
4、less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1.普通混合----.middle
2.不带输出的混合----加上()----.middle()
3.带参数的混合----.middle(@w,@h,@c)
4.带参数并且有默认值的混合----.middle(@w:10px,@h:10px,@c:black)
5.带多个参数的混合
6.命名参数.middle(@c:black);
/* 混合及不带输出的混合 */
.middle(){
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
&:hover{
background:blue
}
}
#wrap{
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
.inner{
.middle
}
.inner2{
.middle
}
}
/* -------------------------- */
/* 带参数的混合 */
.middle(@w:10px,@h:10px,@c:black) {
width: @w;
height: @h;
background: @c;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
&:hover{
background:blue
}
}
#wrap{
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
.inner{
.middle(100px,100px,pink);
}
.inner2{
.middle(300px,300px,green);
}
}
/* -------------------------- */
/* 命名参数 */
.middle(@w:10px,@h:10px,@c:black) {
width: @w;
height: @h;
background: @c;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
&:hover{
background:blue
}
}
#wrap{
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
.inner{
.middle(100px,100px,pink);
}
.inner2{
.middle(@c:black); // 命名参数：指定颜色，其他使用默认值
}
}
7.匹配模式
// > > > > > > > > > > > > > > > > > > triangle.less文件 > > > > > > > > > > > >> > > > > >
/* 定义一个同名混合(@_) 每次调用时，都会先调用这个 记得带参，但命名可不一样*/
.triangle(@_,@wwww,@cccc){
width: 0;
height: 0;
overflow: hidden;
}
.triangle(L,@w,@c){
border-width: @w;
border-style:dashed solid dashed dashed;
border-color: transparent @c transparent transparent;
}
.triangle(R,@w,@c){
border-width: @w;
border-style:dashed dashed dashed solid;
border-color: transparent transparent transparent @c;
}
.triangle(T,@w,@c){
border-width: @w;
border-style:dashed dashed solid dashed;
border-color: transparent transparent @c transparent;
}
.triangle(B,@w,@c){
border-width: @w;
border-style:solid dashed dashed dashed;
border-color: @c transparent transparent transparent;
}
// > > > > > > > > > > > > > > > > > > triangle.less文件 > > > > > > > > > > > >> > > > > >
@import "./triangle.less";
#wrap .triangle{
.triangle(R,40px,blue);
}
// > > > > > > > > > > > > > > > > > > triangle.css文件 > > > > > > > > > > > >> > > > > >
#wrap .triangle {
width: 0;
height: 0;
overflow: hidden;
border-width: 40px;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent blue;
}
8.arguments变量----比较鸡肋的玩意，懒得学了
// > > > > > > > > > > > > > > > > > > arguments.less文件 > > > > > > > > > > > > > > > >
.border(@1,@2,@3){
border:@arguments
}
#wrap .triangle{
.border(1px,solid,black)
}
5、less运算
在less中可以进行加减乘除的运算
// > > > > > > > > > > > > > > > > > > triangle.less文件 > > > > > > > > > > > > > > > >
#wrap .triangle{
width: (100+100px);
}
// > > > > > > > > > > > > > > > > > > triangle.css文件 > > > > > > > > > > > > > > > >
#wrap .triangle {
width: 200px;
}
6、less避免编译
// > > > > > > > > > > > > > > > > > > triangle.less文件 > > > > > > > > > > > > > > > >
*{
margin: 1000px;
padding: calc(100px + 100);
}
// > > > > > > > > > > > > > > > > > > triangle.css文件 > > > > > > > > > > > > > > > >
* {
margin: 1000px;
padding: calc(100px + 100); // 是想让浏览器编译
}
7、less继承
性能比混合高
灵活度比混合低
代码文件真的挺乱的，就不贴出来了
还是直接gitee见吧
最后
在学习过程中，代码写的比较乱，我自己看也许会感觉比较清晰，但是读者看着就会稍有迷糊，建议结合自身的学习资料和笔记对照着来看。
