Less 安装及基本用法

前端之家收集整理的这篇文章主要介绍了Less 安装及基本用法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_502_0@node.js是一个前端的框架 自带一个包管理工具npm


@H_5020@node.js 的安装


@H
502_0@官网:http://nodejs.cn/


<p style="text-align: center">


<p style="text-align: center">


<p style="text-align: center">


@H_502_0@在命令行检验是否安装成功


<p style="text-align: center">


@H_502_0@切换到项目目录,初始化了一个package.json文件


<p style="text-align: center">


@H_502_0@安装与卸载jQuery包(例子)  安装


<p style="text-align: center">


@H_502_0@  卸载

<p style="text-align: center">


@H_5020@安装淘宝镜像


@H
502_0@


@H_502_0@2. 安装less


<p style="text-align: center">


<p style="text-align: center">


@H_5020@试一试:


@H
502_0@test.html


<div class="jb51code">
<pre class="brush:js;">
<!DOCTYPE html>
<html lang="en">

<Meta charset="UTF-8"> Title
Box">
  • 你好
  • hello
@H_502_0@style.less

Box{ width:200px; height:200px; background-color:blue; ul{ color:white; li{ line-height:50px; } } }
@H_502_0@在命令行中输入lessc xxx.less xxx.css,

@H_502_0@如下:

@H_502_0@用浏览器打开test.html 看一下效果吧3. less 的基本用法

@H_502_0@https://less.bootcss.com/

@H_502_0@变量

@H_502_0@混合

@H_502_0@•嵌套

Box{ width:100%; height:60px; background-color:#ccc; h3{ width:100%; height:20px; background-color:yellow; } ul{ list-style:none; li{ height:40px; line-height:40px; float:left; padding:0 10px; } } }
@H_502_0@•运算

Box{ width:100%; height:60px; background-color:@color+#111; } •calc() @var:50vh/2; #Box{ width:calc(50% + (@var - 20px)); }
@H_502_0@•固定函数

Box{ width:percentage(@width); color:saturate(@base,5%); background-color:spin(lighten(@base,25%),8); }
@H_502_0@•注释

文件 @import "other.less";
@H_502_0@

总结

@H_502_0@以上所述是小编给大家介绍的Less安装及基本用法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

猜你在找的JavaScript相关文章