Skip to content

Instantly share code, notes, and snippets.

@anthonyshort
Created October 10, 2012 02:54
Show Gist options
  • Select an option

  • Save anthonyshort/3862882 to your computer and use it in GitHub Desktop.

Select an option

Save anthonyshort/3862882 to your computer and use it in GitHub Desktop.
Idea for Sass modules
@module grid {
$columns: 12;
$gutter: 30px;
$baseline: 20px;
$width: 60px;
@function columns($n, $size) {
}
@function baseline($n) {
}
@mixin columns($n) {
}
@mixin container {
}
@mixin classes {
@for $i from 1 through $columns {
// ...
}
}
}
// Set variables
grid::$columns: 16px;
// Include some grid classes
@include grid::classes;
.container {
@include grid::container;
}
.posts {
@include grid::columns(5);
height: grid::baseline(2);
}
@module anthony {
$size: 5px;
@mixin make-awesome($size) {
border-radius: $size;
}
}
#id {
@include anthony::make-awesome;
height: anthony::$size;
}
@anthonyshort

Copy link
Copy Markdown
Author

Wondering if anything like this has been discussed before?

Libraries are starting to become more widespread, being able to namespace them provides a number of benefits:

  • No conflicts
  • Better organisation

That's only two reasons... but you see my point.

@chrisbuttery

Copy link
Copy Markdown

Im pretty sure I had this idea first

@chriseppstein

Copy link
Copy Markdown
  • How would extend and placeholders work with this?
  • How would it work with css selectors. One idea is to allow sass to expose a prefix that is specified by the @import directive. This gives users the ability to import third-party css into an existing project without worrying about css class/id collisions.
  • Would extend directives cross module boundaries? Seems like it must in some way -- how to specify?
  • How can this solve the "this .last class has a completely different meaning than this other .last class" problem for @extend?
  • Repeatedly typing compass:: would suck. It seems like some way to add constants to the default scope would be needed.
  • I'm not sure about ::, but I'm not sure what would be a better syntax. Why did you pick :: is it a ruby influence?
  • I'm surprised you used anthony::$size instead of $anthony::size. Why did you pick the syntax you did?

@anthonyshort

Copy link
Copy Markdown
Author

Firstly, I would mainly see @module as being solely for mixins and variables. The main problem I was trying to address was with organisation and modularisation of mixins in large projects with many external sass libraries. That means there shouldn't be any issues with using @extend. A mixin within a module can @extend with an !optional call if needed.

So I suppose my main concern here is for libraries.

How would extend and placeholders work with this?

Selectors can't be placed inside of modules. Placeholders, possibly. But then using them would require a namespace @extend anthony.clearfix; or something. It wouldn't really work I don't think.

How would it work with css selectors.

No selectors allowed in there.

Repeatedly typing compass:: would suck

Would it be possible to include a module in the root scope and have access to those mixins locally?

@import compass;

#id {
  @include border-radius(5px);
}

Although I don't want this turning into PHP with namespace hell.

Why did you pick :: is it a ruby influence?

Yep. Figured the whole mixin thing is similar to Ruby.

I'm surprised you used anthony::$size instead of $anthony::size

I thought you were making a joke then :) anthony::$size for consistent use of the namespace. $anthony::size looks like a variable called anthony::size. Whereas anthony::$size looks more like a variable of a module to me.

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