less基础介绍

什么是less?
Less是一个C5S预处理器,Less文件后缀是,less。扩充了 CSS 语言,使CSS 具备一定的逻辑性、计算能力
注意事项: 浏览器不识别 Less 代码,目前阶段,网页要引入对应的 CSS 文件
VS Code 插件: Easy LESS,保存 less文件后自动生成对应的 CSS 文件

less基础介绍_第1张图片
我们来简单的玩玩less吧
注意:现在我们是没有css后缀文件的
在这里插入图片描述
我们写一点到less里

.father {
    width: 100px;
    .son {
        width: 100px;
    }
}

保存后我们发现多出一个文件
less基础介绍_第2张图片
我们来看看index.css中都有些什么吧!

.father {
  width: 100px;
}
.father .son {
  width: 100px;
}

一、less运算

加、减、乘直接书写计算表达式
除法需要添加 () 或 .
less中:

.box {
  width: 100+20px;
  width: 100-20px;
  width: 100 * 2px;
  width: (100/200px);
}

css中:

.box {
  width: 120px;
  width: 80px;
  width: 200px;
  width: 0.5px;
}

二、less嵌套

作用:可以快速生成后代选择器

less中

.father{
    width: 100px;
    .son {
        width: 100px;
        a{
            color: red;
            // & 表示当前的选择器
            &:hover {
                color: pink;
            }
        }
    }
}

css中

.father {
  width: 100px;
}
.father .son {
  width: 100px;
}
.father .son a {
  color: red;
}
.father .son a:hover {
  color: pink;
}

三、less变量

概念: 容器,存储数据
作用:存储数据,方便使用和修改
语法:
定义变量:@变量名: 数据;
使用变量: CSS属性: @变量名;

less中

@myColor:red;
.box{
    color: @myColor;
}
.boss{
    color: @myColor;
}

css中

.box {
  color: red;
}
.boss {
  color: red;
}

四、less导入

作用:导入less 公共样式文件
语法:导入: @import “文件路径”;
提示:如果是 less 文件可以省略后缀

less基础介绍_第3张图片

导入.less:

@import "./index.less";
// @import "./index";

导入.css:

.box {
  color: red;
}
.boss {
  color: red;
}

五、less导出

写法:在 less 文件的第一行添加 // out: 存储URL
提示:文件夹名称后面添加 /

// out: ./导出1.css

在这里插入图片描述
我们也可以禁止导出

// out: false;

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

你可能感兴趣的:(less,前端,css)