less视频笔记

最新推荐文章于 2024-06-12 11:20:23 发布

@追求卓越

最新推荐文章于 2024-06-12 11:20:23 发布

阅读量251

点赞数 1

分类专栏： Less 文章标签： less css css3

本文链接：https://blog.csdn.net/weixin_52519753/article/details/121866523

版权

Less 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

less

1. 软件

在没有node的情况下,用考拉编译软件

http://koala-app.com/

考拉软件(1. 是一款实时编译的软件,就是改动less,就立马改css,然后显示到xxx.html之中;2.编译的输出方式有normal不压缩模式,还有compress压缩模式)

1.在这个文件里面拖拽整个less的目录,之后会在css目录生成css文件(牢记)

2.less是开发时候方便,最终在项目之中用得是css文件

2. 注释

// less的注释

/*看得见的注释*/

3. 变量

@redcolor:pink;
@m:#one;
@w:width;
*{
	margin:0;
	padding: 0;
}
// 
@{m}{
				@{w}: 100px;
				height: 100px;
				background-color: aqua;
				.two{
					width: 50px;
					height: 50px;
					background-color: @redcolor;
				}
			}

属性值,属性,选择器,url都可以成为变量,在使用的时候属性和选择器和url应该是@{变量名}

属性和选择器比较少用

4. 变量的延迟加载

#one{
    @sum:2s;
	math:@sum;//5
	@sum:5s;
}

变量具有变量提升作用和同名覆盖作用

5. 选择器嵌套的级别关系

*{
	margin:0;
	padding: 0;
}
// 
#one{
				width: 100px;
				height: 100px;
				background-color: aqua;
				.two{
					width: 50px;
					height: 50px;
					background-color: @redcolor;
					:hover{
						background-color: brown;
					}
				}
			}

生成后的代码
#one .two {
  width: 50px;
  height: 50px;
  background-color: #ffc0cb;
}
#one .two :hover {
  background-color: brown;
}

.two :hover之间多了一个空格变成了父子关系,这样是无效的

*{
	margin:0;
	padding: 0;
}
// 
#one{
				width: 100px;
				height: 100px;
				background-color: aqua;
				.two{
					width: 50px;
					height: 50px;
					background-color: @redcolor;
					&:hover{
						background-color: brown;
					}
				}
			}
生成之后
#one .two {
  width: 50px;
  height: 50px;
  background-color: #ffc0cb;
}
#one .two:hover {
  background-color: brown;
}

这样.two :hover就是同级的,这样就是有效的

6. 当两个盒子样式重复的时候:

<div id="one">
			<div class="two">
				
			</div>
			<div class="there">
				
			</div>
		</div>

@redcolor:pink;
.cf(){
		width: 50px;
		height: 50px;
		background-color: @redcolor;
}

*{
	margin:0;
	padding: 0;
}
// 
#one{
				width: 100px;
				height: 100px;
				background-color: aqua;
				.two{
					.cf;
				}
				.there{
					.cf;
				}
			}

在less的.cf加上()是为了不在css出现.cf的东西这种叫不带输出混合;在css出现.cf的是普通混合

7. 带参数混合

@redcolor:pink;
.cf(@a,@b){
		width: @a;
		height: @b;
		background-color: @redcolor;
}

*{
	margin:0;
	padding: 0;
}
#one{
				width: 100px;
				height: 100px;
				background-color: aqua;
				.two{
					.cf(12px,30px);
				}
				.there{
					.cf(24px,67px);
				}
			}

* {
  margin: 0;
  padding: 0;
}
#one {
  width: 100px;
  height: 100px;
  background-color: aqua;
}
#one .two {
  width: 12px;
  height: 30px;
  background-color: #ffc0cb;
}
#one .there {
  width: 24px;
  height: 67px;
  background-color: #ffc0cb;
}

8. 默认参数的混合

@redcolor:pink;
.cf(@a:10px,@b:12px){
		width: @a;
		height: @b;
		background-color: @redcolor;
}

*{
	margin:0;
	padding: 0;
}
// 
#one{
				width: 100px;
				height: 100px;
				background-color: aqua;
				.two{
					.cf(12px,30px);
				}
				.there{
					.cf();
				}
			}

* {
  margin: 0;
  padding: 0;
}
#one {
  width: 100px;
  height: 100px;
  background-color: aqua;
}
#one .two {
  width: 12px;
  height: 30px;
  background-color: #ffc0cb;
}
#one .there {
  width: 10px;
  height: 12px;
  background-color: #ffc0cb;
}

9. 实参传值形参

.cf(@a:19px,@b:34px,@color:pink){
		width: @a;
		height: @b;
		background-color: @color;
}

*{
	margin:0;
	padding: 0;
}
// 
#one{
				width: 100px;
				height: 100px;
				background-color: aqua;
				.two{
					.cf(12px,30px);
				}
				.there{
					.cf(@color:red);//
                    这一行可以在第一个实参参数就把值传给形参的第三个参数
				}
			}

笔记心得:1. 变量前面加@cf,参数前面加.cf()

.cf()的作用可以把重复代码包起来,进行封装使用

10. css三角形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#one > .sjx{
				width: 1px;
				height: 1px;
				border: 20px solid;
				border-color: transparent transparent transparent red;
			}
//transparent透明的
		</style>
	</head>
	<body>
		<div id="one">
			<div class="sjx"></div>
		</div>
	</body>
</html>

请添加图片描述

梯形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#one > .sjx{
				width: 15px;
				height: 15px;
				border: 20px solid;
				border-color: brown brown brown red;
                // overflow: hidden;//低版本的浏览器要用
			}
		</style>
	</head>
	<body>
		<div id="one">
			<div class="sjx"></div>
		</div>
	</body>
</html>

在这里插入图片描述

11. 文件模块引用

文件名 triangle.less

.triangle(@color){
	width: 0px;
	height: 0px;
	border: 20px solid;
	border-color: brown brown brown @color;
}

文件名 sjx.less

@import "./triangle.less";

#one>.sjx{
	.triangle(red);
}

文件名 html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/sjx.css"/>
	</head>
	<body>
		<div id="one">
			<div class="sjx"></div>
		</div>
	</body>
</html>

@import “文件路径”

12. 加法运算

#one >.sjx{
	width: (100+100px);
	height: (100+10px);
	background-color: blueviolet;
}

运算可以只需要一个数字有单位就可以了

#one > .sjx {
  width: 200px;
  height: 110px;
  background-color: blueviolet;
}

13. 继承样式

#wrap{
	position:relative;
	width: 300px;
	height: 300px;
	border: 1px solid red;
	margin: 0 auto;
	.inner{
		margin-left: 45px;
		&:nth-child(1){
			width: 100px;
			height: 100px;
			background-color: pink;
		}
		&:nth-child(2){
			width:50px;
			height: 50px;
			background-color: blue;
		}
	}
}
*{
	margin:0;
	padding: 0;
}

:nth-child(x)x是指第几个孩子从一开始,margin-left: 45px;这一句代码是两个.inner的公共样式.他们都可以使用到.

14. 嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

嵌套在里面就是子代选择器,加了&就是同级选择器

15.映射

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

.button {
  color: blue;
  border: 1px solid green;
}

16. 作用域

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

17. calc()

#wrap{
	width:~"calc(100% - 50px)";
	height: 50px;
	background-color: pink;
}

calc()是用于不同单位之间的运算的是动态计算的,他是在浏览器上进行计算(结合width的100%的实际情况进行计算)的,不是在css上进行计算的.

官网