less预处理
程序员文章站
2022-03-27 12:54:39
Less官方中文网站Less介绍：Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。作为一个后端开发人员，在项目开发中，被调到前端开发，遇到了从来没有用的Less编写前端样式，接下来学习一下他的语法，写一些小列子来玩玩。......
Less介绍：
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
作为一个后端开发人员，在项目开发中，被调到前端开发，遇到了从来没有用的Less编写前端样式，接下来学习一下他的语法，写一些小列子来玩玩。
文章目录
工具
Hduilder X 下载less预编译器
设置预编配置文件改成实时编译
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Less</title>
<link rel="stylesheet" type="text/css" href="./css/index1.css" />
<style type="text/css"></style>
</head>
<body>
<div id="box">
雷猴
</div>
<button class="button"></button>
</body>
</html>
<div id="box2">
H@Ming
</div>
Less代码
@charset "UTF-8";
*{
padding: 0px;
margin: 0px;
}
//属性变量
@box-color:red;
//类名变量
@title-name:box;
//样式变量
@box-style:width;
//图片样式
@img-url:'../img';
//文件路径
@path-file:'./index2.less';
//动参作用域
@width-val: 200px;
//&：1、父选择器2、且的意思
//&-ok:class拼接-ok &：代表你的class属性
body{
//background-image: url(../img/lyh.png);
fill: url("./index1.less");
background: url("@{img-url}/lyh.png");
}
#@{title-name}{
@{box-style}: @width-val;
height: 100px;
background: @box-color;
color: white;
text-align: center;
line-height: 100px;
//链接父元素
&:hover {
color: yellow;
background-color: black;
}
}
.button {
width: 100px;
height: 100px;
box-sizing: border-box;
// &-ok：掉膘.button-ok进行样式渲染
&-ok {
color: green;
background-color: green;
}
&-error {
color: red;
background-color: red;
}
&-info {
color: yellow;
background-color: yellow;
}
}
//& + & :代表：.button + .button 一个class属性中有两个名称的
.button {
& + & {
color: red;
}
//& & ：代表下级的class属性
& & {
color: yellow;
}
//&&：代表同级别的class属性：.button.button
&& {
color: green;
}
//.button-ok, .success：代表同属性下两种不同的属性.button .button-ok,.button .success 进行样式渲染
.button-ok, .success {
color: blue;
}
//& > .ok ：代表向上查找属性：.button > .ok 进行样式渲染
& > .ok {
background-color: greenyellow;
}
}
#box2 {
width: 250px;
height: 200px;
background-color: red;
font-size: 20px;
}
Less预编译后的样式
@charset "UTF-8";
* {
padding: 0px;
margin: 0px;
}
body {
fill: url("./index1.less");
background: url("../img/lyh.png");
}
#box {
width: 200px;
height: 100px;
background: red;
color: white;
text-align: center;
line-height: 100px;
}
#box:hover {
color: yellow;
background-color: black;
}
.button {
width: 100px;
height: 100px;
box-sizing: border-box;
}
.button-ok {
color: green;
background-color: green;
}
.button-error {
color: red;
background-color: red;
}
.button-info {
color: yellow;
background-color: yellow;
}
.button + .button {
color: red;
}
.button .button {
color: yellow;
}
.button.button {
color: green;
}
.button .button-ok,
.button .success {
color: blue;
}
.button > .ok {
background-color: greenyellow;
}
/* ------------------------------------------------------------------------------------ */
@boxstyle:200px;
@bgcolor:red;
@box2:#box2;
@font-size:20px;
@{box2}{
width:@boxstyle+50;
height: @boxstyle;
background-color: @bgcolor;
font-size: @font-size;
}
本文地址：https://blog.csdn.net/YHM_MM/article/details/109017143
上一篇： Leetcode题7、整数反转（Python题解）
下一篇： 记录CheckBox 的使用技巧