Less学习笔记

最新推荐文章于 2023-07-22 15:55:15 发布

shawn_jing128

最新推荐文章于 2023-07-22 15:55:15 发布

阅读量222

点赞数

分类专栏： Less

本文链接：https://blog.csdn.net/weixin_40703303/article/details/94311927

版权

本文是关于Less预处理语言的学习笔记，介绍了Less的安装、基本语法，如变量、混合、运算和嵌套规则，并通过实例展示了如何使用匹配模式和进行运算。Less简化了CSS的编写，提高了代码的可维护性和复用性。

摘要由CSDN通过智能技术生成

本笔记是慕课视频学习 https://www.imooc.com/learn/102

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

安装

在服务器端最容易的安装方式就是通过 npm （node.js 的包管理器），方法如下：

$ npm install -g less

我这里编辑器是VS CODE，在商店里搜easy less，然后点击安装即可。

less基本语法

1、注释：①/**/可编译 ②、//不可编译

2、变量：声明方式 @border_width:2px; 引用方式 border:solid #000 @border_width

3、混合：

①不带参数，声明方式 .border_radius{};引用方式 .border_radius

②带参数，声明方式 .border_radius(@radius){}

创建结构目录

混合示例1--添加新的样式：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style/main.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>

main.less

@charset "utf-8";
//less声明变量格式： @变量名:值
@test_width:300px;
body{
    background-color: rgb(235, 9, 9);
} 
.box{
    width: @test_width;
    height:@test_width;
    background-color: yellow;
    .border;
}
.border{
    border: solid 5px pink;
}

这里是将class为box的标签定义了长宽背景色，再给边框设置宽度和颜色。

传统CSS写法：

index.html

main.less

最低0.47元/天解锁文章

shawn_jing128

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Less学习笔记

本笔记是慕课视频学习https://www.imooc.com/learn/102Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。安装在服务器端最容易的安装方式就是通过 npm （node.js的包管理器），方法如下：$ npm install -g less我这里编辑...
复制链接

扫一扫