css - @mixin 未在 saas 文件中定义

Question

这是我的 Rails 应用程序中的 Assets 文件结构

assets
-- stylesheets
----- application.scss
----- homes.scss

Gemfile 包含

gem 'bootstrap-sass'

application.scss 包含

@import "bootstrap-sprockets";
@import "bootstrap";

homes.scss 包含

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
   .shop{
     height: 250px;
     border: solid 1px #000;
   }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {  }

当我运行应用程序时，未定义这些混合宏(@screen-sm-min、@screen-md-min、@screen-lg-min)。我不知道我在这里做错了什么。我将不胜感激

Answer 1

Sass 的 import 语句在此上下文中的行为与 CSS 略有不同，因为它将在 Sass 代码编译为 CSS 时使 mixin 可用。您的应用程序单独编译 home.scss 和 application.scss 这意味着当时有问题的 mixin 在 home.scss 中不可用CSS 已编译，因为它们未在此上下文中导入。

您必须将 home.scss 重命名为 _home.scss 并将其包含到您的 application.scss 文件中，然后仅提供服务这与您的标记(假设您当前正在为两者提供服务)或在 home.scss 文件的顶部导入 Bootstrap 依赖项。