Less 語言特性

http://less.bootcss.com/features/#mixins-parametric-feature
<h3>變量</h3>

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

/*輸出*/
#header {
  color: #6c94be;
}

注意，由于变量只能定义一次，其本质就是“常量”。

<h3>混合（Mixin）</h3>

相當於“繼承”

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}

/*輸出*/
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

class與id同樣適用，當mixin時，()是可選的

.a, #b {
  color: red;
}

.mixin-id {
  #b();
}

/*輸出*/
.mixin-id {
  color: red;
}

header{
  color: #cccccc;
  .nav{
    font-size: 12px;
  }
  .logo{
    width: 300px;
    .img{
      width: 100%;
    }
  }
}

/*輸出*/
header {
  color: #cccccc;
}
header .nav {
  font-size: 12px;
}
header .logo {
  width: 300px;
}
header .logo .img {
  width: 100%;
}

&代表父級

.clearfix {
  display: block;
  zoom: 1;
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

/*輸出*/
.clearfix {
  display: block;
  zoom: 1;
}
.clearfix:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

a {
  color: blue;
  &:hover {
    color: green;
  }
}

/*輸出*/
a {
  color: blue;
}
a:hover {
  color: green;
}

&-生產名

.button{
  &-ok{
    background: #000;
  }
}

/*輸出*/
.button-ok {
  background: #000;
}

&組合

.c{
  &+&{
    color: red;
  }
  &&{
    color:blue;
  }
  & & {
    color:yellow
  }
  &,&con{
      color:pink
  }
}

/*輸出*/
.c + .c {
  color: red;
}
.c.c {
  color: blue;
}
.c .c {
  color: yellow;
}
.c, .ccon {
  color: pink;
}

&同時代表的所有長輩元素，不僅僅是父級,所以多層選擇更簡潔：

.nav{
  .header{
    .logo{
      & input[type=text],& input[type=button]{
        color: green;
      }
    }
  }
}

/*輸出*/
.nav .header .logo input[type=text],
.nav .header .logo input[type=button] {
  color: green;
}

通過&改變選擇器父子關係：

.h{
  .a{
    width:10px;
    .c{
      height:20px;
    }
  }
}
/*輸出*/
.h .a .c {
  height: 20px;
}

.h{
  .a{
    width:10px;
    .c &{    /*使.c成為父級*/
      height:20px;
    }
  }
}
/*輸出*/
.c .h .a {
  height: 20px;
}

生成可能排列的組合

p,a,ul,li{
  width: 10px;
  & &{
    height:0
  }
}

/*輸出*/
p,
a,
ul,
li {
  width: 10px;
}
p p,
p a,
p ul,
p li,
a p,
a a,
a ul,
a li,
ul p,
ul a,
ul ul,
ul li,
li p,
li a,
li ul,
li li {
  height: 0;
}

<h3>运算</h3>
任何数字、颜色或者变量都可以参与运算。下面是一组案例

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

div{
  color: #888 / 4;
  width:@base * 10;
  height: 100% / 2 + @filler;
}

/*輸出*/
div {
  color: #222222;
  width: 50%;
  height: 60%;
}

<h3>函数</h3>
http://baike.renwuyi.com/2015-04/9042.html

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // 0.5轉50%
  color: saturate(@base, 5%); //顏色飽和度+5%
  background-color: spin(lighten(@base, 25%), 8); //顏色亮度+25%,色相+8
}


/*輸出*/
.class {
  width: 50%;
  color: #f6430f;
  background-color: #f8b38d;
}

<h3>命名空間規則</h3>

#logo {
  .img {
    width: 10px;
    height: 10px;
    &:hover {
      background-color: white
    }
  }
}
#nav a {
  color: orange;
  #logo > .img;
}

/*輸出*/
#logo .img {
  width: 10px;
  height: 10px;
}
#logo .img:hover {
  background-color: white;
}
#nav a {
  color: orange;
  width: 10px;
  height: 10px;
}
#nav a:hover {    //注意這一步也帶出
  background-color: white;
}

<h3>變量定義範圍</h3>
先找子範圍，不分前面，找不到再找父；所以下面兩種形式都只會找子範圍內的變量；

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

<h3>导入（Importe）</h3>
和你预期的工作方式一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";

// Variables
@mySelector: banner;

