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..

    How do I create a class hierarcy in CSS for MVC4 Razor?

    How to select an UNTAG element in CSS

    How to make a better transition of

    How can I create a CSS selector to select when a link does not have a class of folder or start class starting with title?

    how to align image and text when floating to image

    how to add a different text box in input text type

    How to apply master page and css to child page

    How to not apply a css block?

    How to make the progress bar with html css javascript

    How to use the not selector correctly in CSS [duplicate]

    How to make an arrow pointing down after a section in HTML/CSS

    How to CSS a two column list of items?

    How to get all child elements using an xpath selector?

    How to make other line indent using css?

    How can i apply and/or remove a CSS class upon user selection on Radiobuttons with JQuery?

    Progress Bar in jquery showing reverse animation

    How to make visual changes with dynamically generated HTML code?

    How do I add a margin between bootstrap columns without wrapping

    How do I auto play my slideshow

    How to increase-decrease the number (i.e. 0, 1,4..) size in CSS?

    How can I move text to the left with CSS?

    how to add a border-radius css curl

    How to display a button over a picture only when hovering it?

    How to check if Html element has a background-image css property in WebBrowser control C#

    How can i stop my text css from over-riding my form on my blog?

    How do I align an item to the right inside a flex container?

    Hide field on small viewport, click button to show again

    How to make the css asset follow a certain order in symfony2 projetcs

    Floating divs, different height, building from left to right. how to fill vertical gaps between levels?

    How do I achieve a fully working image scrolling effect like in this example?