web-rem布局-less的使用

Dowen00

于 2023-06-27 11:56:22 发布

阅读量60

点赞数

文章标签：前端 less 数学建模

本文链接：https://blog.youkuaiyun.com/m0_63171030/article/details/131414269

版权

less的使用.html:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>less的使用</title>

<link rel="stylesheet" href="my.css">

</head>

<body>

<div>我是颜色也是粉色</div>

</body>

</html>

my.less:

// 定义一个粉色的变量

// 错误的变量名：@1color @color~@#

// 变量名区分大小写 @color 和@Color是两个不同的变量

@color:deeppink;

@color2:blue;

// 定义了一个字体为14像素的变量

@font14: 14px;

body {

background-color: @color;

}

div {

color: @color2;

font-size: @font14;

}

a {

font-size: @font14;

}