css less使用
程序员文章站
2022-07-03 08:49:30
...
less
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。
自己的理解:
Less是一门动态CSS语言,使得CSS样式更加灵活地作用于Html标签。如果没有Less,我们要对样式做一些逻辑计算的时候只能依靠Js去实现,有了Less之后,可以方便地动态给Html标签设置样式。比如一个最常见的需求,在当前浏览器的需要多次引用同一个重复的属性值时候,使用less设置变量就可以轻松的解决,并且可以大大的减少了后期修改属性的工作量,我们只需修改这个变量的值即可。
使用方法
1.直接在html页面引用.less文件,然后借助less.js去编译less文件动态生成css样式而存在于当前页面。
2.首先写好.less文件的语法,然后借助工具生成对应的.css文件,然后客户端直接引用.css文件即可。
下面演示用less.js编写less代码的方式
1.首先新建一个less文件,已.less的后缀命名。
2.然后在html页面head里面引用该less文件
3.直接使用CDN的方式引用less.js
4.在引用less.js之前,需要一个less变量,声明编译less的环境参数,所以最终所有引用文件如下:
<link rel="stylesheet/less" type="text/css" href="~/Content/less.less" />
<script>
//编写一个简单的less代码
@base: #f938ab; //以 @ + 变量名 的方式声明变量
div{
background-color:@base; //可以@+变量名 直接调用
padding:50px;
}
</script>
<script type="text/javascript">
//less变量的声明必须要在less.js的引用之前
less = {
env: "development",
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
rootpath: ":/a.com/"
};
</script>
//cdn的方式引入less.js
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
//下面演示运用软件的方式编写less代码 下面使用的是Koala
打开软件是以下界面:
然后将less所在的目录拖到界面中间
直接Compile按钮。将会自动将less代码解析成css代码并生成一个less.css文件,最后将less.css文件引入html页面即可。
上一篇: 针对ASP.NET Core Web API的先进架构
下一篇: 动态规划之石子合并