Less 安装及基本用法

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

node.js 的安装

官网：http://nodejs.cn/

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

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

安装与卸载jQuery包（例子）　　安装

　　卸载

安装淘宝镜像

2. 安装less

试一试：

test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css" rel="external nofollow" />
</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);
}

•注释

//单行注释//
/*多行
 注释*/
•引入其他less文件
@import "other.less";

总结

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

赞 (0)

相关推荐

  • Docker安装和基础用法 Docker入门教程第二篇

    Docker安装和基础用法 Docker入门教程第二篇

    本系列文章将介绍Docker的有关知识: (1)Docker 安装及基本用法 (2)Docker 镜像 (3)Docker 容器的隔离性 - 使用 Linux namespace 隔离容器的运行环境 (4)Docker 容器的隔离性 - 使用 cgroups 限制容器使用的资源 (5)Docker 网络 1. 安装 1.1 在 Ubuntu 14.04 上安装 Docker 前提要求: 内核版本必须是3.10或者以上 依次执行下面的步骤: sudo apt-get update sudo apt

  • Less 安装及基本用法

    node.js是一个前端的框架 自带一个包管理工具npm node.js 的安装 官网:http://nodejs.cn/ 在命令行检验是否安装成功 切换到项目目录,初始化了一个package.json文件 安装与卸载jQuery包(例子) 安装 卸载 安装淘宝镜像 2. 安装less 试一试: test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

  • python之openpyxl模块的安装和基本用法（excel管理）

    python之openpyxl模块的安装和基本用法（excel管理）

    前言 openpyxl模块是一个读写Excel 2010文档的Python库,如果要处理更早格式的Excel文档,需要用到额外的库,openpyxl是一个比较综合的工具,能够同时读取和修改Excel文档.其他很多的与Excel相关的项目基本只支持读或者写Excel一种功能. 要对excel进行操作,必须要有能打开excel的软件,这里以wps为例 一.获取wps的安装包并安装 二.excel文档的基本定义 1) 工作薄(workbook):一个EXCEL文件就称为一个工作薄,一个工作薄中可以包含

  • python中Requests请求的安装与常见用法

    目录 一.requests 二.requests安装方式 三.说说常见的两种请求,get和post 1.get请求 2.post请求 四.requests发送请求 五.response 补充:requests中遇到问题 总结 一.requests request的说法网上有很多,简单来说就是就是python里的很强大的类库,可以帮助你发很多的网络请求,比如get,post,put,delete等等,这里最常见的应该就是get和post 二.requests安装方式 $ pip install r

  • [Linux]Mandrake 9.0安装和升级用法

    下面说明Mandrake的安装软件和升级的一些方法,介绍下一些小工具的基本用法,比如urpmi.urpmi.addmedia等.Mandrake90本身只要第一个ISO文件便可通过网络一点点长大,当然你也可以随意增加或删除一些软件,比如用rpmdrake是增加或升级安装,rpmdrake-remove则是删除. 1.当你的计算机本身有Mandrake的iso文件的时候,你可很方便实现.首先把你的iso文件mount到某个目录下,比如我的: 源码: ------------------------

  • Windows系统下PhantomJS的安装和基本用法

    Windows系统下PhantomJS的安装和基本用法

    1.安装 下载网址:http://phantomjs.org/download.html 选择合适的版本.然后解压即可. 环境变量的配置: 进入解压的路径: 例如我是解压在D:\Python\phantomjs-2.1.1-windows\bin,将这个路径编辑在上图的末尾.就可以使用了. 如果刚配置好,在使用的时候,提示环境变量没有配置好的话,不妨重启一下电脑试试. 2 基本用法 引入: from selenium import webdriver # 使用webkit无界面浏览器 drive

  • 理解Docker（1）：Docker安装和基础用法详细介绍

    理解Docker（1）：Docker安装和基础用法详细介绍

    Docker是一个用了一种新颖方式实现的超轻量虚拟机,在实现的原理和应用上还是和VM有巨大差别,专业的叫法是应用容器(Application Container).(我个人还是喜欢称虚拟机) 1. 安装 1.1 在 Ubuntu 14.04 上安装 Docker 前提要求: 内核版本必须是3.10或者以上 依次执行下面的步骤: sudo apt-get update sudo apt-get install apt-transport-https ca-certificates sudo apt

  • Python中文分词工具之结巴分词用法实例总结【经典案例】

    Python中文分词工具之结巴分词用法实例总结【经典案例】

    本文实例讲述了Python中文分词工具之结巴分词用法.分享给大家供大家参考,具体如下: 结巴分词工具的安装及基本用法,前面的文章<Python结巴中文分词工具使用过程中遇到的问题及解决方法>中已经有所描述.这里要说的内容与实际应用更贴近--从文本中读取中文信息,利用结巴分词工具进行分词及词性标注. 示例代码如下: #coding=utf-8 import jieba import jieba.posseg as pseg import time t1=time.time() f=open(&q

  • php轻量级的性能分析工具xhprof的安装使用

    一.前言 有用的东西还是记录下来吧,也方便以后的查询:这次记录一下xhprof的安装使用: xhprof是facebook开源出来的一个php轻量级的性能分析工具,跟Xdebug类似,但性能开销更低, 还可以用在生产环境中,也可以由程序开 关来控制是否进行profile. 二.安装 wget http://pecl.php.net/get/xhprof-0.9.3.tgz tar zxf xhprof-0.9.3.tgz cd xhprof-0.9.3/extension /usr/bin/ph

  • Windows下Anaconda的安装和简单使用方法

    Windows下Anaconda的安装和简单使用方法

    Anaconda is a completely free Python distribution (including for commercial use and redistribution). It includes over 195 of the most popular Python packagesfor science, math, engineering, data analysis. 1.安装anaconda 之前什么都不需要安装,直接在官网下载anaconda,我下载的是P

随机推荐