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

Access to property values without the use of variables #521

Closed
maikeldaloo opened this Issue Sep 15, 2012 · 20 comments

Comments

Projects
None yet
9 participants
@maikeldaloo
Copy link

maikeldaloo commented Sep 15, 2012

Hello,

I'd love to see something like the following implemented in SASS/SCSS.

#container {
    position: absolute;
    left: 50%;
    top: 10%;
    width: 500px;
    margin-left: @width / -2; // -250
}

As you see on the last line, we get the value of 'width' and do some calculations to it.

@nathggns

This comment has been minimized.

Copy link

nathggns commented Sep 15, 2012

The only implementation possible would be an extremely limited one.

Nathaniel Higgins
http://nath.is

-----Original Message-----
From: Maikel D notifications@github.com
Date: Sat, 15 Sep 2012 06:13:15
To: nex3/sasssass@noreply.github.com
Reply-To: nex3/sass reply@reply.github.com
Subject: [sass] Access to property values without the use of variables (#521)

Hello,

I'd love to see something like the following implemented in SASS/SCSS.

#container {
position: absolute;
left: 50%;
top: 10%;
width: 500px;
margin-left: @width / -2; // -250
}

As you see on the last line, we get the value of 'width' and do some calculations to it.


Reply to this email directly or view it on GitHub:
#521

@nex3

This comment has been minimized.

Copy link
Contributor

nex3 commented Sep 28, 2012

I don't think this would provide much value above and beyond using explicitly-declared variables. Also, it might add to confusion for users who would want to use it access the computed value of the variable, whereas Sass could only ever provide the value that's declared in the CSS file.

@nex3 nex3 closed this Sep 28, 2012

@joltmode

This comment has been minimized.

Copy link

joltmode commented Dec 17, 2012

I also approve of such functionality.

I'd find it more than useful in scenarios like:

.row
{
    padding: 0 10px;

    &.input
    {
        padding-left: @padding-left + 65px;
    }
}

Because, defining variables for a shorthand property is a bit of an overkill.

It's actually the same like *Block property access in Stylus, except, SASS could also resolve from shorthand definition.


I'd say, that this is like relative positioning (this proposition) versus absolute positioning (variables). Both can do the same, but the relativity is easier to work with in some scenarios. I think people would use this a lot if such functionality did exist.

@ghost

This comment has been minimized.

Copy link

ghost commented Dec 17, 2012

For what it's worth, I'd find a lot of use for this.

@joltmode

This comment has been minimized.

Copy link

joltmode commented Dec 17, 2012

I bet there are even more people around this community who would only benefit from this.

@chriseppstein

This comment has been minimized.

Copy link
Member

chriseppstein commented Dec 17, 2012

This is a good feature for CSS to add. Sass isn't going to add it because we can't take the document inheritance into account and so it will confuse more people than it helps.

@Grawl

This comment has been minimized.

Copy link

Grawl commented Feb 5, 2014

I want it too.

@dan-gamble

This comment has been minimized.

Copy link

dan-gamble commented Mar 25, 2015

This would be alot cleaner than having to use alot of nested $padding-top variables for example on different classes.

@dbox

This comment has been minimized.

Copy link

dbox commented May 11, 2015

+1

@BenLeggiero

This comment has been minimized.

Copy link

BenLeggiero commented Apr 6, 2018

Is there any chance this could be resurrected?

@nex3

This comment has been minimized.

Copy link
Contributor

nex3 commented Apr 12, 2018

No, the original reason for closing it still stands.

@BenLeggiero

This comment has been minimized.

Copy link

BenLeggiero commented Apr 18, 2018

Awww... I had this same idea way back before I knew Sass or Less even existed. I'd started drafting an idea for a CSS preprocessor that I called MARS, and I included such a reference with a prop() function, like this:

button,
input[type=("button","submit","reset")] {
	padding: 0.5em 1em;
	width: ?(100% - prop(padding-left) - prop(padding-right));
}

Now that I'm all-in with Sass I had hopes it might gain such a feature ☺

@nex3

This comment has been minimized.

Copy link
Contributor

nex3 commented Apr 19, 2018

@BenLeggiero Your example illustrates exactly why we don't want to support this functionality. You write a property named padding, but you access it as padding-left. That's a totally reasonable thing to try to do in a system that provides access to existing properties! But in order to support it, Sass needs to have deep knowledge of every single shorthand property, which adds a huge amount of complexity and makes it much easier for the language to fall out-of-sync with the CSS spec. That doesn't end happily for either the devs or the users.

@Grawl

This comment has been minimized.

Copy link

Grawl commented Apr 20, 2018

We will not be sad if prop(padding-left) will not get value of shorthand padding

@nex3

This comment has been minimized.

Copy link
Contributor

nex3 commented Apr 20, 2018

People who've read and internalized my explanation may understand it, but that's not going to be the vast majority of users. Most people will try to use it like they expect CSS to work, and it won't work for that, and that's just a crummy experience all around.

@BenLeggiero

This comment has been minimized.

Copy link

BenLeggiero commented Apr 24, 2018

I am not proposing that you parse and destruct any shorthand properties at all. I was just pointing out that I had a similar idea years ago and giving a snippet from Past Ben's mind.

That said, it would be trivial to support all CSS1 and even CSS2 shorthands for starters. I believe that over 99.99% of uses of property-references would be okay with that.

@nex3

This comment has been minimized.

Copy link
Contributor

nex3 commented Apr 24, 2018

A huge part of what makes Sass a pleasant language to work with day-to-day is that it avoids features that work sometimes but not all the time. Even if you think you'll personally understand the boundary between when they work and when they don't, and that you'll always stay within the golden path, people will run into it and it will erode their confidence in the language as a whole. So we don't add features that have those hidden pitfalls.

@Grawl

This comment has been minimized.

Copy link

Grawl commented Apr 25, 2018

You're right @nex3. But how this feature is done in Stylus? Property lookup is a major feature for me when I use Stylus.

The same question is for postcss-property-lookup.

@nex3

This comment has been minimized.

Copy link
Contributor

nex3 commented Apr 25, 2018

I imagine those features have the sorts of pitfalls I'm trying to avoid.

@Grawl

This comment has been minimized.

Copy link

Grawl commented Apr 26, 2018

I understand. It's a large feature but a lot of people want it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment