Css预处理器---Less(一)
一、简介:
Less是一种动态样式语言,可以在样式中使用变量,继承,运算,函数
二、使用
(1)客户端使用
//引入您的.less样式文件,rel属性区别去css为stylesheet/less
<link rel="stylesheet/less" type="text/css" href="style.less">
//引入less.js
<script src="less.js" type="text/javascript"></script>
(2)服务端使用
//使用npm安装less
$ npm install -g less
//或最新版本
$ npm install -g less@latest
//命令行使用lessc编译
$ lessc index.less > index.css
(3)在node项目中调用less编译器
//自动调用
var less = require("less");
less.render(".myClass {width : 1 +1; padding : 10}", function (err, css) {
console.log(css)
}) //输出
.myClass {
width : 2;
padding : 10
} //手动调用
var parser = require("less.Parser");
parser.parse(".myClass {width : 1+2}", function (err, tree) {
if(err) {
console.error(err);
} else {
console.log(tree.toCss())
}
})
(4)使用Koala编译器()
Css预处理器---Less(一)的更多相关文章
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
- 关于前端CSS预处理器Sass的小知识!
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- CSS预处理器Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
- Myth – 支持变量和数学函数的 CSS 预处理器
Myth 是一个预处理器,有点类似于 CSS polyfill .Myth 让你写纯粹的 CSS,同时还让你可以使用类似 LESS 和 Sass 的工具.您仍然可以使用变量和数学函数,就像你在其它预处 ...
- CSS 预处理器(框架)初探:Sass、LESS 和 Stylus
现在最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 拿less来说,可以在页面上直接使用less文件,但要引用less.js进行解析:同时也可以直接将less ...
- 为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
- 160907、CSS 预处理器-Less
CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: ...
- CSS预处理器实践之Sass、Less大比拼[转]
什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Cs ...
- CSS预处理器Sass(Scss)、Less、Stylus
CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...
随机推荐
- tfidf_CountVectorizer 与 TfidfTransformer 保存和测试
做nlp的时候,如果用到tf-idf,sklearn中用CountVectorizer与TfidfTransformer两个类,下面对和两个类进行讲解 一.训练以及测试 CountVectorizer ...
- shell脚本之tr命令使用
tr命令用来进行对标准输入的内容做替换.例如 # echo 'HELLO WORLD!!!' | tr "A-Z" "a-z" hello world!!! 这 ...
- odoo权限管理
Odoo的权限的核心是权限组(res_groups).对每个权限组,可以设置权限组的菜单表示,对象表示,记录规则表示,字段表示. 1.菜单/对象级别 设置哪些人可以访问哪些菜单/对象,对象的访问权限包 ...
- LeetCode 852 Peak Index in a Mountain Array 解题报告
题目要求 Let's call an array A a mountain if the following properties hold: A.length >= 3 There exist ...
- Qt::带返回值的信号发射方式
一般来说,我们发出信号使用emit这个关键字来操作,但是会发现,emit并不算一个调用,所以它没有返回值.那么如果我们发出这个信号想获取一个返回值怎么办呢? 两个办法:1.通过出参形式返回,引用或者指 ...
- 8.1-uC/OS-III多任务应用
1.app.c: ( 1) .分别为每个任务分配一个OS_TCB. (2). 斥信号量( mutex)是一个内核对象(一个结构体),用于保护共享资源.任务要访问共享资源就必须先获得 mutex. mu ...
- 前端 HTML 标签嵌套规则
标签嵌套规则 块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素,例如: <div><div></div><h1> ...
- DNS服务基础原理介绍
FQDN 全称域名 localhost(主机名或者是别名).localdomain(域名) FQDN=主机名.域名 根域 . 顶级域名 .com .n ...
- vue中让input框自动聚焦
created(){ this.changfouce(); }, methods: { //在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中, ...
- eclipse 假死
由于电脑关机,导致Eclipse非正常关闭,之后启动Eclipse发现一直启动不起来,于是从网上找了一些方法如下: 1.删除文件.snap 到<workspace>\.metadata\. ...