css - 如何在 less 和 sass 中使用带有变量的 1 个文件

标签 css sass kendo-ui less semantic-ui

有没有办法只使用一个带有变量的文件并在 sass less CSS 框架中使用它?

在我的 React 元素中,我使用语义 UI (less) 和 kendo react (sass)。出于舒适原因,我只想编写一个文件,其中包含颜色、填充、间隙等变量......

在剑道主题中非常简单。 我也找到了一种在语义中使用变量/主题的方法。 Here is the link

但现在我无法让两个框架同时使用一个 var 文件,因为一个使用 sass 而另一个使用 less。

也可以在线找到任何解决方案。

//语义 site.variables @fontName: 'Lato';

//剑道变量.scss $niceBgColor: 粉色;

最佳答案

@width: 10px;//less
$theme1-PEOGCS:#615149;//SASS dark grey
  • 他们有不同的变量声明方式,你应该 将 LESS 与 SASS 完全分开,以获得最佳实践。
  • 在同一个元素中同时使用两者是不好的做法,除非你真的 必须这样做。
  • SASS 和 LESS 的语法略有不同,你最终会 必须分别维护。

好的做法是例如:

  • 将主文件夹添加到元素名称:SASS

    文件:main.scss

  • 在 SASS 内部创建 Helper 文件夹并将其命名为:Helper

  • 在其中添加这些文件:

    _mixins.scss,_variables.scss,_placeholder.scss 使代码易于维护和重用。同less(similar)

如果有一种方法可以做你想做的事,我不建议这样做,那就是 IF。祝你好运

关于css - 如何在 less 和 sass 中使用带有变量的 1 个文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57306868/

相关文章:

jquery - 如何使用 Kendo UI Grid 加载远程数据?

javascript - kendo ui Angular 网格选择事件

javascript - 使中间 iframe 占据整个 div 宽度

css - 可以设置宽度 % 但不能设置高度

css - 有没有办法覆盖 `overflow` 的内联 CSS?

html - 用输入和按钮均匀填充一个 div

sass - 如何将多个类组合成一个语义命名的类?

angular - 在 ionic 3 中创建自定义对话框/弹出窗口/警报

css - kendo ui Angular 拆分面板更改背景颜色

php - 基本页脚定位问题