欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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
打开软件是以下界面:
css less使用
然后将less所在的目录拖到界面中间
css less使用直接Compile按钮。将会自动将less代码解析成css代码并生成一个less.css文件,最后将less.css文件引入html页面即可。