Less基础

最新推荐文章于 2024-06-04 09:58:00 发布

编程老菜鸡

最新推荐文章于 2024-06-04 09:58:00 发布

阅读量297

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_44868492/article/details/121256821

版权

Less介绍

Less （Leaner Style Sheets 的缩写）是一门CSS扩展语言，　也称为CSS预处理器。

Less 使用

新建一个后缀名为.less的文件

Less变量

命名规范
● 必须以@为前缀
● 不包含特殊字符
● 不能以数字开头
● 大小写敏感

// 声明变量  @变量名: 变量值；
@bgc: blue;
@font14: 14px;
div {
  background: @bgc;
  font-size: @font14;
}
span {
	font-size: @font14;
}

Less 编译

vscode Less插件
在这里插入图片描述

Less嵌套

后代选择器

* {
  margin: 0;
  padding: 0;
}
// 1. 后代选择器
.header {
  width: 200px;
  height: 200px;
  background: linear-gradient(skyblue, deeppink);
  text-align: center;
  line-height: 200px;
  a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
  }
}
// 后代选择器
.nav {
	.logo {
		width: 105px;
		height: 43px;
		background: linear-gradient(skyblue, deeppink);
	}
}

伪类选择器

// 2. 伪类选择器
.header {
  width: 200px;
  height: 200px;
  background: linear-gradient(skyblue, deeppink);
  a {
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
  &::after {
    content: '';
    width: 200px;
    height: 200px;
    display: block;
    background: linear-gradient(skyblue, deeppink);
  }
}

Less运算

注意：除法运算需要加小括号

@border: 5px * 5;
@font: 50px;
div {
  border: @border solid skyblue;
  width: 200px - 50;
  height: 200px * 2;
}
.box {
  // width: (80px / 4px);
  // height: (80rem / 4px)
  width: (80 / 50rem);
  height: (80 / 50rem);
}