是否可以在 styled-component @media 查询中使用 Sass 变量？答案

【问题标题】：Is it possible to use Sass variable within styled-component @media query?是否可以在 styled-component @media 查询中使用 Sass 变量？
【发布时间】：2021-07-19 00:55:46
【问题描述】：

我已经定义了 sass 变量 $mobile

$mobile: "(min-width: 320px) and (max-width:479px)";

所以在scss文件中我需要使用@media查询的每个地方，我都可以通过以下方式使用它：

@media #{$mobile}  {
      max-width: 100%;
      width: 100%;
      height: 100%;
    }

是否可以以与styled-componenents 相同的方式使用$mobile 变量？

我尝试像使用其他 sass 变量一样导出此变量：

:root {
  --c-global-red: #{$c-global-red};
  --mobile: #{$mobile};
}

现在如果我需要在 styled-component 中使用例如 $c-global-red，我可以这样做：

const StyledDiv = styled.div`
    color: var(--c-global-red);
`

我可以使用相同的方法来使用带有@media 标记的--mobile 变量吗？像这样的：

const StyledDiv = styled.div`
    color: var(--c-global-red);
    @media var(--mobile) {
        color: blue;
    }
`

【问题讨论】：

标签： reactjs sass styled-components

【解决方案1】：

虽然您可以在样式组件中引用全局 CSS 变量，但您不能引用 sass 变量或包含字符串的全局 CSS 变量。相反，您需要将 ThemeProvider 与主题变量结合使用。

演示

在 Codesandbox 编辑器中，通过左右移动来调整中间滚动条以查看 Button 的变化。

之所以有效是因为theme.mobile 在创建样式时被插入到"(min-width: 320px) and (max-width:479px)"：

@media (min-width: 320px) and (max-width:479px) { ... }

而var(--example) 只是插入到字符串"var(--example)" 中，这是无效的CSS syntax：

@media var(--mobile) { ... }

请注意，这可能会或可能会被视为反模式，因为您依赖于全局 CSS 样式表中的全局 CSS 变量。您可以完全避免使用 CSS，只需使用 theme variables。

代码

App.js

import { ThemeProvider, css } from "styled-components";
import Button from "./Button";
import "./styles.css";

const theme = {
  mobile: "(min-width: 320px) and (max-width:479px)"
};

export default function App() {
  return (
    <div className="app">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Button>No Theme</Button>
      <br />
      <ThemeProvider theme={theme}>
        <Button>With Theme</Button>
      </ThemeProvider>
    </div>
  );
}

Button.js

import styled from "styled-components";

const Button = styled.button`
  cursor: pointer;
  color: var(--white);
  background: var(--blue);
  outline: 0;
  border: 0;
  margin: 10px 0;
  border-radius: 3px;
  padding: 20px;

  :hover {
    background: var(--darkblue);
  }
  
  ${({ theme }) =>
          `@media ${theme.mobile} {
          ${css`
             background: var(--pink);

            :hover {
              background: var(--darkpink);
            }
          `}
    }`}
`;

export default Button;

styles.css

.app {
  font-family: sans-serif;
  text-align: center;
}

body {
  margin: 0;
  padding: 0;
}

:root {
  --blue: #1e87f0;
  --darkblue: #0f7ae5;
  --white: #ffffff;
  --pink: #ff93ac;
  --darkpink: #ff6289;
}

【讨论】：