css - mixins 覆盖媒体查询样式-6ren

css - mixins 覆盖媒体查询样式

转载作者：太空宇宙更新时间：2023-11-04 05:59:54

25

4

我有一些 JS 功能可以更改 body 元素上的 css 类。基于一次点击，我将我的 body 元素的 css 类更改为以下之一:.font-default、.font-medium 和 。字体大。

我有以下混入，它们根据 body 元素的类确定元素的字体大小。看起来像这样:

@function rem-calc($size) {
  $remSize: $size / 16;
  @return #{$remSize}rem;
}

@mixin font-size($size) {
  @if $size >= 20 {
    font-size: rem-calc($size);
  } @else if $size == 18 {
    font-size: rem-calc(18);

    .font-large & {
      font-size: rem-calc(20);
    }
  } @else {
    font-size: rem-calc($size);

    .font-medium & {
      font-size: rem-calc($size + 2);
    }

    .font-large & {
      font-size: rem-calc($size + 4);
    }
  }
}

我使用这个mixin的例子如下:

.content {
  @include font-size(16);

  @media (min-width: 1024px) {
    @include font-size(30);
  }
}

这是底部链接代码笔上相应的 html 和 css:

<body class="body">
  <div class="content">Content</div>
  <button class="button">
    click to add
  </button>  
</body>

<script>
const button = document.querySelector('.button')
button.addEventListener('click', () => {
  console.log(document.querySelector('.body')) 
  document.querySelector('.body').classList.add('font-medium');
})
</script>

根据我的规则集(mixin)，在桌面版本中，font-size 应该保持不变，因为 size >= 20。但是在实践中，当我单击将类更改为中等的按钮时，它使用样式的“移动”版本并覆盖放置在媒体查询中的样式。

有没有关于特殊性的问题，这样我仍然可以使用这个 mixin，这样移动样式就不会渗透到媒体查询中嵌套的样式中？

如果不是，这个问题可能有什么不同的解决方案？

这里有一支笔可以说明问题。单击按钮时，我希望字体保持不变。 https://codepen.io/rv-akim/pen/WVJpWj

最佳答案

你可以清楚地看到.font-medium .content正在覆盖 .content由于前者更具体，尽管 .content在媒体查询中。

更新你的代码，让你的字体大小的正常状态使用一个类

@mixin font-size($size) {
  @if $size >= 20 {
    .normal & {
      font-size: rem-calc($size);
    }
  } @else if $size == 18 {
    .normal & {
      font-size: rem-calc(18);
    }
    .font-large & {
      font-size: rem-calc(20);
    }
  } @else {
    .normal & {
      font-size: rem-calc($size);
    }

    .font-medium & {
      font-size: rem-calc($size + 2);
    }

    .font-large & {
      font-size: rem-calc($size + 4);
    }
  }
}

.content {
  @include font-size(16);

  @media (min-width: 1024px) {
    @include font-size(30);
  }
}

将类 normal 添加到您的 body 标签

<body class="body normal">

基本上，在您只声明字体大小规则的地方，我用 .normal & {} 包裹了它

如果你学会了使用 Inspector，以后会省去很多麻烦

关于css - mixins 覆盖媒体查询样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57418943/

25

4

0

文章推荐： css - 仅使用 Typescript 编译 css 文件

文章推荐： linux - 谁能给我解释一下这个 makefile 示例吗？

文章推荐： c - Malloc 重新分配免费

文章推荐： linux - 我想在linux中通过vim blowfish2加密来保护配置文件

