在 SCSS 脚本中更改粗体颜色

问题描述 投票:0回答:2

我是一个初学者,正在努力完成在预先编写的 scss 文件中更改 粗体文本颜色 的基本任务。我只是找不到明显的解决方案。

API 似乎预定义了颜色参数,我很难找到如何在导入嵌入代码之前或之后更改它们。

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@400;600;700&family=Source+Sans+Pro:wght@400;600&display=swap');
:root {
  --font-body: "Source Sans Pro";
  --font-header: "Inter";
  --font-mono: "Fira Code"
}

// typography
html {
  scroll-behavior: smooth;
  &:lang(ar) {
    & p, & h1, & h2, & h3, article, header {
      direction: rtl;
      text-align: right;
    }
  }
  & footer > p {
    text-align: center !important;
  }
}

.singlePage {
  padding: 4em 30vw;
  margin: 0 auto;
  max-width: 1000px;
  @media all and (max-width: 1200px) {
    padding: 25px 5vw;
  }
}

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  box-sizing: border-box;
  background-color: var(--light);
}

我希望文本的主体在 bolded 时变为粉红色(#ff82b2)。 我试图通过调整提供的 scss 文件中的参数来更改它。

css sass colors webfonts typography
2个回答
0
投票

您可以为bstrong标签添加样式。

b, strong {
    color: #ff82b2;
}

这不会影响默认情况下为粗体的标题(h1、h2 等)或在其他地方设置为粗体样式的其他元素。


0
投票

我会按照上面的建议去做,但是把它放在 body style 里面但是在结束之前 }

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  box-sizing: border-box;
  background-color: var(--light);
  
  b, strong { //you add h1, h2, h3, h4, etc.
    color:pink;
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.