SASS fails to recognize the variable

I am trying to incorporate borders based on specific @media breakpoints. Here is the code I have written:

@media(max-width:767px) { $height: auto; $grid: 1; }
@media(min-width: 768px) and (max-width:991px) { $height: 370px; $grid: 2; }
@media(min-width: 992px) and (max-width:1199px) { $height: 240px; $grid: 4; }
@media(min-width: 1200px) { $height: 195px; $grid: 6; }

article:nth-child(-n+#{$grid}) {
    border-top: 1px solid #353535;
}

When I try to compile this SASS code, I receive an error saying Undefined variable: "$grid". I'm unsure as to why this is happening. Any suggestions on how to resolve this issue?

csssass

Answer №1

Trying to access $grid outside of the media query scope where it's defined can result in it not being recognized by the SASS compiler.

For proper recognition, ensure that any declarations using $grid are made either within the media queries or outside of them.

If you define $grid outside of the media queries or within one of the media queries setting, it should work as expected.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to reach the top of an absolute or centered div when it exceeds the height of the viewport

I have successfully created a centered div with position: absolute/top: 50%/left: 50%/transform: translate(-50%, -50%) css properties on my website. However, I am facing an issue where the height of the div exceeds the viewport height and scrolling to the ...

htmlcss

Using webpack to load the css dependency of a requirejs module

Working with webpack and needing to incorporate libraries designed for requirejs has been smooth sailing so far. However, a bump in the road appeared when one of the libraries introduced a css dependency: define(["css!./stylesheet.css"], function(){ &bsol ...

javascriptcssrequirejswebpack

Tips for converting inline CSS to stand-alone attributes without any cost

I am attempting to modify an au generated HTML code, for example: <div class="intro editable" id="field_text">text <strong>text</strong> text <span style="text-decoration: underline;">text</span> <span style="color: #ff00 ...

phphtmlcssregex

CSS swapping versus CSS altering

Looking to make changes to the CSS of a page, there are two methods that come to mind: Option 1: Utilize the Jquery .css function to modify every tag in the HTML. For instance: $("body").css("background : red") Alternatively, you can disable the current ...

javascriptjquerycss

NodeJS is facing a severe challenge in properly rendering HTML and its accompanying CSS code, causing a major

Once upon a time, I built a beautiful website while practicing HTML, CSS, and JS. It had multiple web pages and used Express for the backend. Unfortunately, I lost all the files associated with it and took a break from web programming for some time. Now, w ...

javascripthtmlcssnode.jsexpress

Unable to fix gap at the base of the jumbotron

Utilizing the jumbo tron to display a hero image of psd, there seems to be a gap at the bottom that I have tried to adjust with margin-bottom: 0px without success. .jumbotron { background-image: url(image/background.png); background-repeat: no- ...

htmlcsstwitter-bootstrap

Is VS Code highlighting compatible with template string CSS in Emotion?

Is there a way to enable syntax highlighting for emotion's template string css in VS Code? I've been looking for plugins, but all of them seem to focus on snippets. I have tried using css({ camelCaseCssProps:...}), which works. However, I am att ...

cssvisual-studio-codestyled-componentssyntax-highlightingemotion

Create a border around the text using a strokeoutline

I'm attempting to apply an outline to text using CSS. The issue I'm facing is that the shadow doesn't work well for perfectly stroked text. Is there a way to achieve this with just CSS? Below is the code snippet I am currently using: . ...

htmlcss

Unknown CSS element discovered: bootstrap, gradient, carousel

I recently created a random quote app using javascript, jQuery, and bootstrap on Codepen. Everything worked perfectly there. However, when I organized the files, pushed them to git, and tried to view the app from Safari, I encountered some warnings and t ...

javascriptjquerycsstwitter-bootstrap

Uninterrupted text streaming with dynamic content that seamlessly transitions without any gaps

I'm currently facing a challenge with an outdated element like <marquee>. Here's a fiddle where you can check it out: https://jsfiddle.net/qbqz0kay/1/ This is just one of the many attempts I've made, and I'm struggling with two m ...

javascriptjqueryhtmlcss

The concept of vertical alignment within the CSS Grid system

I am attempting to utilize CSS grids in order to vertically align an unordered list. However, I am encountering the following layout: *A******* *B * *C******* ********* * * ********* ********* * * ********* While the grid template rows a ...

csscss-grid

Incorporating fresh CSS styles through Selenium

I am attempting to showcase all the prices available on this page using Selenium and Chrome in order to capture a screenshot. By default, only 3 prices are visible. Is there a way to disable the slick-slider so that all 5 prices can be seen? I have tried r ...

pythoncssseleniumweb-scrapingslick.js

Switching the theme color from drab grey to vibrant blue

How can I change the default placeholder color in md-input-container from grey to Material Blue? I have followed the instructions in the documentation and created my own theme, but none of the code snippets seems to work. What am I doing wrong? mainApp. ...

javascriptcssangularjsangular-materialmean-stack

Horizontal rule spans the full width of the content, appearing within an ordered list

Check out this example to see the issue with the horizontal rule not extending all the way across under the number. I've tried using list-style-position:inside;, but that interferes with positioning the number correctly due to the left image being flo ...

htmlcss

Display elements on hover of thumbnails using CSS

I'm struggling with the logic of displaying images when hovering over corresponding thumbnails using only CSS. If necessary, I can do it in JavaScript. Here's my latest attempt. <div id='img-container' class='grd12'> ...

javascripthtmlcss

Struggling to make css selector acknowledge the margins on the right and left

I am trying to style two inner divs within a containing div by floating the first one to the left and the second one to the right. Additionally, I want to add a margin of 15px on the left for the first div and on the right for the second div. The challenge ...

htmlcss

"Attempting to troubleshoot a calculator built with html, css, and js. I'm stumped as to what could

After following a tutorial on YouTube, going over the code multiple times, and still experiencing issues with the calculator. Sometimes it works fine, other times certain buttons like (+, -, x, ⁄) don't function properly. I've provided the enti ...

javascripthtmlcsscalculator

Tips for avoiding anchor tag text from being split across two lines when resizing

One issue I am facing is with an anchor tag that displays the name of the logged-in person. The problem arises when resizing the browser window, causing the name to split across two lines. Is there a way to prevent this from happening? ...

htmlcss

Unable to remove the vertical dropdown menu padding issue in Firefox

issue: https://i.stack.imgur.com/qisVn.jpg My website appears correctly on IE, Opera, and Chrome, but in Firefox, there is a spacing problem between each image in the dropdown menu. I suspect the issue lies within the CSS code. The same spacing issue occ ...

csspadding

The background image fails to load the specified image

I am encountering an issue with utilizing background-image in the style of my HTML page. I am currently developing a login page for my Django application, and when I preview the page, the background image does not appear. Strangely, this code was functioni ...

htmlcssbackgroundbackground-image