Error in PostCSSS: Unable to find the variable "$widthStandard" in "$widthStandard:"

$containerWidth: 90%;
$containerMaxSize: 1200px;

// defining styles for container width
$styledContainerWidth: {
    width: $containerWidth;
    max-width: $containerMaxSize;
    margin: 0 auto;
}

What is the syntax to create the $styledContainerWidth object in PostCSS?

Answer №1

Confusion Between PostCSS and SCSS?

Your previous declaration is doomed to fail!

In SCSS, a variable can only hold one value, not a combination of other properties and values or variables.

Review the proper definitions of 'property' and 'value' here: https://www.w3schools.com/css/css_syntax.asp

Therefore, this sample code is incorrect:

$widthStandard: {
    width: $containerDefaultWidth;
}

Utilize %placeholderSelector or @mixin in SCSS for multiple properties.

$containerDefaultWidth: 90%;
$containerMaxWidth: 1200px;

/* @mixin for reuse*/
@mixin widthStandard: {
    width: $containerDefaultWidth;
    max-width: $containerMaxWidth;
    margin: 0 auto;
}

/* %placeholderSelector to be extended*/
%widthStandard: {
  width: $containerDefaultWidth;
  max-width: $containerMaxWidth;
  margin: 0 auto;
}

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

Is there a way to trigger a Bootstrap modal to open upon clicking on an input?

Currently using Bootstrap, I have a search form and a modal in my project. My goal is to have the modal open when clicking on the search form, rather than having it triggered by a button as most online resources suggest. Is there a way to achieve this func ...

Display a division in C# MVC 4 when a boolean value is true by using @Html.DropDownList

I have multiple divs stacked on top of each other, and I want another div to appear when a certain value is selected. I'm familiar with using JavaScript for this task, but how can I achieve it using Razor? Below is a snippet of my code: <div id=" ...

The images fail to load on Mozilla browser and appear as blank spaces

My images are only displaying as white in Mozilla but fine on other browsers. I've tried using -moz without success. It's a simple fix that I can't seem to locate. Any help would be appreciated. Just a quick note, the images appear blank wh ...

What is the best way to toggle a div and dynamically load content into it while it's open?

I am looking to create a toggle effect where a div opens, loads a page within it, and then can be closed again. My goal is to achieve this functionality with multiple links on the page. <div id="main-nav"> <div id="menu-container"&g ...

Issue with table not remaining inside the div on the content page of WordPress site

I am having trouble with a div on my website. When I include a table in one div it resizes perfectly, but when I do the same in another div using a different template, it doesn't work as expected. To see the issue, please visit: Home page, bottom lef ...

Setting the default selected option in Vue for an object

Can the v-model data be different from the default option in this scenario? data: function() { return { user: { usertype: {}, } } <select v-model="user.usertype" class="btn btn-secondary d-flex header-input"> <option v-for= ...

The Google Visualization chart fails to display properly once CSS is applied

Struggling with a graph display issue here. It's quite perplexing as it works fine on older laptops and Safari, but not on Chrome or older versions of Firefox. Works like a charm on my old laptop and Safari, but fails on Chrome and Firefox (haven&apo ...

Enhanced Interactivity: jQuery UI Dialog Button Transforms Position upon Mouse Hover

I am utilizing the jQuery UI dialog feature and implementing buttons using jQuery in the following manner: $("#151").dialog({ autoOpen: false, autoResize: true, buttons: { "OK": function ...

Unable to pinpoint the source of the excess spacing within a form field

There appears to be some extra space in the text field of my form, extending beyond the container margin. Please refer to the image and JSFiddle http://jsfiddle.net/GRFX4/. Any thoughts on what might be causing this issue? Thank you. HTML: <div id="co ...

Pyramid structure with multiple layers in 3D dimensions

Is it possible to create a 3D multi-level pyramid using CSS and HTML5? I have explored some shape generator websites, but they are not compatible with IE and FF. For example: I also attempted to create a 2D multi-level pyramid, but it did not meet my req ...

I am looking to use jQuery to position a table at the top of the page

At the bottom of the page, there is a table that I would like to reposition to the very top so that it aligns with the top of the browser window (compatible with Internet Explorer and Firefox). What is the most effective method to achieve this? <div i ...

Centering two images by stacking them with Bootstrap 5

I'm working on a bootstrap layout with two columns, and I need to achieve a semi-opaque background image that covers the entire column with a dark overlay. This is to create contrast for a logo that will be centered within the column. I've tried ...

fullpage.js: the content exceeds the height limit

I am currently working on customizing the jquery script fullpage.js for a website built on the French CMS "SPIP" (). This script is used to create a one-page website with both horizontal and vertical navigation. However, I have encountered an issue with ...

Adjust the translateX value and element size based on either the parent element's size or the window's dimensions

Is this question specific enough to relate to others' problems? My issue involves two elements, a child and a parent, with the child element rotating around the parent using CSS animations. <div class="planet"> <div class="moon"></di ...

What steps should I take to address these styling challenges?

Recently, I came across some code that uses the hspace attribute which is now considered outdated. In order to create space between elements in a widget, I am looking for a solution that involves adding 10px of space above and between the items using CSS. ...

Using RadStyleSheetManager for Optimizing CSS Caching

After implementing the RadStyleSheetManager in my master pages using the given code snippet, I noticed a significant improvement in the performance of my web application. In Internet Explorer 8, the number of dynamically generated WebResource.axd files had ...

Guide to incorporating external CSS and JavaScript into an Angular 2 project with Express.js and Node.js

As a newcomer to Angular2 and NodeJs, I am eager to learn how to integrate external CSS and JS in an Angular2 and Nodejs express app. Specifically, I am looking to integrate a bootstrap admin theme into my Nodejs application. The screenshots below provide ...

Issues with Twitter Bootstrap Rendering in Internet Explorer

Encountering significant challenges in making a Twitter Bootstrap site compatible with Internet Explorer. Visit for the site in question. Below are screenshots from Chrome and Internet Explorer along with the corresponding HTML code. The issue is with the ...

Halt the execution of code once the user unselects the div

Is there a way to prevent the setInterval function from running when the user unselects the div they originally selected? I've tried using clearInterval but it's not working. Also, utilizing the cvalue from this doesn't seem to update within ...

Having trouble with the functionality of CSS and JavaScript on styled input buttons in modern browsers? (IE 8/9, FF 9)

I am currently developing a website that includes input buttons styled with CSS as part of a form. For example, check out the sample code below: <input type="submit" name="buttonSave" value="save" id="buttonsavejs" class="button_image button_style"/> ...