How to use a variable for a path with Stylus?


Tags: css,stylus

Problem :

I have set up a variable that defines a location to fonts but stylus/console is not showing me the fonts and not throwing any errors.

$as-font-path = '../assets/fonts/';

@font-face {
  font-family: 'FontAwesome';
  src: url('{$as-font-path}fontawesome-webfont.eot?v=4.3.0');
}

When I go to developers tool and the Network tab and locate to the css file it does not show my the content of the variable but: src: url("{$as-font-path}fontawesome-webfont.eot?v=4.3.0"); . So I am not sure how to proceed.

I am using gulp version 3.9.0.

Any help appreciated.

Stylus documentation



Solution :

Unfortunately currently Stylus doesn't support interpolation inside strings. You should use concatenation in this case:

$as-font-path = '../assets/fonts/';

@font-face {
  font-family: 'FontAwesome';
  src: url($as-font-path + 'fontawesome-webfont.eot?v=4.3.0');
}

    CSS Howto..

    Switching styles (Class) on a function that show and hide a div tag content

    How to override the height of parent node using CSS?

    how to style a symfony2 form button

    How to change height of ui-grid row?

    How to display a division over other element

    How to get similar effect on menu

    How to get the “true” computed CSS width in Chrome / IE

    How to align a

    into

    or when content it is dynamic?

    How do I make a Javascript alert display only once, ever? [closed]

    Wordpress- How do i change the default font of navigation menu?

    How to prevent opening multiple popup windows?

    How to segregate these divs with 'position:absolute' into different groups?

    How to style placeholder text color for individual text field?

    How to fit the parent of a CSS transformed HTML element?

    CSS only: how to make a div the width of its biggest row, with children as inline-blocks?

    How do I make the Brand, links, and facebook link on the same line? Bootstrap 3

    How to prevent CSS table row expanding to parent height

    How to remove this head css styling with javascript?

    how to stop css hover out with a conditional

    How to add text under every image?

    How do I set the width and height of a textarea using CSS?

    Getting a resolution error on Chrome and Firefox for C9 app. Not sure how to resolve

    CSS: How to create buttons with reflected shine similar to iOS icons?

    how to make the position of div is fixed even though it's empty?

    How to show a node in a block in drupal 7

    How to resize div with CSS by the border

    In CSS, how to select a particular tag under mutiple ids?

    how to add css for div tag

    How to move the text a bit up and to the right?

    How could I use postcss-bem with css-modules or postcss-js in React component