0

I'm just trying to work out if something is possible or not with SCSS.

Please feel free to ask me for more details if I'm not very clear in what I'm asking, but here's what I'm trying to achieve.

Pseudo code:

.class1 { width:100px; }
.class2 { margin-right:[.class1{width}] + 2 }

compiling into

.class1 {width:100px; }
.class2 { margin-right:102px; }

1 Answer 1

1

I believe to get what you want, a variable is best used:

$yourWidth: 100px;
.class1 { width: $yourWidth; }
.class2 { margin-right: ($yourWidth + 2); }

Update (based on comment info)

You might add a global variable below $ColCount that begins as an empty list, like so:

$WidthList: ();

Then inside @mixin columns($numCols) after $colWidth is calculated, add the width value for that column to the $WidthList by adding this function:

join($WidthList, $colWidth);

Then, once all the columns have calculated, you should have a list containing all the width values, so that you can access them if you desire elsewhere, and thus...

.class2 { margin-right: (nth($WidthList, 5) + 2); }

...should yield the .cl-col5 value you want for the margin.

Note that I did not test this. Nor have I actually ever used SASS. I am basing this strictly off the documentation found here and elsewhere on their site.

Sign up to request clarification or add additional context in comments.

4 Comments

I'm currently using this : jsfiddle.net/maxbeatty/EWNCz so my classes are dynamically generated and I was kind of hoping to set the margin of one class to the value of .cl-col5; with it being dynamically generated the variable aspect isn't exactly going to be a very clean option unfortunately. Happy to take this route if it's the only way, but thought I'd ask
@JustinN--added an update based on your info in your comment.
for somebody who has never used SASS, you did a great job as pulling that out of their documentation! Thank you for helping me view my problem in a different angle, it's given me exactly what I was after.
@JustinN--great! Glad it met your needs (and I assume it worked).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.