// Usage
.@{mySelector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

// Variables
@images: "../img";
// 用法
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

注意：導入css或inport文件，此種變量定義不再適用；

// Variables 無法輸出
@themes: "../../src/themes";
// Usage
@import "@{themes}/tidal-wave.less";

属性

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

@fnord:  "I am fnord.";
@var:    "fnord";
p{
  content: @@var;
}

可以後聲明

.lazy-eval {
  width: @var;
}
@var: @a;
@a: 9%;

同名變量遵循後蓋前，從裏到外原則

@var: 0;
.class1 {
  @var: 1;
  .class {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

/*輸出*/
.class1 {
  one: 1;
}
.class1 .class {
  three: 3;
}

<h3>Extend 擴展</h3>

nav ul {   //原樣式保持不變
  &:extend(.inline);         //與.inline生成擴展
  background: blue;
}
.inline {
  color: red;
}

/*輸出*/
nav ul {
  background: blue;
}
.inline, nav ul {
  color: red;
}

/*另一種寫法：*/

nav ul:extend(.inline){
  background: blue;
}

/*如果定義兩個空置屬性*/
.e:extend(.f) {}
.e:extend(.g) {}
==》
.e:extend(.f,.g){}

多個擴展只擴展對應的本位元素

.big-division,
.big-bag:extend(.bag),
.big-bucket:extend(.bucket) {
  background: #000;
}

/*如果.bag等存在，則輸出*/

.bag,
.big-bag {
  width: 100%;
}
.bucket,
.big-bucket {
  width: 55px;
}

.bucketone{
  tr{
    color:#cd000c;
  }
}
.some-class:extend(.bucketone tr){
}

/*輸出*/
.bucketone tr,.some-class {
  color: #cd000c;
}

如果extend是引用的屬性，則無法匹配

.a.class,.class.a,.class > .a ，*.class{
  color: blue;
}
.test:extend(.class) {} // 上面的.class都是被引用，所以這句無法匹配，(只有純寫.class{..才能匹配.})

順序不同也無法匹配

link:hover:visited {
  color: blue;
}
.selector:extend(link:visited:hover) {}

nth系也無法匹配

:nth-child(1n+3) {
  color: blue;
}
.child:extend(n+3) {}

引用不重要，以下是相同的

[title=identifier] {
  color: blue;
}
[title='identifier'] {
  color: blue;
}
[title="identifier"] {
  color: blue;
}

Extend的 all,以下replacement將會複製一份與.test同樣結構的屬性

.a.b.test, .test.c {
  color: orange;
}
.test {
  &:hover {
    color: green;
  }
}
.replacement:extend(.test all) {}

/*輸出*/
.a.b.test, .test.c, .a.b.replacement, .replacement.c {
  color: orange;
}
.test:hover, .replacement:hover {
  color: green;
}

變量生產出的屬性不能被匹配到extend

@variable: .bucket;
@{variable} { // interpolated selector
  color: blue;
}
.some-class:extend(.bucket) {} // does nothing, no match is found

變量與extend也不能匹配

.bucket {
  color: blue;
}
.some-class:extend(@{variable}) {} // interpolated selector matches nothing
@variable: .bucket;

//當然，這麼寫是無任何問題的
.bucket {
  color: blue;
}
@{variable}:extend(.bucket) {}
@variable: .selector;

//輸出：
.bucket,.selector {
  color: blue;
}

@media

1、比如：print裏的@media只會匹配print裏面的

2、寫在@media內部的extend無法繼承子塊的樣式

@media screen {
  .screenClass:extend(.selector) {} // extend inside media
  @media (min-width: 1023px) {
    .selector {  // ruleset inside nested media - extend ignores it
      color: blue;
    }
  }
}

/*輸出*/
@media screen and (min-width: 1023px) {
  .selector {
    color: blue;
  }
}
很明顯：.screenClass:extend(.selector) {}不會被匹配到；

3、extend寫在@media外部可匹配到內部所有選擇器樣式

@media screen {
  .selector {
    color: blue;
  }
  @media (min-width: 1023px) {
    .selector {
      color: blue;
    }
  }
}
.topLevel:extend(.selector) {}

/*輸出*/
@media screen {
  .selector,
  .topLevel {
    color: blue;
  }
}
@media screen and (min-width: 1023px) {
  .selector,
  .topLevel {
    color: blue;
  }
}

/*定义base类*/
@def-bg:#f1f1f1;
@def-col:#464646;

.def-bg{
  background: @def-bg;
  color:@def-col;
}

//子类只改变颜色
.con-bg{
  &:extend(.def-bg);
  background: #cccccc;
}

/*输出*/
.def-bg,
.con-bg {
  background: #f1f1f1;
  color: #464646;
}
.con-bg {
  color: #cccccc;
}

<div class='def-bg con-bg'></div>

使用扩展减少CSS代码

.a(){
  width: 10px;
}
.b{
  .a;
}
.c{
  .a;
}

/*输出*/
.b {
  width: 10px;
}
.c {
  width: 10px;
}

/*使用extend*/
.a{
  width: 10px;
}
.b{
  &:extend(.a);
}
.c{
  &:extend(.a);
}

/*输出*/
.a,
.b,
.c {
  width: 10px;
}

li.list > a {
  width: 10px;
}
button.list-style {
  &:extend(li.list > a); // use the same list styles
}

li.list > a,
button.list-style {
  width: 10px;
}

Less 語言特性

最新文章

最近回复

分类

归档

其它