ruby-on-rails - 在 rails helper 中读取 SCSS 变量

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>

当然，我不想在两个不同的地方维护断点(我打算将其提取到一个帮助器中)，所以我想知道是否有可能读取 ruby​​ 中的 SCSS 变量Rails 中的方法？

Answer 1

我不知道是否有一种方法可以在 ruby​​ 方法中读取 SCSS 变量，但是我想提出一个不需要它的解决方案。

您可以在 helper 中定义值并在您的样式表和 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};
...