What is the best way to access Sass variables in a different Sass file?

I'm currently working on a WordPress theme and running into an issue with utilizing SASS from another file using the @use method. For those of you who may not know, the @import rule method will soon be deprecated which is why I am trying to implement this new approach. Here are the contents of my files:

//_brand.scss
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

Now moving onto...

//footer.scsss
@use 'brand' as b;
.footer{
    padding: 0px 5%;
    background-color: b.$base-color;
}

However, when I try to compile, I encounter the following error message:

Compilation Error
Error: Invalid CSS after "...ground-color: b": expected expression (e.g. 1px, bold), was ".$font-size;"
        on line 5 of sass/opt/lampp/.../sass/footer.scss
>>     background-color: b.$base-color;

I have been utilizing the "Live Sass Compiler" extension in Visual Studio Code for compiling to CSS.

csssass

Answer №1

To access the variables that you have defined in the brand.scss file from other files, you can make use of the @import directive. Simply include the following line in your footer.scss file:

@import "brand";

Reference: https://www.w3schools.com/sass/sass_import.asp

I trust that my response will be beneficial to you

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

What is the reason behind my button appearing beneath my links in React?

https://i.sstatic.net/Qmm4z.jpg Here is an image showcasing the current header render. The header consists of a HeaderMenu and 3 Links. While the links are functioning properly, the HeaderMenu is causing the links to be positioned below it. The HeaderMenu ...

javascripthtmlcssreactjsmaterial-ui

Alter the style of a div by clicking on a button

Can the background image of a div be changed by selecting a button outside of the div? For example: HTML <div id="change"></div> <div id="buttons"> <button class="button1">this</button> <button class="button2"> ...

javascriptjqueryhtmlcss

Styling QSpinBoxes in QColorDialog without affecting QAbstractSpinBox styling with QSS

To give our Qt desktop application a stylish look, I have been utilizing Jorgen-VikingGod's impressive QSS framework as a foundation. Unfortunately, we encountered a hurdle when it came to usability on a dated tablet device running Windows. The tiny s ...

cssqtqtstylesheets

I am interested in adding a personalized icon to the progress bar in Material-UI

I am currently using the MUI linerProgressBar design. I would like to incorporate a custom UI Icon that moves along with the progress. Are there any examples of this available? I have searched for one in MUI but haven't found anything. If you know of ...

cssreactjstypescriptnext.jsmaterial-ui

In relation to User Interface: Analyzing target tracking and studying the flow of time

Is there a way to track mouse cursor movements, button clicks, and click times to an external database using only CSS, HTML5, and Javascript? I am curious about the possibility of conducting usability studies in this manner. ...

javascriptcsshtmltrackingusability

Left-align the tab elements

I am looking to customize this example for Vertical tabs. Sandbox: https://codesandbox.io/s/v0p58 My goal is to have the tabs aligned on the left side. I attempted to include: alignItems: 'left' tabs: { borderRight: `1px solid ${theme.palet ...

cssreactjsmaterial-ui

Developing a custom styling class using JavaScript

Looking to create a custom style class within JavaScript tags. The class would look something like this: #file-ok { background-image: url(<?php echo json.get('filename'); ?>); } Essentially, the value returned from the PHP file (json ...

javascriptjquerycssajax

Align two spans within a div using the margin auto property

I often find myself struggling with the basics, it seems like I can't figure this out. I want the two spans to be centered within the div with auto margins... https://jsfiddle.net/5k4pnmf7/ <div class='foo'> <span class='bar& ...

htmlcss

Conceal content with transparent layer

Recently, I've been working on an animation where the logo is unveiled as a div moves downward. The div itself has a transparent background. I'm curious if it's feasible to hide parts of the logo behind the transparent div? <div class=" ...

htmlcss

Issue with parallax scroll feature on Mobile Safari not functioning as expected

I created a JavaScript code for parallax scrolling on an image at the top of a webpage. The code functions perfectly on Chrome, Firefox, Internet Explorer, Opera, and Safari on desktop. However, when I tested it on Safari on my iPad, the parallax effect wa ...

javascriptjqueryioscssmobile-safari

Distinct styling for the start and subsequent lines of an anchor element using ::before pseudo-element

I'm currently working on a project that requires adding a decoration in front of some anchor links (A). Right now, I am using ::before to achieve this. However, there is an issue where some of the links will line-break and the second line and subseque ...

css

Challenges with organizing content using spans in Bootstrap 3

Looking for some help with TB3 here. I've created a jsFiddle to showcase my attempt at building a small minitron, which is essentially a mini jumbotron. https://i.sstatic.net/VxruB.png The idea is to have each 'minitron' contained within a ...

csstwitter-bootstrap-3

Tips for creating a flexible popover widget

I am facing an issue with my project that has a popover (ng-bootstrap) similar to what I need. The problem is that the tooltips and popovers are not flexible when it comes to resizing the page. To address this, I attempted to put a mat-grid (which works pe ...

htmlcssangular

Guide on obtaining an obscure style guideline in MS Edge using JavaScript

If you are looking to utilize the object-fit CSS rule, keep in mind that it is not supported in MSIE and MS Edge Browsers. While there are polyfills available for IE, none of them seem to work in Edge from my experience. For instance, the polyfill fitie b ...

javascriptcssmicrosoft-edgeobject-fit

Optimizing CSS table styles for larger cell width

In my CSS file, I have defined the following style: .ES{ max-width:20px; word-wrap:break-word; } However, when I apply this to my table... <table border="1" cellpadding="2" class="ES" > <tr> <td><input name="rbeso" type="radio" ...

htmlcsshtml-table

Whenever I select a link on a navigation bar, it transports me to the desired section of the page. However, I often find that the navbar ends up

Recently, I came across some website templates where clicking on a link in the navbar smoothly scrolls to the corresponding section with perfect alignment. The content at the top of the page aligns perfectly with the top of each division. Upon attempting ...

javascripthtmlcssnavbar

Ways to eliminate hover effect in CSS

I have a text that is currently displayed as a hyperlink, and some CSS code is causing it to underline and become bold when hovered over. I want to remove the hyperlink, but still keep this style by default without needing to hover over the text. Here is m ...

htmlcssclass

Is there a way to manually change the field color upon approval in AngularJS?

Within my application that utilizes the MEAN stack, I am using AngularJS as the front-end technology. How can I manually change the color representation of a tolerance value to 159.06 in a table? Check out my Plunker for more details. Please refer to m ...

htmlcssangularjsmeanjs

Whenever I insert an http link for FontAwesome, the icons work perfectly fine. However, when I try to host it locally,

After providing the CDN link: <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"> The icons are displaying correctly and everything is working fine. You can view the code on ...

htmlcssfrontendfont-awesomeweb-frontend

Upgrade from Vuetify 2 to Vuetify 3, new changes including the elimination of v-list-item-content and v-list

I'm currently in the process of upgrading from Vuetify/Vue 2 to Vue 3. As someone who is not primarily a front-end developer, I have been tasked with updating some older code to ensure everything continues to work smoothly. However, I've run into ...

cssvue.jsvuejs3vuetify.jsvuetifyjs3