CSS预处理语言-less 的使用
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
Less的编译处理
作为一门CSS预处理语言,它并不像CSS一样能直接使用,而是需要编译后使用,如何编译呢,下面分node 和浏览器端两种情况解释。
浏览器端:
浏览器端使用less,只需要做如下两步:
1.引如Less
使用link标签引入less,需要注意的是 rel="stylesheet/less"
<link rel="stylesheet/less" type="text/css" href="styles.less" />
2.引入less解析用的js文件
<script src="less.js" type="text/javascript"></script>
3.声明解析,要在引入 less.js前进行声明。
<script> less = { env: "development", async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: "comments", relativeUrls: false, rootpath: ":/a.com/" }; </script>
完事,就这么简单,但是 由于编译解析less需要消耗一定的性能,且渲染也会有延迟,所有推荐使用node或其他第三方工具进行编译后使用。
需要注意的是 js文件必须要在less文件后引入。
less.js 下载地址在这里
node端
1. 使用npm安装less
$ npm install -g less
2.编译输出
使用命令行调用less编译器进行编译
$ lessc styles.less
这会输出到stdout编写CSS。将CSS结果保存到所选择使用的文件中
$ lessc styles.less styles.css
输出后你可以使用编译的style.css 啦。
less的使用方法
1.注释
less 的注释分为两种: /* 注释内容 */ 和 // 注释内容 。
/* */ 为块注释 可以注释一行或多行,
// 为行注释,只能注释一行,而且这种注释在编译处理时会被编译掉。
2.变量
less中很方便的一个功能就是定义变量,当css多处用到同一个值的时候,如果不用变量,那么改动它需要改动100处,而使用变量的话,只需要修改变量的值便可以全局修改了,是不是很方便呢。
和PHP类似 变量都是以@开头,无论是定义还是使用,使用如下 :
// 定义变量
@cell_width:100px; //在使用的时候就可以这样使用 .cell{
width:@cell_width;
}
3.混合
和css差别并不大,同样使用 选择器 后 带大括号 的形式,牛逼的是大括号里还可以写 选择器 +大括号 的形式,
在不考虑渲染优化的情况下可以无限套下去,但是考虑到浏览器渲染任务繁重,往往最多只套4层。
.body{
width:100%;
.section{
border:1px solid #000;
}
} /*
解析后的效果是下面这样的
*/
.body{
width:100%;
}
.body .section{
border:1px solid #000;
}
除了套用,还可以引用:
.section{
border:1px solid #000;
}
.body{
width:100%;
.section;
} /* 解析后的效果是下面这样的 */ .body{
width:100%;
border:1px solid #000;
}
除了以上的,还能使用传参,哈哈哈
.border_radius(@radius:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
.cell{
width: 100%;
//可以不传参数,默认用5px
.border_radius(10px)
}
可以说是非常灵活了,随便套随便引。
了解了以上的这些,就可以在实战中使用Less进行项目开发啦!
(完)
CSS预处理语言-less 的使用的更多相关文章
- css预处理语言--让你的css编写更加简单方便
CSS预处理语言之一-------LESS Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Nod ...
- CSS预处理语言
CSS预处理语言 Less,Sass,Stylus 安装 Less yarn add less 运行命令 ./node_modules/.bin/lessc 嵌套规则 Less.Sass嵌套规则一样 ...
- Less:Less(CSS预处理语言)
ylbtech-Less:Less(CSS预处理语言) Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题 ...
- CSS 预处理语言之 less 篇
less 前言 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 安装 客户端使用 // 引入 ...
- css预处理语言的模块化实践
编写css是前端工作中,一项普通而又频繁的劳动,由于css并不是一门语言,所以在程序设计上显得有些简陋.对于小型项目来说,css的量还不至于庞大,问题没有凸显,而如果要开发和持续维护一个较为大型的项目 ...
- LESS,强大的CSS预处理语言
虽然写的css不多,但是我已经切身感觉到了书写css的恶心...抛开最令人烦的浏览器兼容问题不说,这个语言本身就有不少问题. 最简单的,比如多个地方是同一个颜色的,如果可以写在一个样式里还没什么,但是 ...
- CSS预处理语言——less与sass的使用
我们一般所使用的Less跟Sass一般是将其编译成我们所熟悉的CSS再导入使用,当然不经编译,直接在浏览器使用 我是习惯用Koala来进行编译,简单智能方便,Hbuilder也自带编译功能,不过要手动 ...
- CSS 预处理语言之 Scss 篇
简介 1. Sass 和 Scss Sass 和 Scss 其实是同一种东西,我们平时都称之为 Sass:Scss 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强 ...
- css预处理scss环境配置
css 预处理器 CSS 预处理器用一种专门的编程语言,进行 Web css编码,然后再编译成正常的 CSS 文件,以供项目使用:说简单点就是在某个环境下写css 可以写变量.表达式.嵌套等,在通过该 ...
随机推荐
- pandaboard es 制作SD启动卡OMAP4460
1. 本次使用的是chipsee的板子,带屏幕的,先把资料传到Ubuntu的共享目录下 2. 进入共享目录 /mnt/hgfs/ubuntu_share/pandboard_es_linux# 3. ...
- 我们一起学习WCF 第一篇初识WCF(附源码供对照学习)
前言:去年由于工作需要我学习了wcf的相关知识,初期对wcf的作用以及为何用怎么样都是一知半解,也许现在也不是非常的清晰.但是通过项目对wcf的运用在脑海里面也算有了初步的模型.今天我就把我从开始wc ...
- dotweb now released to Version 1.5
dotweb released to Version 1.5!!https://github.com/devfeel/dotweb What's new? 重要:go版本适配升级为1.9+ New f ...
- Ubuntu系统python3版本设置问题
参照:https://blog.csdn.net/wangguchao/article/details/82151372
- POJ-3122(二分算法)
//题意:这是一个分蛋糕的游戏, t个测试数据,输入n, f n代表的是n块蛋糕,蛋糕的高为1, f代表的是f个人朋友,然后输入每份蛋糕的半径 // 将n块蛋糕分成 f+1 份 每一份都是完成的一块蛋 ...
- NO--09今天遇到的一点小问题之axios全局注册
今天用 Vue 写项目的时候,用到 axios ,因为 axios 不能用 Vue.use() ,所以在每个 .vue 文件中使用 axios 时就需要 import , .vue 文件少的话还好说, ...
- 局域网安全-MAC Flood/Spoof
原文发表于:2010-09-22 转载至cu于:2012-07-21 很早之前就看过秦柯讲的局域网安全的视频.但是看了之后在实际工作当中很少用到(指我个人的工作环境中,惭愧啊…),时间长了,好多技术细 ...
- spark的运行方式——转载
本文转载自: spark的运行方式 本文主要讲述运行spark程序的几种方式,包括:本地测试.提交到集群运行.交互式运行 等. 在以下几种执行spark程序的方式中,都请注意master的设 ...
- 常用的不易记忆的css自定义代码
在制作页面时,经常会遇到需要自定义一些标签的默认行为(如:input的占位符等),但这些默认的设置的css一般比较难记住,所以有必要自己做一下记录.下面是我经常用到的一些重设默认行为的css. 1.占 ...
- Is It A Tree?(并查集)
Description A tree is a well-known data structure that is either empty (null, void, nothing) or is a ...