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. 深入理解C++内存管理机制

    关于C++的内存处理,可分为三大块,分别是: (一)内存管理机制 (二)内存泄露处理 (三)内存回收机制 这篇文章将就(一)内存管理机制 进行深入探讨,如有错误欢迎大家指正. C++的内存管理也可细分 ...

  2. windows下Graphviz安装及入门教程

    下载安装配置环境变量 intall 配置环境变量 验证 基本绘图入门 graph digraph 一个复杂的例子 和python交互 发现好的工具,如同发现新大陆.有时,我们会好奇,论文中.各种专业的 ...

  3. 使用python实现深度神经网络 3(转)

    使用python实现深度神经网络 3 快速计算梯度的魔法--反向传播算法 快速计算梯度的魔法--反向传播算法 一.实验介绍 1.1 实验内容 第一次实验最后我们说了,我们已经学习了深度学习中的模型mo ...

  4. Linux中添加计划任务与Elasticsearch日志自动清理

    一.简述 当日志发送到ELK之后,Elasticsearch随着日志的增加,占用磁盘量会越来越大.这时候,需要我们写角本定期DELETE日志.角本写法,也很简单,只是发送HTTP的DELETE方式到: ...

  5. 【PMP】商业论证与效益管理文件

    ①项目商业论证 定义:文档化的经济可行性研究报告,用来对尚缺乏充分定义的所选方案的收益进行有效性论证,是启动后续项目管理活动的依据. 项目发起人通常负责商业论证文件的制定和维护,项目经理负责提供建议和 ...

  6. 机械臂运动学逆解(Analytical solution)

    计算机器人运动学逆解首先要考虑可解性(solvability),即考虑无解.多解等情况.在机器人工作空间外的目标点显然是无解的.对于多解的情况从下面的例子可以看出平面二杆机械臂(两个关节可以360°旋 ...

  7. linux清除缓存

    linux清除缓存:需要root权限$ sync$ echo 3 >/proc/sys/vm/drop_caches 上面的echo 3 是清理所有缓存 echo 0 是不释放缓存 echo 1 ...

  8. Effective Java 第三版——76. 争取保持失败原子性

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  9. SNF软件开发机器人2018最新更新内容

    SNF软件开发机器人从10月份到现在的更新升级情况如下: 1 表单 表单控件占多列时,宽度默认0,自适应宽度2 excel导出 部分excel导出方法移动到框架中,可通用获取3 生成代码 生成的代码, ...

  10. vue-resource和vue-async-data两个插件的使用

    vue-resource和vue-async-data两个插件的使用,看了一下文档http://cn.vuejs.org/guide/plugins.html#u5DF2_u6709_u63D2_u4 ...