Scss to css .... I have a question

Scss to css .... I have a question
0

#1

Ok i created a mixin for use with grid

@mixin grid_col_row($cs,$ce,$rs,$re) {
  grid-column-start: $cs;
  grid-column-end: $ce;
  grid-row-start: $rs;
  grid-row-end: $re;
}

basically i had to do it this way as i could not figure out how to do it the way i want to eg example below

@mixin grid_col_row($cs,$ce,$rs,$re) {
  grid-column: $cs / $ce;
  grid-row: $rs / $re;
}

reason i cant do it as above is i dont know how to get the …/ …properly as it uses it as division
reason i want to do it like second example is it only uses two rows when converted to css compared to the first example which use 4 rows in css.
Any help would be appreciated.


#2

Tried encasing the slash in quotes?


#3

ye tried that no joy

here is a link to a code pen … just a quick setup to show and test … green div should stretch across screen and be in grid-row 4/5
can do it using mixin grid_col_row but want to be able to use grid_colrow for less lines in css (mixins i have in codepen)


#4

Ok found a solution … found a page on css-tricks talking about css gridd and sass and looking through there examples i found grid-column: #{$cs}/#{$ce}; and it works … nice one … using my mixins makes setting up my grids a bit quicker now and less writing … nice


#5

Yeah was just going to post, you need to interpolate. Any time there’s a possibility that there could be something ambiguous, sassscript will need the variables interpolated. calc and media queries are ones that come up a lot, but this (using a solidus) is another - is that division (leveraging sassscript), or is it just a CSS declaration? Sass isn’t going to bother finding out, it’s not that smart