1. node.js

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

  • node.js 的安装

官网：http://nodejs.cn/

  • 在命令行检验是否安装成功
  • 打开cmd

  • 切换到项目目录，初始化了一个package.json文件
  • 安装与卸载jQuery包（例子）
    • 　　安装
    • 　　卸载
    • 安装淘宝镜像

2. 安装less

试一试：

demo.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <link rel="stylesheet" href="style.css"/>

 </head>

 <body>

 <div id="box">

     <ul>

         <li>你好</li>

         <li>hello</li>

     </ul>

 </div>

 </body>

 </html>

style.less

 #box{

   width:200px;

   height:200px;

   background-color:blue;

   ul{

     color:white;

     li{

       line-height:50px;

     }

   }

 }
  • 在命令行中输入lessc xxx.less xxx.css，如下：

用浏览器打开test.html 看一下效果吧

3. less 的基本用法

https://less.bootcss.com/

  • 变量

     @red:red;
    
 @w:200px;
    
 #big{
    
     width:@w;
    
     height:@w;
    
     background-color:@red;
    
     #small{
    
         width:@w;
    
         height:@w;
    
         background-color:@red;
    
     }
    
 }
    
 p{
    
     color:@red;
    
 }
  • 混合 
     .bt{
    
     width:200px;
    
     height:200px;
    
     border-top:2px solid red;
    
     background-color:red;
    
 }
    
 #big{
    
     .bt;
    
     #small{
    
         .bt;
    
     }
    
 }
  • 嵌套 
     #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;
    
         }
    
     }
    
 }
  • 运算 
     @color:#333;
    
 #box{
    
     width:100%;
    
     height:60px;
    
     background-color:@color+#111;
    
 }
  • calc()
  • @var:50vh/2;
    
#box{
    
    width:calc(50% + (@var - 20px));
    
}
  • 固定函数 
     @base:#f04615;
    
 @width:0.5;
    
 #box{
    
     width:percentage(@width);
    
     color:saturate(@base,5%);
    
     background-color:spin(lighten(@base,25%),8);
    
 }
  • 注释 
     //单行注释//
    
 /*多行
    
   注释*/

 //  @base:#f04615;   

 /* @width:0.5;
    
 #box{
    
     width:percentage(@width);
    
     color:saturate(@base,5%);
    
     background-color:spin(lighten(@base,25%),8);
    
 }
    
 */
  • 引入其他less文件 
    @import "other.less";

less的安装与用法的更多相关文章

  1. pycharm的安装及用法

    俗话说的好:"工欲善其事,必先利其器",程序员写代码,肯定不能在编译器里面写,这有一个全宇宙最好的python编译器,叫做pycharm ,他的优点呢,大家可以看一下: 优点:1, ...

  2. HBuilder的安装及用法

    一,简介HBuilder 1.1,什么是Hbuilder? HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.HBuilder的编写用到了Java.C.Web和Ru ...

  3. Git 安装及用法 github 代码发布 gitlab私有仓库的搭建

    版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统. 这个版本控制软件,有 svn还有git,是一个工具. git是由linux的作者开发的 git是一个分布式版本控制系统 ...

  4. you-get 安装和用法

    以windows为例 安装 从https://github.com/soimort/you-get/releases/latest下载*-full.7z,解压后在cmd中切换至目录下执行you-get ...

  5. youtube-dl 安装和用法

    以windows为例 下载python2最新版本并安装,选择添加到PATH 下载ffmpeg最新版本并解压,在控制面板->高级系统设置->环境变量->PATH里添加解压之后的bin文 ...

  6. crontab安装和用法（定时任务）

    crontab命令常见于Unix和Linux的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于"crontab"文件中,以供之后读取和执行.通常 ...

  7. Linux下redis的安装及用法

    1.下载源代码包redis-2.8.21.tar.gz,并将其上传到指定文件夹/urs/src,然后对其进行解压: [root@Slave1pc src]# tar -xvf redis-2.8.21 ...

  8. cmake命令 安装、用法简介

    前言 cmake是kitware公司以及一些开源开发者在开发几个工具套件(VTK)的过程中所产生的衍生品.后来经过发展,最终形成体系,在2001年成为一个独立的开放源代码项目.其官方网站是www.cm ...

  9. Chrome插件安装和用法

    XPath Helper 下载插件,拖入chrome://extensions/ 使用方法:ctrl+shift+x呼出 JSONView的使用: 安装JSONView插件 下载插件,拖入chrome ...

随机推荐

  1. MySQL体系结构图详解

    体系结构图如下: 连接层 思想为解决资源的频繁分配﹑释放所造成的问题,为数据库连接建立一个“缓冲池”.原理预先在缓冲池中放入一定数量的连接,当需要建立数据库连接时,只需从“缓冲池”中取出一个,使用完毕 ...

  2. TFS online build change web.config

    概要 TFS online 自动编译时如何修改web.config ref:https://dustinoprea.com/2016/05/06/using-tokenization-token-re ...

  3. Docker入门 - 004 Docker 容器使用

    Docker 客户端 docker 客户端非常简单 ,我们可以直接输入 docker 命令来查看到 Docker 客户端的所有命令选项. docker 可以通过命令 docker command -- ...

  4. Android Studio打包过程和应用安装过程

    三个部分,检查项目和读取基本配置,Gradle Build,Apk Install和LaunchActivity. 应用安装到手机,会复制APK安装包到data/app目录下,解压并扫描安装包,把de ...

  5. Centos7.4 安装Docker

    一.安装docker yum install -y docker 二.启动docker服务 systemctl start docker 三.设置成开机启动docker服务 systemctl ena ...

  6. apache中如何调用CGI脚本

    参考: http://www.jdon.com/idea/cgi.htm http://www.jb51.net/article/49069.htm 在Apache在配置对CGI的支持 LoadMod ...

  7. 【温暖】文龙回AICODER给老马送锦旗了

    又是一个愉快的周末,AICODER第一批老学员文龙小伙伴.已经工作两个月,而且就业薪资12000+,文龙从之前月薪不足4000,一下子翻了三倍多的工资. 几个月的实习,让文龙掌握了大前端全栈的技术,在 ...

  8. 磁盘 I/O 优化

    磁盘 I/O 优化 1. 性能检测 我们的应用程序通常都需要访问磁盘系统,而磁盘 I/O 通常都很耗时, 要判断 I/O 是否是一个瓶颈,有一些参数指标可以参考. 我们可以压力测试应用程序看系统的 I ...

  9. ubuntu下core file文件生成及调试

    1.简介:corefile 是Linux下程序崩溃时生成的文件,可以用来分析程序崩溃的原因,因为它内部包含了程序崩溃时的堆栈信息. 2.corefile的设置 默认情况下,程序崩溃是不会生成coref ...

  10. Thrift关键字

    在编译thrift文件的时候发现报了如下的错误 Cannot use reserved language keyword: "class" 后来查了一下,发现class是thrif ...