Question

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; }

Answer 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.