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