Question

要定位艺术指导问题（请参阅此处https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images），我需要在标记中使用<picture>元素。我用回形针将图像调整为4种不同的样式：lg，md，sm，xs。

我正在使用bootstrap（SCSS）并通过变量定义了断点：

$screen-xs: 425px;
$screen-sm: 768px;
$screen-md: 1000px;
$screen-lg: 1200px;

要使用<picture>元素，我必须在ERB标记中引用此断点：

<picture>
  <source media="(max-width: 425px)" srcset="<%= image.attachment(:xs) %>">
  <source media="(max-width: 768px)" srcset="<%= image.attachment(:sm) %>">
  <source media="(max-width: 1000px)" srcset="<%= image.attachment(:md) %>">
  <source media="(max-width: 1200px)" srcset="<%= image.attachment(:lg) %>">
  <img src="<%= image.attachment(:md) %>" alt="<%= image.alt %>">
</picture>

当然，我不想在两个不同的地方维护断点（我将把它提取到帮助器中），所以我想知道是否有可能读取红宝石中的SCSS变量在rails中的方法？

Answer 1

我不知道是否有办法以ruby方法读取SCSS变量，我想提出一个并不需要的解决方案。

您可以在帮助器中定义值，并在样式表和HTML中使用它们。

要将ruby代码嵌入到scss文件中，请将*.scss重命名为*.scss.erb：

# hepler.rb
def screen_xs
  '425px'
end

def screen_sm 
  '768px'
end
...

# style.scss.erb:
$screen-xs: #{screen_xs};
$screen-sm: #{screen_sm};
...

在rails helper中读取SCSS变量

1 个答案: