less入门及基础学习(建议有css基础)
本文整理自:Less:优雅的写css代码
原文写的很好,也很清晰,本文为个人整理方便个人对知识进行汇总整理!(个人建议原地址博文)
css是不能够定义变量的,也不能嵌套。它没有编程语言的特性。在项目开发中,常常发现有很多css代码是相同的,但我们通常都是复制然后粘贴。
举个例子:假设h5应用里主题色是#FF3A6D
,可能用于文字或者背景色。通常开发中,哪里需要这个颜色,我们就复制这个颜色并粘贴。下次要修改就得全部查找批量替换,其实不是很方便。
本文即将介绍的less将让我们更快更方便的编写css代码。
Less是什么
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。
less使用.less
作为文件后缀。通过第三方工具,可以一键或者实时编译成对应的css文件。
示例:
demo.less
@base: #f938ab;/*定义变量*/
.box {color: @base; border-color: lighten(@base, 30%); /*使用函数*/ /*嵌套*/ &-content{ width:100%; } .title{ color:#ccc; } }
通过第三方工具,编译后生成:
demo.css
.box {color: #f938ab;border-color: #fdcdea; } .box-content { width: 100%; } .box .title { color: #ccc; }
实际项目中,我们编辑的是.less
文件,但引用时依旧像往常一样引用.css
文件。通过第三方工具(例如Koala),可以实现.less
文件一发生改变,就生成同名的.css
文件。后文有介绍,等不及的同学可以先去看看怎么编译成css文件,再返回来看less相关特性和例子。
语言特性
由于less文件本身就是文本,所以不用特别安装什么编辑器,通常的代码编辑器都能进行编辑。推荐使用sublime text
(建议安装插件Less
,以支持less语法高亮)。
变量
使用@
符号定义。例如:
@base: #f938ab;
.box {color: @base; /*变量引用*/ }
变量的作用就是把值定义在一个地方(或一个文件里,通过@import
导入),然后在各处使用,这样能让代码更易维护。
变量也支持URLs:
// Variables
@images: "../img";// 用法
body { color: #444; background: url("@{images}/white-sand.png"); }
属性也支持变量的形式:
@property: color;.widget {@{property}: #0ee;background-@{property}: #999; }
混合(Mixin)
混合就是前面定义的一个样式,后文可以直接引用。示例:
@base: #f938ab;
.ellipsis_txt {display: -webkit-box;-webkit-line-clamp: 2; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-box-orient: vertical; } .box { color: @base; .ellipsis_txt; /*或者 .ellipsis_txt(); */ }
括号是可选的。
嵌套
可以在一个css里有多个css块,以方便我们更好的组织代码,编写css模板。
#header {color: black;.navigation {font-size: 12px; } .logo { width: 300px; } }
生成:
#header {color: black;
}
#header .navigation {font-size: 12px; } #header .logo { width: 300px; }
还支持&
符号:
#header {color: black;&-navigation {font-size: 12px;}&-logo {width: 300px; } &:hover{ color:#ccc; } }
生成:
#header {color: black;
}
#header-navigation {font-size: 12px; } #header-logo { width: 300px; } #header:hover { color: #ccc; }
运算
任何数字、颜色或者变量都可以参与运算。下面是一组案例:
@base: 5%;
@filler: @base * 2; @other: @base + @filler; color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler;
示例:
@var: 1px + 5;
div{width:@var; }
输出:
div {width: 6px;
}
函数
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在函数手册中有详细介绍。
函数的用法非常简单。下面这个例子将介绍如何将 0.5 转换为 50%,将颜色饱和度增加 5%,以及颜色亮度降低 25% 并且色相值增加 8 等用法:
@base: #f04615;
@width: 0.5;.class { width: percentage(@width); // returns `50%` color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8); }
编译生成:
.class {width: 50%;color: #f6430f; background-color: #f8b38d; }
命名空间
有时候,你可能为了更好组织 CSS 或者单纯是为了更好的封装,将一些变量或者混合模块打包起来,一些属性集之后可以重复使用。
示例:
/*模块*/
#bundle {.button {display: block;border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { /**/ } .citation { /**/ } } /*下面复用上面的一部分代码*/ #header a { color: orange; #bundle > .button; }
编译生成:
#bundle .button {display: block;border: 1px solid black; background-color: grey; } #bundle .button:hover { background-color: white; } #bundle .tab { /**/ } #bundle .citation { /**/ } /*下面复用上面的一部分代码*/ #header a { color: orange; display: block; border: 1px solid black; background-color: grey; } #header a:hover { background-color: white; }
LESS中的命名空间,属于高级语法,在日常项目中应用比较广泛。我们可以用LESS中的命名空间为自己封装一些日常比较常用的类名,以便以后做项目的时候更有效率。
作用域
子类里面的优先,找不到才往父类里找。
示例:
@var: red;#page {@var: white;#header {color: @var; // 这里值是white } }
也不会因为变量后面定义而影响作用域:
@var: red;#page {#header {color: @var; // white } @var: white; }
和上面的例子是一样的。
注释
css仅支持块注释。less里块注释和行注释都可以使用:
/* 一个注释块
style comment! */
@var: red;// 这一行被注释掉了!
@var: white;
导入
和css一样,你可以导入一个 .less
文件,此文件中的所有变量就可以全部使用了。如果导入的文件是 .less
扩展名,则可以将扩展名省略掉:
@import "library"; // library.less
@import "typo.css";
函数参考
这些平常应该用的不多吧。
color(string) 解析颜色,将代表颜色的字符串转换为颜色值
convert(value,unit) 将数字从一种单位转换到另一种单位.第一个参数为带单位的数值,第二个参数为单位.
ceil(number)向上取整
floor(number)向下取整
percentage(number)将浮点数转换为百分比字符串
round(number)四舍五入取整
sqrt(number)计算一个数的平方根,并原样保持单位
pow(number,number)设第一个参数为A,第二个参数为B,返回A的B次方. mod(number,number)返回第一个参数对第二参数取余的结果. min(value1, ..., valueN)返回一系列值中最小的那个. max(value1, ..., valueN)返回一系列值中最大的那个. abs(number)计算数字的绝对值,并原样保持单位 sin(number)正弦函数 cos(number)余弦函数 asin(number)反正弦函数.返回以弧度为单位的角度,区间在 -PI/2 到 PI/2之间. acos(number)反余弦函数.区间在 0 到 PI之间. tan(number)正切函数 atan(number)反正切函数 pi()返回圆周率 π (pi) isnumber(value)如果待验证的值为数字则返回 true,否则返回 false isstring(value)如果待验证的值是字符串则返回 true,否则返回 false iscolor(value)如果待验证的值为颜色则返回 true,否则返回 false
更多:http://less.bootcss.com/functions/
如何编译
第三方的编译工具有很多,下面列举常用的。
命令行lessc
官网:http://lesscss.org
github:http://github.com/less/less.js
需要先安装node.js。
安装好nodejs后,在命令行输入:
npm install -g less
以安装lessc。
安装 Less 后,就可以在命令行上调用 Less 编译器了,如下:
lessc styles.less
这将输出编译之后的 CSS 代码到stdout
,你可以将输出重定向到一个文件:
lessc styles.less > styles.css
若要输出压缩过的 CSS,只需添加 -x 选项:
lessc styles.less > styles.css -x
如果希望获得更好的压缩效果,还可以通过 --clean-css
选项启用 Clean CSS
进行压缩,需要先安装好插件:
npm install -g less-plugin-clean-css
执行 lessc
且不带任何参数,就会在命令行上输出所有可用选项的列表。
lessc
暂不支持实时编译。
Koala
官网:http://koala-app.com/index-zh.html
下载:https://pan.baidu.com/s/1o7wLvPg
使用Koala是因为它是个客户端,更简单。更重要的,还能实时编译,这对于实际开发很有帮助。
koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。
使用起来很简单,只需要将less文件所在的目录拖到软件工作窗口,选择需要编译的less文件就行了。只要你改动less文件里的代码,就会自动生成同名的css文件。速度非常快。感兴趣的可以下载试试。
Sublime Text 2 & 3
Less-sublime:less语法高亮
lessc:Less 即时保存编译 CSS 插件
HBuilder
官网:http://www.dcloud.io/
一款国人开发的很不错的代码编辑器,基于eclipse,前端的同学建议下载。
号称:飞速编码的极客工具,手指爽,眼睛爽。支持php、jsp、ruby、python、nodejs等web语言,less、coffee等编译型语言。代码提示功能真的很强大。
该软件默认安装了less4j,支持实时将less文件编译成同名的css文件。对less的代码提示是我见过最强大的,变量什么的都会提示。
Notepad++
仅支持语法高亮。
Less.js 语法高亮,by azrafe7
Less.js 语法高亮, by Raúl Salitrero
gulp
同样需要先安装node.js。
然后安装:
npm install --save-dev gulp
接着安装less插件:
npm install gulp-less --save-dev
开始任务配置:
gulpfile.js
var gulp = require('gulp');
var less = require('gulp-less'); gulp.task('doless', function () { return gulp.src('css/*.less') .pipe(less()) .pipe(gulp.dest('build')); }); gulp.task('watch', function () { gulp.watch('css/*.less', ['doless']); });
在命令行执行:
gulp watch
我们现在去编辑css/demo.less
文件,会自动在build目录生成demo.css
文件。
更多less编译工具查看:http://less.bootcss.com/usage/#guis-for-less
转载于:https://www.cnblogs.com/renmengkai/p/9861404.html
less入门及基础学习(建议有css基础)相关推荐
- MySQL基础入门到精通学习教程汇总【基础+高级完整版】
MySQL是最流行的关系型数据库管理系统之一,这也是我们为什么要学习MySQL数据的库的原因之一,就连非互联网行业的人士也在开始学习MySQL去分析数据. 对于程序员来说,MySQL数据库更是需要熟练 ...
- CSS学习笔记(一) CSS基础+CSS3新特性
思维导图 文章目录 思维导图 1. CSS 简介 2. CSS 引入方式 2.1 行内样式表 2.2 内部样式表 2.3 外部样式表 2.4 CSS 引入方式总结 3. CSS 选择器 3.1 CSS ...
- CSS基础学习三:CSS语法
CSS语法分为基础语法和高级语法. 一CSS 基础语法 (1)CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明,请使用花括号来包围声明. selector {declarat ...
- 学习python需要什么基础-学习python需要什么基础
Python编程基础知识的学习最终目的是应用于项目中,因此,项目实战训练必不可少.下面小编给大家介绍学习python需要什么基础,一起来看看吧. 学习python需要掌握的基础 1.要有决心 做任何事 ...
- 学习python需要什么基础-学习Python需要哪些基础知识?
今天是腊月二十七,给各位朋友拜个早年! Python学习可以分为几个阶段,入门.进阶.应用. 先说说入门需要哪些基本的知识储备. Python因为易于学习的特点,入门很简单,掌握基本的Python知识 ...
- 学习python需要什么基础-学习python需要什么基础吗?老男孩Python
在很多人的记忆中python是一门非常简单的编程语言,也是很多转行人员的首选,不过因为大家对python不是很了解,所以比较关心学习python需要什么基础?其实python没有基础也是可以学习的,只 ...
- 学python需要什么基础-学习python需要什么基础
Python编程基础知识的学习最终目的是应用于项目中,因此,项目实战训练必不可少.下面小编给大家介绍学习python需要什么基础,一起来看看吧. 学习python需要掌握的基础 1.要有决心 做任何事 ...
- 学python需要什么基础-学习Python需要哪些基础知识?
今天是腊月二十七,给各位朋友拜个早年! Python学习可以分为几个阶段,入门.进阶.应用. 先说说入门需要哪些基本的知识储备. Python因为易于学习的特点,入门很简单,掌握基本的Python知识 ...
- 计算机应用基础意见建议,《计算机应用基础》教学建议
<计算机应用基础>教学建议 (4页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 9.9 积分 <计算机应用基础>教学建议一. 教学 ...
- python基础学习_转行零基础该如何学习python?很庆幸,三年前的我选对了
这似乎是一个如荼如火的行业,对于一直在思考着转行的我,提供了一个不错的方向. 这个行业当然就是python程序员,真正开始决定转行是在24岁的时候,到现在已经有三年多了,我从零开始,每天用业余两个小时 ...
最新文章
- HP 服务器使用 SmartStart CD 引导安装 windows 2008 操作系统
- 005-OSI七层模型IP地址
- 2021贵州毕节高考成绩查询,2021贵州毕节选调生考试排名查询入口-时间(已开通)...
- asp.net之request获取数据
- JavaScript 创建数组
- 铁钉的blog地址 http://nails.blog.51cto.com
- 特征提取(Feature Detection)之——HOG (Histogram of Oriented Gradient)特征
- 使用MAP文件快速定位程序崩溃代码行(转)
- PDF 合并软件要收费?程序员自己做一个
- Lucene 与 Elastic
- 使用POI转换word doc文件
- 设计模式之笔记--建造者模式(Builder)
- 频繁分配释放内存导致的性能问题的分析
- 等价类划分测试—身份证
- hdoj3709(数位dp)
- 如何给抖音视频选择配乐?音乐是抖音作品重要的组成部分
- Java.Canvas
- [BZOJ 1778][Usaco2010 Hol]Dotp 驱逐猪猡
- 黄金期货对比现货黄金有哪些优势
- html5课件动画制作,从此再也不担心课件/动画的开发了!
热门文章
- java cap是什么_寒冬面试归来总结最新蚂蚁4面(Java):CAP+数据强一致性+分布式等...
- 阿里云智能数据构建与管理 Dataphin公测,助力企业数据中台建设
- Lubuntu 18.10仍有可能支持32位PC
- rabbitMQ 常用api翻译
- iOS开发-面试总结(十五)
- mysql数据库,当数据类型是float时,查询居然查询不出数据来
- ORA-09925: Unable to create audit trail file 在DBCA时
- 纯数学教程 Page 325 例LXVIII (15) 调和级数发散
- React中的高阶组件
- python jpg 压缩因子_IOS图像2之jpg、png图片保存、互转、设置有损压缩因子