Question

我最近开始使用Zurb Foundation并尝试使用媒体查询来修改某个.css类，但无法使其正常工作。以下是（据我所知）.scss文件的相关部分。

Clear-Host

$a =Get-Content 'D:\temp\M.xml' -raw 
$reg = [regex]'(?sm)(  <child1.*?</child1>)'
$tagMatches = $reg.Matches($a)

$blRemoved = $true
while ($blRemoved)
{
  $tagMatches = $reg.Matches($a)
  $blRemoved = $false
  foreach ($tagMatch in $tagMatches)
  {
    if ($tagMatch.value -notlike "*`"C`"*")
    {
      Write-Host $tagMatch.value
      $a = $a.Remove($tagMatch.Index,$tagMatch.Length+4)
      $blRemoved = $true
      break
    }
  }
}

$a

// d. Media Query Ranges
// - - - - - - - - - - - - - - - - - - - - - - - - -

// $small-range: (0em, 40em);
// $medium-range: (40.063em, 64em);
// $large-range: (64.063em, 90em);
// $xlarge-range: (90.063em, 120em);
// $xxlarge-range: (120.063em, 99999999em);

$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em, 99999999em);

// $screen: "only screen";

$screen: "only screen";

// $landscape: "#{$screen} and (orientation: landscape)";
// $portrait: "#{$screen} and (orientation: portrait)";

// $small-up: $screen;
// $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";

$small-up: $screen;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";

// $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
// $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";


// $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
// $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";

// $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
// $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";

// $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
// $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";

// Legacy
// $small: $medium-up;
// $medium: $medium-up;
// $large: $large-up;

$small: $medium-up;
$medium: $medium-up;
$large: $large-up;

有谁知道我错过了什么？

提前致谢，

碧玉

Answer 1

@media #{small-up} {

需要

@media #{$small-up} {

$ small-up是您尝试访问的变量，它是在设置文件中设置的。

媒体查询不起作用（Zurb Foundation）

1 个答案: