Less——less基本使用

基本概況

Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便制作主題、擴充。Less 可以運行在 Node、瀏覽器和 Rhino 平台上。網上有很多第三方工具幫助你編譯 Less 源碼。

編譯

1、在npm中輸入以下語句，但是注意要更改文件位置

lessc style.less style.css

注釋

1、// 雙斜杠的注釋 less是支持的而且這樣的注釋不會再編譯之后出現在css中

2、/**/使用css的注釋 less是支持的，編譯的時候該注釋會被保留 

變量

1、@變亮名：具體值

2、經過nmp進行編譯才能得到對於的css文件

@w: 100px;
@h: 50px;
@c: rgba(255, 255, 255, 0.3);
body {
  width: @w;
  height: @h;
  background-color: @c;
}

===》編譯：

C:\Users\Administrator>lessc E:\less\first\01.less E:\less\first\01.css

===》編譯之后：

body {
  width: 100px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.3);
}

混合

1、樣式中可以混入類選擇器和id選擇器

.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}

===》編譯后

.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

請注意，當您調用mixin時，括號是可選的

.a();   //these lines do the same thing
.a;

2、可以不輸出混合。你想用一個混合，這個混合只是在被引用的時候輸出，自己不能作為類輸出，你可以在它后面加括號。

.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

===》編譯后

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

3、混合中帶有參數

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

===》編譯后

#header {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.button {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

混合中含有參數也有是默認值

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

嵌套

#father {
  width: 100px;
  div {
    width: 100px;
    height: 50px;
    ul {
      width: 50px;
      height: 50px;
      li {
        width: 50px;
        height: 50px;
      }
    }
  }
}

===》編譯后

#father {
  width: 100px;
}
#father div {
  width: 100px;
  height: 50px;
}
#father div ul {
  width: 50px;
  height: 50px;
}
#father div ul li {
  width: 50px;
  height: 50px;
}

選擇器

1、嵌套中如果父元素與子元素有默認的空格，&可以取消空格，這為偽元素與交集選擇器提供了可能

.content() {
  width: 100px;
  height: 100px;
}

div {
  .content;
  &:hover {
    background-color: black;
  }
  &::after {
    content: '';
    display: block;
    visibility: hidden;
    height: 0;
    line-height: 0;
    clear: both;
  }
}

===》編譯后

div {
  width: 100px;
  height: 100px;
}
div:hover {
  background-color: black;
}
div::after {
  content: '';
  display: block;
  visibility: hidden;
  height: 0;
  line-height: 0;
  clear: both;
}