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. ABAP WB01 BDC ”No batch input data for screen & &“ ”没有屏幕 & & 的批输入数据“

    公司今年计划大批扩建门店,需要自动化维护相关主数据,其中就有一步通过调用 WB01的BDC录屏来自动创建地点,前台跑没有问题,但后台JOB死活不行,屏幕是以前同事录好的,只能硬着头皮修改. 后台任务日 ...

  2. MyBatis项目快速搭建及MySQL一个Statement支持多条命令参数

    一.简述 本文以笔记的形式,记录一个基本Mybatis项目的使用,方便后期项目使用到相关配置时直接复制使用. 二.项目结构 pom.xml中的依赖 <!-- https://mvnreposit ...

  3. [转] 阿里研究员谷朴：API 设计最佳实践的思考

    API是软件系统的核心,而软件系统的复杂度Complexity是大规模软件系统能否成功最重要的因素.但复杂度Complexity并非某一个单独的问题能完全败坏的,而是在系统设计尤其是API设计层面很多 ...

  4. 20151224今天发现到的两篇关于CSS架构、可复用可维护CSS和CSS学习提升能有改变思想观念意识的文章 分别是CSS架构目标和说说CSS学习中的瓶颈

    多讲一个,CSS全称是什么?CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表又被我们称为CSS样式,CSS样式又被作为一种能制作出各种样式网页的技术 ...

  5. Install Redis 3.2 on Ubuntu

    Install Redis 3.2 on Ubuntu It’s very easy to install Redis 3 on Ubuntu 16, just need to add PPA rep ...

  6. SNF快速开发平台成长史V4.5-Spring.Net.Framework-SNF软件开发机器人

    SNF快速开发平台成长史 SNF框架CS\BS 视频教程 https://pan.baidu.com/s/1dFegFKX SNF开发机器人教程:链接:https://pan.baidu.com/s/ ...

  7. vue移动端flexible.js结合Muse-ui使用和vux的小坑

    因为公司有个项目有webapp的需求,在前期准备的期间考虑过使用ionic,毕竟该项目web端的框架使用的是Angular,项目组的人也都比较熟悉,但是我们毕竟只是做个移动的网页,不想用ionic那么 ...

  8. npm WARN React-native@0.35.0 requires a peer of react@~15.3.1 but none was installed.

    解决方案: 方法一: npm install -save react@~15.3.1 方法二:在package.json中可以添加依赖 "dependencies": { &quo ...

  9. mac中安装lua5.1.5

    lua有一个工具lua-releng( https://github.com/openresty/openresty-devel-utils/blob/master/lua-releng) 用来检测代 ...

  10. 以太坊客户端Geth命令用法-参数详解【转载】

    原文链接:http://www.cnblogs.com/tinyxiong/p/7918706.html Geth在以太坊智能合约开发中最常用的工具(必备开发工具),一个多用途的命令行工具.熟悉Get ...