时间戳

首页 > 解决方案 > Mixins 存在检查在动态导入的 scss 中不起作用

html - Mixins 存在检查在动态导入的 scss 中不起作用

问题描述

为了使用 scss 实现RTL和LTR样式，我创建了两个 scss 文件_ltr.scss和_rtl.scss，并根据应用程序中用户的国家/地区选择，动态导入相应的样式表。

_ltr.scss

$start-direction: left;

@mixin paddingStart($val) {
    padding-#{$start-direction}: $val;
}

_rtl.scss

$start-direction: right;

@mixin paddingStart($val) {
    padding-#{$start-direction}: $val;
}

main.js //国家切换发生的地方

const root = document.documentElement;
root.classList.remove('rtl');
root.classList.add('ltr');
if (USER COUNTRY DIR VALUE === 'RTL') {
    root.classList.remove('ltr');
    root.classList.add('rtl');
}

_main.scss

html.ltr {
   @import '_ltr.scss';
}
html.rtl {
   @import '_rtl.scss';
}
@if mixin-exists(paddingStart) { //NOT WORKING
    @include paddingStart(10px) 
}

这就是我动态导入 scss 的方式，它可以正常工作。但是如果语句总是失败，则存在 mixin。有什么方法可以让 mixin 在 SCSS 中按预期工作？或者以更好的方式实现这种 LTR 和 RTL 风格的任何选项。因为在我的情况下，用户可以更改国家，并且根据他的选择，我必须动态加载样式。

标签： htmlcsssassvuejs2scss-mixins

解决方案

SCSS 在到达浏览器之前编译并部署，Javascript 在到达浏览器后运行。您正在尝试使用 Javascript 修改 SCSS，但实际上并不存在。

您需要同时加载 rtl.scss ltr.scss，并根据方向应用规则。

对于 rtl，更简单的方法是创建一个 mixin，如果站点在 rtl 中，您可以在其中设置/修改规则。

@mixin rtl {
    body:dir(rtl) &{
      @content;
    }
  }

推荐阅读