less预处理

最新推荐文章于 2024-05-07 09:34:04 发布

知青先生

最新推荐文章于 2024-05-07 09:34:04 发布

阅读量347

点赞数

分类专栏： # H5 文章标签： 1024程序员节

浩明

本文链接：https://blog.csdn.net/YHM_MM/article/details/109017143

版权

H5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Less官方中文网站

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

文章目录

- 工具

工具

Hduilder X 下载less预编译器
设置预编配置文件改成实时编译
在这里插入图片描述

koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

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;
}

知青先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
less预处理

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

扫一扫