为什么我要使用Less
less的作为编写css的工具插件，省时、方便、检测，具体的安装，请参考我的一篇文章《sublime text3 个人使用心得》，里面我讲解了安装方法，使用webstorm的乘客，我会再写一篇配合使用less的文章的。
Now，get up my car , I will take with you to fly!
* LESS语法
--------------------------------------------------变量-------------------------------------------------
* 【变量】
less文件 css文件
less文件 Css文件 @nice-blue: #5B83AD; #header { @light-blue: @nice-blue + #111; color: #6c94be; } #header { color: @light-blue; }
【变量详解:】
* 作为属性值，加减乘除
@base: 5%;
@filler: @base * 2; => 10%
@other: @base + @filler; => 15%
color: #888 / 4; => #222
background-color: @base-color + #111;
height: 100% / 2 + @filler; => 60%
@var: 1px + 5; => 6px
* 用于选择器
less文件 CSS文件 @my-selector:banner; .banner{ .@{my-selector}{ font-weight: bold; font-weight: bold; } }
* 用于URL
@images: "../img"; body { background:url("@{images}/white-sand.png"); }
* import表达式（注意:less中可以使用，css中不能用，因为这会增加客户端请求资源）
@themes: "../../src/themes"; @import "@{themes}/tidal-wave.less";
这样在该less文件中，就引入了其他less文件了，NB不
* 用于属性名
@property:color; .widget { .widget { color: #0ee; @{property}: #0ee; background-color: #999; background-@{property}:#999; } }
* 用于变量名
@fnord:"I am fnord.";
@var:"fnord";
content:@@var; content:"I am fnord.";
* 变量是延迟加载的，不一定要在使用之前定义
.lazy-eval-scope { .lazy-eval-scope { width: @var; width: 9%; @a: 9%; } } @var: @a;
* 当变量被多次定义时，以最后一次定义为准，且从当前作用域向上搜寻
@var: 0; .class { .class { one:1; @var: 1; } .brass { .class .brass { @var: 2; three:3; three: @var; } @var: 3; } one: @var; }
* 默认值:可以建立变量库来统一设定默认值，然后通过重新定义来覆盖变量
@base-color:green;
@dark-color:darken(@base-color,10%);
@import "library.less";
@base-color: red;
【变量混合模式】:某一个/些引入其它定义好的样式
less文件 css文件 .bordered { .bordered { border-top: dotted 1px black; border-top: dotted 1px black; border-bottom: solid 2px black; border-bottom: solid 2px black; } } #menu a { #menu a { color: #111; color: #111; .bordered; border-top: dotted 1px black; } border-bottom: solid 2px black; .post a { } color: red; .post a { .bordered; color: red; } border-top: dotted 1px black; border-bottom: solid 2px black; }
* 支持带参混合：该样式不会出现在.css中，推荐此种写法
.样式1( ){ ... }
.样式2(@num1, @num2){ ... }
.样式3(@num: 默认值){ ... }
------------------------------------嵌套 子元素的样式 可以在父元素的样式里面定义---------------------------------------------------------------
less的套子写法，令我由无法自拔，到挺身而出，真是透心凉、心飞扬呀，不好意思，一激动就想开火车，我忘了我TM还在写技术博客呢，sorry，那么现在我们吸收LESS的精子..不...是精华了....
原来 使用嵌套 #header { #header { color: black; color: black; } .navigation { #header .navigation { font-size: 12px; font-size: 12px; } } .logo { #header .logo { width: 300px; width: 300px; } } }
学会这种写法，妈妈再也不用担心我写错层级类名了
* &符号:代表this，也就当前这一层的元素
less文件 CSS文件 .clearfix { .clearfix { display: block; display: block; zoom: 1; zoom: 1; } &:after { .clearfix:after { content: " "; content: " "; display: block; display: block; font-size: 0; font-size: 0; height: 0; height: 0; clear: both; clear: both; visibility: hidden; visibility: hidden; } } }
* @Media, @supports and @document
less文件 CSS文件 .screen-color { @media screen { @media screen { .screen-color { color:green; color: green; @media(min-width:768px){ } color:red; } } @media screen and (min- 768px) { } .screen-color { @media tv { color: red; color: black; } } } } @media tv { .screen-color { color: black; } }
* #
less文件 CSS文件
#a { #a {
color: blue; color: blue;
@font-face { }
src: made-up-url; @font-face {
} src: made-up-url;
padding: 2 2 2 2; }
} #a {
padding: 2 2 2 2;
}
-------------------------------------注释--------------------------------------------------------------
"//"用于注释内容，在CSS文件中不可见
/**/，在CSS文件中可显示，但是被注释的
---------------------------------------------------------------------------------------------------
* Function
less文件 CSS文件 @base: #f04615; .class { @width: 0.5; width:50%; .class { color:#f6430f; width:percentage(@width); background-color: #f8b38d; color:saturate(@base,5%); } background:spin(lighten(@base,25%),8); }
本人也只是学习了一点less的皮毛，less有很多内容，但个人感觉不是很实用，在使用过程中，变量、函数、嵌套，是用的最多的，限于自身的长度，不能再深入了，下面是个人编写的公共less库，
在个人的less文件中，引入common.less库， @import url(common.less); 然后调用里面的参数即可，也可以结合自身习惯编写自己的公共库
个人common.less文件
@charset 'utf-8'; //常用变量及样式定义，作为一个工具Less被其他Less //字体大小:默认14px //去除a和label的虚线 .remove_dotted(){ a,label {blr:~'expression(this.onFocus=this.blur())'} a,label {outline:none;} } .font(@size:14px){ font-size:@size; } .h100(){ height:100%; } .w100(){ width:100%; } //边框设置 .border(@w:1px,@c:#eee){ border:@w solid @c; } //定位 .pos(r){ position:relative; } .pos(a){ position:absolute; } .pos(f){ position:fixed; } //背景图片,.bg("..images/1.png"); .bg(@url){ background:url(@url) no-repeat; } //浮动,div{.fr;} .fl(){ float:left; } .fr(){ float:right; } .list-sn(){ list-style:none; } //垂直居中 .pos-box-cc(@w,@h,@pos:absolute){ width:@w; height:@h; left:50%; top:50%; margin:-@w/2 0 0 -@h/2; } .bc(){ margin:0 auto; } //文字居中 .tc(){ text-align:center; } //文字垂直居中 .tcc(@h){ text-align:center; line-height:@h; } .l-h(@h){ height:@h; line-height:@h; } //display .d-b(){ display:block; } .d-i(){ display:inline; } .d-ib(){ display:inline-block; *display:inline; *zoom:1; } .d-t(){ display:table; } .d-n(){ display:none; } .t-n(@p:none){ text-decoration:@p; } .tc(){ text-align:center; } .tl(){ text-align:left; } .tr(){ text-align:right; } //圆角 .radius(@r){ -webkit-border-radius:@r; -moz-border-radius:@r; border-radius:@r; } //三角形 .triangle(top,@w:5px,@c:#eee){ border-width:@w; border-color:transparent transparent @c transparent; border-style:dashed dashed solid dashed; } .triangle(bottom,@w:5px,@c:#eee){ border-width:@w; border-color:@c transparent transparent transparent; border-style:solid dashed dashed dashed; } .triangle(left,@w:5px,@c:#eee){ border-width:@w; border-color:transparent @c transparent transparent; border-style:dashed dashed solid dashed; } .triangle(right,@w:5px,@c:#eee){ border-width:@w; border-color:transparent transparent transparent @c; border-style:solid dashed dashed dashed; } .triangle(@_){ width:0; height:0; overflow:hidden; } .clearfix(){ *zoom: 1; &:before, &:after{ display:table; content: ""; } &:after { clear: both; } } .box-sizing(@box){ -webkit-box-sizing:@box; -moz-box-sizing:@box; -ms-box-sizing:@box; -o-box-sizing:@box; sizing:@box; } .box-shadow(@shadow){ -webkit-box-shadow:@shadow; -moz-box-shadow:@shadow; -ms-box-shadow:@shadow; -o-box-shadow:@shadow; shadow:@shadow; } //过度 .transition(@trans){ -webkit-transition:@trans; -moz-transition:@trans; -ms-transition:@trans; -o-transition:@trans; transition:@trans; } .transform-origin(@origin){ -webkit-transition-origin:@origin; -moz-transition-origin:@origin; -ms-transition-origin:@origin; -o-transition-origin:@origin; transition-origin:@origin; } .transform(@transform){ -webkit-transform:@transform; -moz-transform:@transform; -ms-transform:@transform; -o-transform:@transform; transform:@transform; } .create3d(@h){ -webkit-perspective:@h; perspective:@h; } .use3d(){ -webkit-transform-style:preserve-3d; transform-style:preserve-3d; } //动画 .animation(@as){ -webkit-animation:@as; -moz-animation:@as; -o-animation:@as; animation:@as; } .trans3d(){ -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; transform-style:preserve-3d; } .trans-origin(@to){ -webkit-transform-origin:@to; -moz-transform-origin:@to; transform-origin:@to; }