less预处理

更新时间:2023-04-07 14:24:14 阅读：评论：0

Less官方中文网站

Less介绍：
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言蓼莪全文读音和译文，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
作幼儿园教养笔记为一个后端开发人员，在项目开发中，被调到前端开发，遇到了从来没有用的Less编写前端样式，接下来学习一下他的语法，写一些小列子来玩玩。

文章目录

工具html代码Less代码Less预编译后的样式

工具

Hduilder X 下载less预编译器
设置预编配置文件改成实时编译

html代码

<!DOCTYPE html><html><head><meta chart="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代码

@chart "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预编译后的样式

@chart "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;}