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