css進階 less的使用

less 官網

http://lesscss.org/

less.png

npm install -g less
# 檢視版本
lessc -v
           

編寫less檔案

• 聲明字元集

@charset "UTF-8";
           

• 定義less變量

  @mainColor

@color: #61A34F;

a {
    background-color: @color;
}
div p {
    background-color: @color;
}
           

• less注釋格式(兩種)

/* 這種類型的格式會被轉換到生成的css檔案 */

// 這種類型的格式不會被轉換到生成的css檔案
           

• 拼接使用less變量

@pageClass: blackPage

.@{pageClass}{
    background-color: #444444;
}
           

• mixin(混入), 分為

  類

  混入和

  函數

  混入

/* 類混入 */
.w50-h50{
  widht: 50px;
  height: 50px;
}

.main-color{
  color: #62868D;
}
/* 定義寬50高50的方塊樣式 */
.atom-frame{
  .w50-50;
  .main-color;
}
           

/* 函數混入 */
// 定義函數(預設值為left)
.f(@direction:left){
    float: @direction;
}
// 調用函數
.atom{
  font-size: 50px;
  .f(right);
}
           

• 嵌套

/* 為 div 的子标簽 p 添加color樣式 */
div {
  p{
  color: #62868D;
  }
}
           

// 當需要與父級連接配接的時候,如`div:hover`,使用`&`代替父元素
.atom {
  background-color: #62868D
  &:hover{
    background-color: #81D453
  }
}
           

• 數值運算

bootstrap預設的12栅格

動态計算, 子元素寬度

@cell-color: #413F43;
    @cell-number: 5;
    .container{
        margin-top: 50px;
        border: 3px  solid #413F43;
        overflow: hidden;
        .cell {
            width: 100%/@cell-number;
            height: 100px;
            float: left;
            padding: 5px;
            border: 2px solid #9C5E56;
            box-sizing: border-box;
            background-color: @cell-color;
            &:nth-child(2n){

                background-color: lighten(@cell-color, 10%);

            }
            &:hover {
                background-color: lighten(@cell-color, 50%);
            }

        }

    }

           

/* 當浮動到 */
/*使用内置函數進行運算, 例如, 當滑鼠浮動到某方塊時, 顔色亮度提升30% 參考: http://lesscss.org/functions/ */
@cell-color: #62868D;
.cell {
    width: 100px;
    height: 100px;
    background-color: @cell-color;
    &:hover {
        background-color: lighten(@cell-color, 20%);
    }
}
           

• 導入其它檔案的less規則

/* 以導入同級目錄下 mystyle.less為例 */
@import "mystyle"
           

less編譯

# 使用node全局安裝lessc後, 對檔案`base.less`進行編譯(類似javac)
lessc base.less base.css