less基础引用
1.介绍:
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。
2.引用:
(1)首先我们在项目下面新建一个less文件,命名为less.less,里面写入最简单的语法
@base: #000000; p{
background-color:@base;
}
(2)然后在html页面head里面引用该less文件
<link rel="stylesheet/less" type="text/css" href="less.less" />
(3)去 less开源地址 下载less.js文件,然后引入该文件。
<script src="less.js" type="text/javascript"></script>
也可以直接使用CDN的方式引用less.js
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
(4)在引用less.js之前,需要一个less变量,声明编译less的环境参数,所以最终所有引用文件如下:
<link rel="stylesheet/less" type="text/css" href="less.less" />
<script type="text/javascript">
less = {
env: "development",
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
rootpath: ":/a.com/"
};
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
注:less变量的声明必须要在less.js的引用之前
3.less编译成css的编译工具使用方法
(1)less生成css的工具:Koala。首先去官网下载安装文件,安装运行之后得到如下界面:
(2)然后将less所在的目录拖到界面中间,点击Compile按钮。将会在less.less的同级目录下生成一个less.css文件,然后直接引用这个css文件即可(在less.less中编写代码会自动在less.css文件中编译出css代码)
less基础引用的更多相关文章
- java基础-引用数据类型之二维数组(Array)
java基础-引用数据类型之二维数组(Array) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 之前我们学习过了Java的一维数组,所谓的二维数组就是元素是一堆一维数组的数组,换 ...
- java基础-引用数据类型之一维数组(Array)
java基础-引用数据类型之一维数组(Array) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.数组的定义 1>.为什么需要数组 保存一个数据可以定义一个变量,如果要保 ...
- Java基础-引用数据类型之集合(Collection)
Java基础-引用数据类型之集合(Collection) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.为什么出现集合类 面向对象语言对事物的体现都是以对象的形式,所以为了方便 ...
- C++ 基础中的基础 ---- 引用
C++ 基础中的基础 ---- 引用 引用的概念:引用变量是一个别名,也就是说,它是某个已存在变量的另一个名字.一旦把引用初始化为某个变量,就可以使用该引用名称或变量名称来指向变量.比如: int n ...
- Java 基础 引用数据类型 ArrayList集合
引用数据类型(类) 分类 提到引用数据类型(类),其实我们对它并不陌生,如使用过的Scanner类.Random类. 我们可以把类的类型为两种: 第一种,Java为我们提供好的类,如Scanner类, ...
- Java 基础 引用数据类型 和 流程控制
引用数据类型 与定义基本数据类型变量不同,引用数据类型的变量定义及复制有一个相对固定的步骤和格式: 数据类型 变量名 = new 数据类型(); 如:String st = new String(); ...
- css基础 引用方式 标签选择器 优先级 各式布局
今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...
- C++ 基础 引用
1.引用的本质 int b = 10; int &a = b; 等效于: int * const a = &b; 由于 a 是 const声明,所以一旦定义无法修改,所以要在定义时就要 ...
- Django基础(一):基础引用
Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 impor ...
- LinuxC/C++基础——引用
1.引用(Reference) 1.1引用的基本语法 引用是C++对C的重要扩充,也存在与其他一些编程语言中,并不是C++的发明.通过引用,C++增加了 另外一种给函数传递地址的途径,这就是按引用传递 ...
随机推荐
- 以太坊solidity智能合约语言学习资源整理
暂时看到篇文章写的不错,先收集下来,后面有机会自己也整理一个 Solidity语言学习(一)Solidity语言学习(二)——Solidity的安装与编译Solidity语言学习(三)——智能合约编程 ...
- jmeter做bbs作业时提示404错误
在用jemter做bbs作业时候,注册成功后会跳转到主页,在写主页的脚本的时候,将fiddler抓到的url复制到路径下方“/bbs/forum.php”,但是第一次复制的时候在/bbs/forum. ...
- csp-s模拟测试56Merchant, Equation,Rectangle题解
题面:https://www.cnblogs.com/Juve/articles/11619002.html merchant: 二分答案,贪心选前m大的 但是用sort复杂度不优,会T掉 我们只是找 ...
- Python-面向对象之高级进阶
目录 classmethod与staticmethod 面向对象高级 isinstance.issubclass 反射 魔法方法(类内置方法) 单例模式 classmethod与staticmetho ...
- iOS开发CGImage.h简介
1.前因 由于剪切图片用到下面方法,此方法属于CGImage.h中,通过创建CGImageRef像素位图,可以通过操作存储的像素位来编辑图片. /* Create an image using the ...
- 左神算法进阶班3_1构造数组的MaxTree
题目 一个数组的MaxTree定义: 数组必须没有重复元素 MaxTree是一棵二叉树,数组的每一个值对应一个二叉树节点 包括MaxTree树在内且在其中的每一棵子树上,值最大的节点都是树的头 给定一 ...
- css3之背景background-origin,background-clip,background-size
background-origin属性指定了背景图像的位置区域. content-box, padding-box,和 border-box区域内可以放置背景图像. background-clip用来 ...
- 2018-8-10-WPF-鼠标移动到列表上-显示列表图标
title author date CreateTime categories WPF 鼠标移动到列表上 显示列表图标 lindexi 2018-08-10 19:16:51 +0800 2018-2 ...
- linux支持大容量硬盘
1.fdisk使用msdos格式分区,最大支持2T硬盘,要使用大于2T硬盘需使用parted命令使用GPT格式分区. 2.除修改分区格式外,linux内核需添加GPT分区格式支持,修改如下: CONF ...
- js实现事件监听与阻止监听传播
监听事件: 使用attachEvent(用于IE)和addEventListener(用于谷歌.火狐)时则可以实现多个事件处理函数的调用 1.下面都是dom对象的方法,可以实现一种事件绑定多个事件处理 ...