mixins - 有没有一种直接的方法来检查某个东西是否是 mixin？
乐 mixins具有两个(或更多)性质，在同一个容器中组合多个值，或者值与角色一起。但是，据我所知，没有一种直接的方法可以检查不是由您创建的变量中的“混合性”。这可能是个伎俩 my $foo = 3
Sass @use 无法将分离的 mixin 文件处理到主 mixin 文件中(错误 : Undefined Mixin)
我对 sass 比较陌生，但是当我学习它时，Sass 网站说要开始使用 @use 而不是 import，所以经过大量的反复试验，我终于弄清楚了如何使用它与导入相同。注意:我使用 Prepros 进行
C++ Mixin，检查模板类型是否实现了特定的 mixin
给定一个看起来像这样的代码片段，我如何编写一个函数来检查给定对象是否实现了某个混合？我尝试使用指针转换，但由于它们具有相同的基础，因此每个结果都是非空的，但我猜测有一个模板化的解决方案，但找不到我可以
TypeScript mixin 受限于另一个 mixin
我正在使用 Typescript 2.2 的 mixin，并且想使用另一个 mixin 的属性。文档显示可以将 mixins 限制为仅混合到某些类中...... const WithLocation
css - Mixin 属性作为另一个 mixin 的参数？
我如何创建一个将嵌套的 mixin 属性用作参数的 mixin？我用下一个例子来解释自己。我有一个“过渡属性”mixin: .transition-property (@props){ -we
mixins - Google Dart 是否支持 mixin？
我浏览了language documentation而且 Google Dart 似乎不支持 mixins(接口(interface)中没有方法主体，没有多重继承，没有类似 Ruby 的模块)。我对此
css - Sass mixin 或返回 mixin 的函数
我想编写返回混合的函数/混合。例如我有这个 mixin: @mixin generate-offsets-from-map($class-slug,$type,$from, $to, $step) {
syntax - `#namespace > .mixin()` 与 `.namespace.mixin()`
所有 Less 文档和教程都使用 #namespace > .mixin()当它进入命名空间时的语法。但是我发现自己更习惯于 .namespace.mixin()语法，即: .namespace()
dynamic - 实例上的 Groovy Mixin(动态 Mixin)
我正在努力实现以下目标: class A { def foo() { "foo" } } class B { def bar() { "bar" } } A.mixin B def a = n
javascript - 我需要如何更改这些 TypeScript mixin 类型定义才能允许定义允许类扩展特征的 mixin？
出于本问题的目的，将“mixin”视为 https://www.typescriptlang.org/docs/handbook/mixins.html 中所述的函数。 .在这种情况下，mixin 扩
javascript - 如何在另一个 mixins 函数中使用 mixins 函数？
如何在 vue mixins 中组合两个函数？ Vue.mixin({ methods: { functionOne: () => { console.log(1)
javascript - 在类定义中使用 mixin 后无法覆盖 mixin 行为
我需要重写 mixin 添加的一些成员函数来自第三方库。问题是:mixin 立即在多个第 3 方类定义中使用，在定义 mixin 的同一个脚本文件中。我只能在此脚本之前或之后插入自定义代码，而不能在两
css - LESS:如何将一个 mixin 作为参数传递给另一个 mixin？
我有一些基本的 mixin，它们使用媒体查询应用一些规则 .on-small(@rules) { @media (@minWidthSmall) { @rules(); } } .on-mediu
node-sass - Mixin 不能在控制指令或其他 mixin 中定义
我尝试安装 npm 包。所有软件包都安装正确。但是当我尝试使用 npm start 运行应用程序时当时发生以下错误: ERROR in ./node_modules/css-loader?{"sou
css - 基于父 mixin 控制嵌套 mixin 行为
这里有两个mixin @mixin parent { .parent & { @content; } } @mixin child($child) { .#{$child} & {
css - 在另一个 mixins 中更改 mixins 参数
我在另一个 mixins 中有一个 mixins .background(@url: @base-url , @repeat: repeat, @pos1: left, @pos2: center
css - 通过另一个 Mixin 参数值包含一个 SASS Mixin
我有这个: 如您所见，我目前有一个包含按钮样式混合宏的条件，无论如何我可以自动包含一个吗？例如: @mixin button($color) @include button-#{$color} 最
c++ - 如何解压在 mixins 主机类中传递的一组元组(最终被转发给 mixins)
我有以下代码，可以很好地将各种 std::tuples 转发到我的“BaseSensor”主机类的各种 mixin。 #include // std::cout std::endl #include
css - SASS 元素设置 : mixins that depend on other mixins
我按照概述的方式组织我的 sass (scss) 文件 here ... stylesheets/ | |-- modules/ # Common modules | |
css - LESS:在 mixins 中使用 mixins 滥用浏览器前缀
所以，这是我的第一个 mixin .3transitions (@value1,@value2,@value3,@duration){ @value: ~"@{value1},@{value2}

首页

博学

6Ren·AI

商城

css - mixins 覆盖媒体查询样式