Sass中媒体查询内CSS变量失效：768px样式未应用

Hey there! Let's troubleshoot why your 768px media query isn't applying those CSS variable changes. Here are the most common fixes and checks to run through:

1. Double-check your media query syntax & placement #

First off, make sure your media query is written correctly and placed after your default :root variable definitions. CSS uses "last declared wins" logic, so if your media query comes before the base :root styles, those default variables will override the breakpoint-specific ones.

A correct setup should look like this:

/* Base global variables */
:root { 
  --profile-picture-size-w: 9rem; 
  --profile-picture-size-h: 9rem; 
  --profile-picture-border: 1px solid #1e96a9; 
  --profile-box-backgound-size: cover; 
  --profile-box-p: 20px 0; 
  --article-dateInfo: 3px; 
} 

/* Your component styles (make sure all properties use var()) */
.component #main_content .scrollbarContent article#profile .profileBox {
  background-size: var(--profile-box-backgound-size); 
  padding: var(--profile-box-p); 
}

.component #main_content .scrollbarContent article#profile .profileBox .profilePicture {
  width: var(--profile-picture-size-w);
  height: var(--profile-picture-size-h);
  border: var(--profile-picture-border);
}

/* Media query - placed AFTER base styles */
@media (max-width: 768px) {
  :root {
    --profile-picture-size-w: 6rem; /* Adjusted for mobile */
    --profile-picture-size-h: 6rem;
    --profile-box-p: 15px 0;
    /* Add other variable overrides here */
  }
}

2. Verify you're actually using the variables in your component #

Looking at your snippet, the .profilePicture section cuts off—make sure you're referencing the variables there instead of hardcoding values. For example:

.profilePicture {
  width: var(--profile-picture-size-w); /* Correct */
  height: var(--profile-picture-size-h);
  border: var(--profile-picture-border);
}

If you wrote width: 9rem; directly, changing the variable won't have any effect.

3. Check for breakpoint logic mix-ups #

Did you accidentally use min-width: 768px instead of max-width: 768px? If your goal is to target screens smaller than 768px, max-width is what you need. Using min-width would only apply the styles to screens larger than or equal to 768px.

4. Use dev tools to debug #

Open your browser's developer tools (F12):

• Go to the Elements > Styles tab, and look for your @media (max-width: 768px) rule. When your screen is under 768px, this rule should show as "active" (not grayed out).
• Select the .profilePicture element and check the Computed tab to see if the variable value is being applied, or if another style is overriding it (look for strikethrough text indicating overridden styles).

5. Avoid nesting media queries inside component selectors #

If you're using a preprocessor like Sass/Less, don't nest the @media rule inside your .component selector. :root is a global selector, so keeping the media query at the top level ensures it properly overrides the global variables.

内容的提问来源于stack exchange，提问作者Vugar Abdullayev