【心得经验】SASS----flex兼容浏览器的sass---mixin语法

weixin_34401479

于 2015-03-17 15:31:00 发布

阅读量554

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhp404/articles/4344543.html

本文介绍如何使用SASS定义Mixins来简化Flex布局的浏览器兼容性问题，通过示例展示了如何创建和使用针对Flex布局特性的Mixins。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用sass定义一个@mixin更容易解决为兼容浏览器写的各种混合语法：

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}