首页 > 代码库 > sass06 mixin
sass06 mixin
scss
@mixin cont{ //mixin是关键字 color:red; } body{ @include cont; //使用默认值 } @mixin cont($color: red ){ //默认值 color: $color; } body1{ @include cont(#fff); //传参数 } @mixin cont($color: red, $fontSize: 14px){ //mixin是关键字 color: $color; font-size: $fontSize; } body2{ @include cont($fontSize: 18px); //map方式传值 } @mixin box-shadow($shadow...){ //多值参数 -moz-box-shadow: $shadow; -webkit-box-shadow: $shadow; box-shadow: $shadow; } .shadows{ @include box-shadow(0px 4px 4px #555, 2px 6px 10px #6dd3ee); } @mixin style-for-iphone{ @media only screen and (min-device-width: 320px) and (max-device-width:568px){ @content; //下面的font-size: 12px; } } @include style-for-iphone{ font-size: 12px; }
css
body { color: red; } body1 { color: #fff; } body2 { color: red; font-size: 18px; } .shadows { -moz-box-shadow: 0px 4px 4px #555, 2px 6px 10px #6dd3ee; -webkit-box-shadow: 0px 4px 4px #555, 2px 6px 10px #6dd3ee; box-shadow: 0px 4px 4px #555, 2px 6px 10px #6dd3ee; } @media only screen and (min-device-width: 320px) and (max-device-width: 568px) { font-size: 12px; } /*# sourceMappingURL=demo1.css.map */
sass06 mixin
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。