每天一个小知识点1(less整理)
来源:互联网 发布:消除噪音软件 编辑:程序博客网 时间:2024/05/16 07:44
less整理
css并不能称之为一门真正的编程语言,我们一般称之为样式层叠表 (有种编程原则为DRY don't repeat yourself)
css文件比较麻烦的地方--充斥大量的重复定义(程序员的噩梦),不但编写的时候难组织,代码量大,随着以后规模扩大二次开发的问题更明显 最明显的一点就是无法定义变量供我们重复使用还有命名空间的问题等
为了解决这个问题,开发者编写了一种对css预处理的中间语言,可以实现一些编程语言才有的功能,然后再编译成css供浏览器识别,这样既弥补了css的缺陷,也无需设计一种新的语言(增加学习成本)
为解决这个事情,有很多框架应用而生,我们今天学习的就是其中的一种less
less框架诞生于2009年,使用javascript语言编写的一种css预处理语言,他为css赋予了编程的特性如变量/继承/运算/函数等功能
它既可以在客户端运行(这里的客户端指什么呢)还可以在服务器端运行(例如借助我们的node.js)
注意1:less的源码采用的javaScript
less常规使用:
<link rel="stylesheet/less" type="text/css" href="less/styles.css"> <script type="text/javascript" src="js/less-1.7.1.js"></script>
注意常规写法引入less-1.7.1.js就可以使用了
单这种做法容易出错,并且在我们的编译工具下需要配置一些东西才可以使用,我们有更好的办法,就是找第三方工具先编译一次less文件-css文件,然后再去使用 我们统一(也是目前最好的编译工具---koala工具编译)
演示考拉工具编译案例1:
@color:red;#header{ height: 200px; width: 200px; background-color: @color;}p{ color: @color;}
注意在这个案例我们定义常量 使用关键字@
less中变量的加法
@number:100px;.first{ background-color: red; width: @number+100px; height: @number+100px;}
乘法
@number:100px;.first{ background-color: red; width: @number*4; height: @number*4;}
个人理解:有了变量后,以后修改要轻松很多,但是变量引用多了后,改了变量后变动地也多。我自己喜欢在主体颜色和大体布局的时候用
- Mixin——掺合模式(Mixin)
是定义可以重复使用的代码块
混合模式案例:
`.set-init(@color:red,@size:10px){background-color: @color;font-size: @size; }``#header{ height: 200px; width: 200px; .set-init}`
把.set-init里面的backgroun-coloer和font-size的样式加到了#header里面去,实际效果就是
#header{ height: 200px; width: 200px; background-color: red;font-size: 10px;}
个人理解:CSS有太多的地方要重复使用,但是习惯了用群组选择器,感觉也不好控制,很少用
3.内嵌规则
less写法
@color:red;@min-div_width:200px;@min-div-height:200px;@min-margin:10px;#header{ div{height: @min-div-height;width: @min-div_width;background-color: @color; ul{ li{float: left;list-style: none;margin-left: @min-margin;margin-right: @min-margin; } } } p{color: @color; }}
以前的css代码写法,效果和上面一样
#header div{width: 200px;height: 200px;background-color: red;}#header ul li{float: left;list-style: none;margin-left: 10px;margin-right: 10px;}#header p{color: blue;}
个人理解:这个写法是我最喜欢的写法,一般我写个网页会用很多后代选择器,用这个过后减少了我很多写CSS的时间
- 每天一个小知识点1(less整理)
- 每天一个小知识点22(cookie)
- 每天一个知识点(1)
- 每天一个小知识点2(sass总结)
- 每天一个小知识点5(闭包总结)
- 每天一个小知识点6(bootstrap总结)
- 每天一个小知识点7(jQuer总结一)
- 每天一个小知识点8(jQuer总结二)
- 每天一个小知识点9(jQuer总结三)
- 每天一个小知识点10(jQuerMobile总结一)
- 每天一个小知识点11(jQuerMobile总结二)
- 每天一个小知识点12(jQueryMobile总结三)
- 每天一个小知识点13(Angularjs总结一)
- 每天一个小知识点14(Angularjs总结二)
- 每天一个小知识点15(Angularjs总结三)
- 每天一个小知识点16(Angularjs总结四)
- 每天一个小知识点17(Angularjs总结五)
- 每天一个小知识点18(Angularjs总结六)
- 【UVA】【10328】
- IOS开发-07.自定义HUD(提示框)
- IOS 根据输入值改变button颜色
- 性能优化系列总篇
- 继承
- 每天一个小知识点1(less整理)
- 六门武技,我需要你帮我找出其中的破绽
- UI_UItableView_AutoCell(自定义cell)
- C++新特性学习(2)
- 五猴分桃问题
- NetRouter创世纪
- java连接MYSQL
- 绿坝娘的加速器/绿坝娘的收藏夹
- IOS开发-08.自定义按钮