stylus-lang.com | Official Stylus docs

This is my first post on this website so please forgive any formatting/ etiquette issues etc. I have recently learned flexbox on TeamTreehouse and decided to make a project to apply my new knowledge. The project takes heavy inspiration from http://stylus-lang.com/. The project (atleast the way it theorized it) seemed simple at first in terms of objectives)

• Two column layout using a main column that takes up around 70% of the viewport while the other column takes 30%

• first/main column will have its own scrollbar

• Second column will simply be a list that serve as links

• using flexbox make columns responsive and at a smaller viewport breakpoint make the second list column merge into a single column layout with the list column on top to serve as a header with its own separate scrollbar (look at http://stylus-lang.com/)

I have 7 CSS files for pages design of my site. Designs differ only by colors. Everything else in the CSS files is duplicate information.

I have static site (HTML+CSS+JavaScript), I use Stylus.

Can I use any method reduce the amount of code not to write the same thing in my 7 CSS files?

For example, I have SashaYellowDesign.css file:

The Context

I'm building an infinite horizontal scroll of images:

I have a Vue2 project with Webpack template and I am using Stylus as CSS preprocessor (stylus, stylus-loader already installed and working).

I can not find a way to apply plugins for Stylus like rupture.

I tried to modify the options in build/utils.js for the stylus loader like so:

I have a dreaded height problem in html, IE9 and above, avoiding flex-box:

• I have header of one to three lines heigth (highly depends)
• the vertical rest of the page shall be filled a section. With scrollbars to that section, in case it's contents grow to long.

In simplied stylus syntax, or as a full codepen:

I'm in the situation that I want to assign the same CSS rules to several selectors and normally I use Stylus interpolation assigning several classes to a variable.

I have a webpack 2 app which uses css modules

I now just want to start using stylus as well.

I guess the solution is to update my webpack.config.js:

current webpack.config.js:

I'm trying to do something that I think is probably simple -- output all h1 through h6 selectors. I had more success creating a mixin that also outputs a property and a value for that property than just interpolating into the selector, but even then I couldn't manage to create a mixin that would successfully take any arguments for the property and the value.

I might have ended up with a mixin that did the job in one particular place. How can I modify this solution so that I can use it for any property and value combination?