Less-mixin函數基礎一

//mixin函數

立即執行mixin函數，example：
.test{
    color:#ff00000;
    background:red;
}

//立即執行mixin grammar 1 擴展extend
.study{
    &:extend(.test);
}

//輸出css
.test,
.study {
  color: #ff0000;
  background: red;
}

//立即執行mixin grammar 2:
.study{
    .test;
}

//輸出css
.test {
  color: #ff0000;
  background: red;
}
.study {
  color: #ff0000;
  background: red;
}

小結：擴展比直接調用mixin函數更利於簡化代碼


非立即執行mixin函數，example:
.test(){
    color:#ff0000;
    background:red;
}

//執行 grammar 1
.study{
    .test;
}

//執行 grammar 2
.study{
    .test();
}

小結：當調用mixin時，括號是可選的，定義mixin函數有利於減少css大小


minxin組合使用，example:
.test(){
    color:#ff0000;
    background:red;
}

//grammar 1
.study{
    .test;
}
.study2:extend(.study){}

//grammar 2
.study,.study2{
    .test;
}

//輸出css
.study,
.study2 {
  color: #ff0000;
  background: red;
}

小結：extend中不能調用mixin函數，錯誤用法（ .study:extend(.test){} ）

作者：leona

原文鏈接：http://www.cnblogs.com/leona-d/p/6296453.html

版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接