Less学习

最新推荐文章于 2020-02-18 17:30:58 发布

原创最新推荐文章于 2020-02-18 17:30:58 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Less

Less 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了 LESS CSS 的核心功能，包括变量定义、动态计算值、Mixins 使用、颜色处理函数及如何通过 less.js 实现样式动态更新。LESS 使 CSS 更具维护性和扩展性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

变量 - 它可以让你更轻松的在整个样式表中定义和更改值（这个功能 CSS 在未来某一天也有可能会实现）。
动态计算值 - CSS 中最近出了一个 cal()，但它只适合用于长度的计算。
Mixins - 可以让你重用或者组合样式，而且支持传递参数。
函数 - 它为你提供了一些方便的程序去操纵颜色，转换图像等。

1. 引用文件

<link rel="stylesheet/less" type="text/css" href='style.less'/>
<script src="less.js"></script>

less.js是官网文件，style.less就less代码

2. 可定义变量在.less文件中编写

@color-primary: #5B83AD;
body{
	background-color:@color-primary;
}

3. 可引用定义好的css，并写自己单独样式

.div_test{
	width:50%;
	height:50px;
}
.div_test_1{
     background-color:#fff;
     .div_test
}
.div_test_2{
    background-color:black;
    .div_test
}

4. 嵌套规则

.div_test_3{
	background-color:#fff;
	.div_test_4{
		color:#ff0000;
	}
	.div_test_5{
		color:#00ff00;
	}
}

等同于

.div_test_3{
    background-color:#fff;	
}
.div_test_3 .div_test_4{
    color:#ff0000;
}
.div_test_3 .div_test_5{
    color:#00ff00;
}

5.函数

降低颜色透明度的函数。

@var: #004590;

div{
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}