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

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM