Sass effortlessly transforms the color black into its hexadecimal counterpart #000000

I am in the process of developing a mixin that simplifies the task of incorporating multiple fonts in a single line. Within the mixin, I specify the desired font weights as follows:

$font-weights: (
"hairline": 100,
"thin": 200,
"light": 300,
"regular": 400,
"medium": 500,
"semibold": 600,
"bold": 700,
"heavy": 800,
"black": 900,   
);
$main-font: "Lato";
@include font-list($main-font,Hairline Thin Light Regular Medium SemiBold Bold Heavy Black, normal, $font-weights);

When I include the last weight "black" in the @include statement, everything seems to be working fine. However, an error occurs with this particular value, as Sass automatically converts it to #000000 before processing it. Is there a way to prevent Sass from doing this?

Here are the Mixins being used:

@mixin font-include($name, $file, $weight, $type) {
    @include font-face("#{$name}", font-files("#{$file}.woff", "#{$file}.ttf"), "#{$file}.eot", $weight, $type);
}

@mixin font-list($name,$weights,$type,$font-weight){
    @for $i from 1 through length($weights) {       
        @include font-include($name,#{$name}-#{nth($weights,$i)},map-get($font-weight,#{to-lower-case(nth($weights,$i))}),$type);
    }
}

The error message from Compass reads:

 $string: #000000 is not a string for `to-lower-case'

Answer №1

Made a necessary fix by incorporating unquote within the mixin for all font weights.

(Also included a feature for handling Italic fonts).

@mixin font-list($name,$weights,$type,$font-weight){
    $italic: '';
    @if $type == 'italic'{  
        $italic: 'Italic';
    }
    @for $i from 1 through length($weights) {   
        $weight: unquote("#{nth($weights,$i)}");
        @include font-include($name,#{$name}-#{nth($weights,$i)}#{$italic},map-get($font-weight,#{to-lower-case($weight)}),$type);
    }
}

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 issues could arise from utilizing PHP for generating variables within my CSS file?

One major limitation of CSS is the absence of variables. It would be beneficial to have the ability to use variables for controlling things like the location of imported CSS and color schemes within a design. An alternative solution could involve using a ...

pressing the switch will adjust the size of the container

I am looking to implement a feature where clicking on an icon will resize a div to full screen in the browser. Below is the HTML code I have set up for this functionality, and I am open to suggestions on how to achieve this. <div> <a (click)= ...

Personalizing Bootstrap Styles Using Sass

As a newcomer to Bootstrap 5 and Sass, I have been thoroughly enjoying the learning process. However, I have a couple of questions that have come up along the way... When it comes to customizing Bootstrap Sass, I understand the concept of variable overrid ...

What could be the reason my span is not altering color as I scroll?

Important HTML Knowledge <section class="home" id="home"> <div class="max-width"> <div class="home-content"> <div class="text-1">Hey t ...

Having trouble importing CSS in ReactJS?

While working on my project based on next.js, I encountered a situation where loading CSS in other pages was successful: import css from './cssname.css'; <div className={css.myclass}></div> However, now that I am implementing a ligh ...

Pressing the reset button will initiate once the loader has finished

Hello everyone, I'm currently working on creating a button that transforms into a loader when submitted and then reverts back to a button after the form is successfully submitted. I suspect the issue lies within my JavaScript. I'm not sure how ...

Achieve a full page layout with content and attach the footer to the bottom using flexbox in Tailwindcss and Nextjs

How can I use flex-grow to make the body section fill the screen and keep the nav fixed at the bottom? I'm having trouble figuring out which elements to apply these properties to. Can anyone provide guidance on which element should have these styles? ...

Remove the background color from a semi-transparent circular CSS div when it is being dragged

My circular div is being dragged for a drag and drop operation, but there's always a translucent square around it. How can I remove this unwanted effect? body{ background : #BBD1DF; } .dragdemo { width: 170px; height: 170px; line-hei ...

Having difficulty with CSS animation and background issues

I can't seem to get my rotating background to work using CSS keyframe animation. I've tried different things but can't figure out what's going wrong. Below is my code: .main-header { width: 100%; Height: 128px; } .main-header, ...

The display property in CSS can be used to make a table fill out the horizontal space without

I am facing a challenge with floats inside two containers. I need the containers to wrap around the floats while maintaining a minimum height of 100% for both of them (container>another container>floats). I attempted using minimum height, however, i ...

Reducing Bootstrap Navigation Bar with a scrolling logo

Is there a way to make the fixed navbar shrink 50% when it starts scrolling? I've only come across text navbars, but I'm looking for one with a logo. Any suggestions would be greatly helpful. You can access the css and html from that link. ...

Refinement of website footer alignment

As a web designer, I am experiencing difficulty in adjusting the footer on my website. I would like the footer to be fixed at a specific height and remain in the same position unless the content increases, in which case it should move down accordingly. Can ...

Safari not fully supporting CSS translate functionality

When I click a button on my app, an element slides into view and then slides out when I click the button again. This is achieved using a combination of CSS and JS. It works perfectly in Chrome and Firefox, but only partially in Safari. In Safari, the elem ...

The jQuery append function does not take into account the styling applied to the div

Whenever I click the "add item" button, I want to append a new line (a text input) to the main content. This functionality is working correctly. However, the issue arises when adding the text input using jQuery. The CSS styling, including width and height ...

What is the best way to create a line break in a flex div container to ensure that overflowing items wrap onto the next line using

Using material-ui popper to display a list of avatars. Trying to arrange the avatars horizontally within the popper. <Popper style={{ display: 'flex', maxWidth: '200px', }}> <div style={{ marginRight: '20px' }}&g ...

The div I'm trying to position at the bottom is currently wedged between other divs

My goal is to move the gray rectangle (<div class="brand"> </div>) below the other elements automatically. Currently, it's stuck between the header and two other body divs. Being a beginner, I'm unsure how to fix this. I've tried ...

Creating a unique Bootstrap background design

I have recently started using bootstrap and I am facing an issue. I want to change the background of a container when hovering over it, but I am having trouble getting it right. HTML <div class="container bg-black h-25 w-25 box"></div&g ...

What is causing my inline JSX styling to override my media query?

After exhausting all my options and searching high and low for a solution, I am completely stuck. Despite trying various methods like importing media queries from a separate file and using ancestors to target elements, I still cannot get this to work. The ...

Altering pointer during drag操作

Is it feasible to customize the cursor during a drag operation? I've been exploring ways to achieve this for some time now. My goal is to replace the default 'not-allowed' cursor that appears when dragging an object with a different cursor. ...

Modify button text when hovered over

Is it possible to modify the text color of "Contacte-nos" on hover? .popmake-contacte-nos { background-color: #fffff7; /* Green */ border: none; color: black; font-weight: bold; padding: 15px 32px; text-align: center; text-decoration: n ...