Regarding the grid: Help translating Less to Sass

sage
1

Until the generator arrives, with Sage there’s a couple Less files which aren’t translated to Sass found in the assets directory. Mainly, the grid is troubling me and probably other Sass users.

grid: http://goo.gl/HVsNgF

// Grid system
.main {
  .make-sm-column(@main-sm-columns);
  .sidebar-primary & {
    .make-sm-column(@main-sm-columns - @sidebar-sm-columns);
  }
}
.sidebar {
  .make-sm-column(@sidebar-sm-columns);
}

I could write the following, but there’s probably a smarter way:

.main {
  @include make-sm-column(8);

}
.sidebar {
  @include make-sm-column(4);
}

Plus, the grid relies on variables: http://goo.gl/MZR8kr

// Grid settings
@main-sm-columns:       @grid-columns;
@sidebar-sm-columns:    4;

I’m assuming replacing @ with $ will make this work.

1 Like
2

I don’t use Sass so I couldn’t say. @kalenjohnson / anyone else already do this yet? We need to have it done for the generator, anyway

3

Well the LESS statements you link is stating that .main is full-width, except when under .sidebar-primary, which is applied to the body tag.

This can actually be written the same way in SASS: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector

So that LESS block becomes:

// Grid system
.main {
  .make-sm-column($main-sm-columns);
  .sidebar-primary & {
    .make-sm-column($main-sm-columns - $sidebar-sm-columns);
  }
}
.sidebar {
  .make-sm-column($sidebar-sm-columns);
}

And yes, variables can simply switch from @ to $

4

@kalenjohnson Your markup for _grid.scss returns an error.

The markup I provided below works for me, and the columns display. But, please verify since you are the master of all things roots-sass:

// Grid system
.main {
  @include make-sm-column($main-sm-columns);
  .sidebar-primary & {
    @include make-sm-column($main-sm-columns - $sidebar-sm-columns);
  }
}
.sidebar {
  @include make-sm-column($sidebar-sm-columns);
}
1 Like
5

Oops, my mistake… didn’t change the include. Just wrote it on Discourse :fearful:

6

I’ve never used LESS before, and would prefer to develop with Sass. Any idea how I could translate those into Sass to get rid of errors?:

// Captions
.wp-caption {
&:extend(.thumbnail all);
}
.wp-caption-text {
&:extend(.thumbnail .caption all);
}

7

SASS has the exact same keyword which does the same thing:

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend

8

So I assume that the fragment should like this:

.wp-caption {
@extend .thumbnail;
}
.wp-caption-text {
@extend .thumbnail .caption;
}

I’m not sure though, what to do with ‘all’ which I assume is Less-specific. Please. correct me if I’m worng.

9

“All” is Less specific, you should just be able to omit that.