Less 入门

Less 入门

 

1.嵌套规则

less

css

.container{                                                               

  font-size: 25px;                                                                 

  h1{

    font-size: 25px;

    color:#E45456;

    }

  .myclass{

    color:#E45456;   

    p{

      font-size: 25px;

      color:#3C7949;

    }

  }

}

.container {                                                                           

  font-size: 25px;

}

.container h1 {

  font-size: 25px;

  color: #E45456;

}

.container .myclass {

  color: #E45456;

}

.container .myclass p {

  font-size: 25px;

  color: #3C7949;

}

 

2.变量

 

less

css

用于属性值

 

1都以@开头

2对变量赋值@color: red;

3可对变量运算+-*/，

运算智能识别单位

@my-size: 50px;

.big{

  height: @my-size*2;

}

.middle{

  height: @my-size+30;

}

.small{

  height: @my-size/2;

}

.big{

  height: 100px;

}

.middle{

  height: 80px;

}

.small{

  height: 40px;

}

用于选择器和属性名

需用花括号{}括起来

@part: banner;

@key: color;

.@{part}{

  @{key}: red;

}

#header{

  background-@{key}: #fff;

}

.banner{

  color: red;

}

#header{

  background-color: #fff;

}

变量值为字符串时

@base: "http://www.xxx.com"

.article{

  background-image: url("@{base}/article.png")           

}

.article{

  background-image: url("http://www.xxx.com/article.png")  

}

变量的作用域

 

1变量的作用域为包含它的花括号，花括号之外无效。

2子花括号内的变量会覆盖父花括号的定义。

@my-width: 1px;

.header{

  width: @my-width;

  a{

@my-width: 10px;

    width: @my-width;

  }

  span{

    width: @my-width;

  }

}

.header{

  width: 1px;

}

.header a{

  width: 10px;

}

.header span{

  width: 1px;

}

两个@

 

称为变量的变量

@theme: #fff;

@star: theme;

.banner{

  color: @@star;

}

.banner{

  color: #fff;

}

变量延迟加载

 

变量可以先使用在声明

p {

  font-size: @a;

  color: #ca428b;

}

@a: @b;

@b: 25px;

p {

  font-size: 25px;

  color: #ca428b;

}

 

3.继承

less使用伪类extend实现继承   

less      

css        

格式一：                                                                            

 

选择器:extend(选择器...){

  ...

}

.father{

  background-color: red;

}

.mother{

  color: black;

}

.son:extend(.father,.mother){

  font-size: 20px;

}                                                                                               

.father{

  background-color: red;

}

.mother{

  color: black;

}

.son{

  font-size: 20px;

  background-color: red;

  color: black;

}                                                                                                       

格式二：

 

选择器{

  &:extend(选择器...);

  ...

}

注：&表示自身

.father{

  background-color: red;

}

.mother{

  color: black;

}

.son{

  &:extend(.father,.mother);

  font-size: 20px;

}

.father{

  background-color: red;

}

.mother{

  color: black;

}

.son{

  font-size: 20px;

  background-color: red;

  color: black;

}

 

4.混合mixin

 

less

css         

混合的定义与调用

 

任意样式都可当做混合的定义

混合的调用加不加()都可

.aaa{

  color: red;

}

.header{

  .aaa;

}

.banner{

  .aaa();

}

.aaa{

  color: red;

}

.header{

  color: red;

}

.banner{

  color: red;

}                                                                                                      

.aaa{

  color: red;

}

.aaa{

  font-size: 10px;

}

.header{

  .aaa;

}

.aaa{

  color: red;

  font-size: 10px;

}

.header{

  color: red;

  font-size: 10px;

}

对定义加()

 

不让混合定义出现在css中

.aaa(){

  color: red;

}

.header{

  .aaa ;

}

.header{

  color: red;

}

！important 关键字

 

！important 关键字用于覆盖特定属性。 

当它在mixin调用之后放置时，它会将所有继承的   

属性标记为！important。

.aaa{

  color: red;

  font-size: 10px;

}

.header{

  .aaa ! important ;

}

.aaa{

  color: red;

  font-size: 10px;

}

.header{

  color: red ! important ;

  font-size: 10px ! important ;

}

混合的嵌套

 

.xa{  .outer .inner; }

.xb{  .outer .inner(); }

.xc{  .outer > .inner; }

.xd{  .outer > .inner(); }

效果相同，得到.inner

.outer{

  font-size: 10px;

  .inner{

    color: red;

  }

}

.xa{  .outer .inner; }

.xb{  .outer .inner(); }

.xc{  .outer > .inner; }

.xd{  .outer > .inner(); }

.outer{

  font-size: 10px;

}

.outer .inner{

  color: red;

}

.xa{  color: red; }

.xb{  color: red; }

.xc{  color: red; }

.xd{  color: red; }

带参数的混合

 

带参数的混合定义不被保留在css中

.border(@width;@style;@color){

  border:@width@style@color;

}

.myheader {

  .border(2px;dashed; green);

}

.myheader {

  border: 2px dashed green;

}

.mixin(@color; @padding: 2px) {

  color: @color;

  padding: @padding;

}

.class1 {

  .mixin(#FE9A2E);

}

.class2 {

  .mixin(red;5px);

}

.class3 {

  .mixin(5px;red);

}

.class4 {

  .mixin(@padding:5px;@color:red);

}

.class1 {

  color: #FE9A2E;

  padding: 2px;

}

.class2 {

  color: red;

  padding: 5px;

}

.class3 {

  color: 5px;

  padding: red;

}

.class4 {

  color: red;

  padding: 5px;

}

.box-shadow(@x:0;@y:0;@height: 3px; @width: 3px) {

  box-shadow: @arguments;

}

.myclass {

  .box-shadow(2px; 2px);

}

.myclass {

  box-shadow: 2px 2px 3px 3px;

}

.mixin(dark; @color) {

  color: darken(@color, 15%);

}

.mixin(light; @color) {

  color: lighten(@color, 15%);

}

@color-new: dark;

.line {

  .mixin(@color-new; #FF0000);

}

.myclass {

  color: #b30000;

}

 

 

5.其他

 

less                                       

css                                                     

转义

〜“some_text"中的任何内容将显示为some_text。  

p {

  color: ~"green";

}                                                                                                

p {

  color: green;

}                                                                                                       

注释

可以使用块样式/**/和行内注释//，

但是当编译LESS代码时，

单行注释//不会显示在CSS文件中。

/* the green color! */

.myclass{

color: green;

}

// the blue color

.myclass1{

color: red;

}

/* the green color! */

.myclass {

  color: green;

}

.myclass1 {

  color: red;

}

导入

myfile.less文件：

.myclass{

    color: #FF8000;

}

 

style.less文件：

@import  "myfile.less";

.myclass2{

color: #FF0000;

}

编译style.less文件

.myclass{

    color: #FF8000;

}

.myclass2{

color: #FF0000;

}

 

6.函数

见 Less入门-函数列表(转载)