How can I pass stylus variables from the main file to the imported one?

Question

How can I pass stylus variables from the main file to the imported one?

Navigation

#1 by (1 votes)

0

I'm doing a grid system with stylus. I have several files .styl with different mixins and functions but to simplify let's say that it is only one called grid.styl . A user who wants to use it would only have to create his own stylus file, import the file grid.styl and start writing his css.

I have a variable in that file that I want the user to be able to modify. The variables have a default value but can be overwritten by the user. The only way I have found to be able to use the user's values is to import their file .styl (actually I have to use @require to not enter a loop but that's the least).

The problem is that I do not know what your file will be called so I have to import the folder where it is, which creates two problems for me, the first one that if the user has several stylus files will import them all and the second one will I force to put the files in a folder and with a specific hierarchy.

Would there be any other way to collect those user values?

Code sample:

user's stylus file

@require 'grid'

ratio = 1.618
base-line-height = 1
base-font-size ?= 14px

.container
  container(800px)
  background-color rgba(240, 240, 240, 0.45)
  padding 20px;

div
    col(1/2, 5%)
    border:solid 1px red

...

grid.styl file

@require '../*'

// estas son las variables que quiero que el usuario pueda modificar
ratio ?= 1.5
base-line-height ?= 1.5
base-font-size ?= 16px

css nodejs stylus

asked by blonfu 06.06.2016 в 10:25

source

1 answer

I can not put a background image on my form .. in visual studio How to get the value of the table calling from php?

score 1 · Accepted Answer

The problem was that I have to import the file after modifying the variables, in this way the user's variables prevail over those of the grid.styl file:

User's stylus file:

ratio = 1.618
base-line-height = 1
base-font-size ?= 14px

@import'grid'

.container
  container(800px)
  background-color rgba(240, 240, 240, 0.45)
  padding 20px;

div
    col(1/2, 5%)
    border:solid 1px red

...

With this I also do not need to import the styles from grid.styl and I avoid the problem of forcing the user to put their styles in a specific place, I can also use @import instead of @require because there is no danger of going into a loop.