为什么我要使用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:;
@var:; }
.brass { .class .brass {
@var:; three:;
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:; zoom:;
}
&:after { .clearfix:after {
content: " "; content: " ";
display: block; display: block;
font-size:; font-size:;
height:; height:;
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-width: 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:;
}
.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:;
height:;
overflow:hidden;
}
.clearfix(){
*zoom:;
&: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;
}