Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

No variables support? #8

Open
robhrt7 opened this issue Jun 6, 2013 · 10 comments
Open

No variables support? #8

robhrt7 opened this issue Jun 6, 2013 · 10 comments

Comments

@robhrt7
Copy link

robhrt7 commented Jun 6, 2013

No description provided.

@yoshuawuyts
Copy link

Variables are supported through the vars plugin which is included by default in Rework & Styl.

@robhrt7
Copy link
Author

robhrt7 commented Jun 6, 2013

How to enable vars plugin, to get it work like in example?

@tj
Copy link
Owner

tj commented Jun 6, 2013

there's one we'll probably add to styl by default (that one in rework is being moved out of core)

@pyronaur
Copy link

pyronaur commented Jun 8, 2013

Yep. Variables and Math (is it there?) are missing.
I think Rework and style are actually going in the right direction, with keeping the mixins, functions to a language that is supposed to be used for that sort of thing.
However, I can't imagine my life without:

$base_font_size: 16px;
$base_line_height: $base_font_size * 1.6;

$padding: $base_line_height;
$halfling: $base_line_height / 2;

.box__title {
  margin-bottom: $halfling * 2.4;
  font-size: $base_font_size * 2.4;
}

.box {
padding: $padding;
margin: $halfling;
}

Not the most sensible example, but it demonstrates 2 issues I might have.

  1. var(padding): var(base-line-height) * 1.6 seems like an overkill. Since I started writing Coffeescript, I prefer not to have parentheses most of the time. Why add them to variables ? And what's with the "var". Yes I can set my text expander to expand $ to "var", but it seems a bit like an overkill.

  2. Most of the time I think in relative sizes.
    When doing "$padding * 2",

  • I keep myself on track. I have 51.2px instead of 52px, just because I would feel better adding a random +0.8px to round it off.
  • If I suddenly feel the necessity to add the +0.8px, the person reading the code after me, still can figure out, that I just did a ceil/floor/round($padding * 2) - just by looking at it, instead of going "I wonder where did this magic number (52px) come from".

@tj
Copy link
Owner

tj commented Jun 9, 2013

yup, I started another lib called css-value to parse the values into nodes we can use for the math portion etc

@Zearin
Copy link
Contributor

Zearin commented Jun 12, 2013

@visionmedia You are a library-writin’ fool!

Keep up the great work. I love your code. :)

@vendethiel
Copy link
Contributor

this exactly

@robhrt7
Copy link
Author

robhrt7 commented Jun 12, 2013

So what's with the variables, is it hard to turn them on in Styl?

@tj
Copy link
Owner

tj commented Jun 12, 2013

@operatino I've been helping with this plugin https://github.com/bloglovin/node-rework-variant we'll probably go with that one, already seems like he might not have time to maintain it though haha, might have to fork

@abernier
Copy link

abernier commented Jan 7, 2014

👍 for a built-in solution for variables

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants