Question

我有很多css文件和多次出现：

@media all and (max-width: 400px), (orientation: portrait) {
    ....//In each file different style that relevant to the component the file represnt
}

我正在使用手写笔有一天，我的老板让我把媒体查询改为：

@media all and (max-width: 400px), (max-height: 400px) {
    ....
}

现在我需要搜索我的所有文件并替换为新的媒体查询。

是否可以选择将此媒体查询放入mixin或其他内容？

Answer 1

取自question I answered previously。这是我使用的黑客：

在variables.styl

smartphoneWidth = 748px
tabletWidth     = 1012px

mqSmartphone = "only screen and (max-width: " + smartphoneWidth + ")"
mqTablet     = "only screen and (max-width: " + tabletWidth     + ")"

现在，您可以使用其他手写笔文件：

@media mqSmartphone
    // Styles go here

@media mqTablet
    // Styles go here

虽然仍然很难看，但我觉得它比使用unquote（）

稍微优雅一点

Answer 2

使用手写笔，如果您愿意，还可以定义几个block mixins。我用这个：

widerthan(var)
  condition = 'screen and (min-width: %s)' % var
  @media condition
    {block}

narrowerthan(var)
  condition = 'screen and (max-width: %s)' % var
  @media condition
    {block}

mobile = 748px

然后你可以这样使用：

button
  +narrowerthan(mobile)
    flex-direction column

Answer 3

在css-tricks http://css-tricks.com/conditional-media-query-mixins/上有一个很好的SASS mixins集合用于媒体查询（参见评论主题）。在这里我的贡献： http://codepen.io/dsheiko/pen/KeLGy

首先在（eg_definitions.scss）中定义所有断点：

$mediaMaxWidth: 1260px;
$mediaBp1Width: 960px;
$mediaMinWidth: 480px;

然后扩展条件图

$condMap: (
    "screen": "only screen",
    "print": "only print",
    "retina": "(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 120dpi)",
    "<maxWidth": "(max-width: #{$mediaMaxWidth})", 
    ">maxWidth": "(min-width: #{$mediaMaxWidth})",
    ">bp1Width": "(min-width: #{$mediaBp1Width})",
    "<bp1Width": "(max-width: #{$mediaBp1Width})",
    ">minWidth": "(min-width: #{$mediaMinWidth})",
    "<minWidth": "(max-width: #{$mediaMinWidth})"
);

就是这样。您现在就可以在样式中使用它：

.section {
   @include media( "retina" ){
    background: white;
  };
  @include media( "screen", ">bp1Width", "<maxWidth" ){
    background: red;
  };
    @include media( "screen", ">minWidth", "<bp1Width" ){
    background: green;
  };
    @include media( "screen", "<bp1Width" ){
    background: blue;
  };
}

Answer 4

这是使用@content指令在SASS中执行此操作的方法。

jsFiddle

@mixin small-device() {  
    @media all and (max-width: 400px), (max-height: 400px) { 
        @content; 
    }  
}

#some-id {
    @include small-device {
        color: red;
    }
}

它产生以下CSS：

@media all and (max-width: 400px), (max-height: 400px){#some-id{color:red}}

Answer 5

由于Stylus不支持媒体查询中的插值或变量（或者mixins的块参数），所以你只能使用这个hack：

$my_query = "@media all and (max-width: 400px), (orientation: portrait) {"

unquote($my_query)
…
unquote("}")

然后当您需要更改查询时，您需要更改$mu_query变量。

除了丑陋的语法之外，唯一的缺点是这对于冒泡的媒体查询不起作用。

将媒体查询放入mixin中

5 个答案: