When I'm using the mixing @include horizontal-list(0); the code added is:

list-style-image: none;
list-style-type: none;
margin-left: 0;
white-space: nowrap;
display: inline;
float: left;
padding-left: 0;
padding-right: 0;

but should be:

list-style-image: none;
list-style-type: none;
margin-left: 0;
white-space: nowrap;
float: left;
padding-left: 0;
padding-right: 0;

I'm trying to @import "compass/css3" and it gives an error:

bower_components/compass-mixins/lib/compass/css3/images:2: 
error: file to import not found or unreadable: "../../utilities/general/hacks"

I've edited css3/_images.scss and changed @import "../../utilities/general/hacks"; to @import "../utilities/general/hacks"; and it works.

But I wonder - where comes ../../ import from? In original Compass css3/_images.scss file there is @import "compass/utilities/general/hacks";

Maybe you would just use the original source?
Anyway, this is a bug and I'm reporting it.

your npm version is outdated, https://www.npmjs.org/package/compass-mixins only offers 0.12.3

I installed breakpoint-sass.
Maybe not compartible with compass-mixins?

I don't really understand this error:

Error: may only compare numbers
        on line 46 of assets/styles/objects/_header.scss
>>   $nav-toggle-max: max-width 17em;

This is the code I'm using. It's a usual breakpoint -> media width (http://breakpoint-sass.com/)
It's working great with ruby sass.

  $nav-toggle-max: max-width 17em;
    @include breakpoint($nav-toggle-max) {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }

A recent change in libsass broke compass compatibility by removing the compact() function... The function was removed because it's not in the sass spec.

sass/libsass@003d3dc

Any chance you could update the typography module to support $rhythm-unit?
http://compass-style.org/reference/compass/typography/vertical_rhythm/

Thank you for this project. It's much appreciated.

Since updating libsass/node-sass combination, the background image mixin no longer works as expected.

// Input
@include background-image(linear-gradient(left, #8ebcbe, #7aafd1, #b6707d, #cfb669));

// Output
background-image: -owg(linear-gradient(left, #8ebcbe, #7aafd1, #b6707d, #cfb669));
background-image: -webkit(linear-gradient(left, #8ebcbe, #7aafd1, #b6707d, #cfb669));
background-image: -moz(linear-gradient(left, #8ebcbe, #7aafd1, #b6707d, #cfb669));
background-image: -o(linear-gradient(left, #8ebcbe, #7aafd1, #b6707d, #cfb669));
background-image: linear-gradient(left, #8ebcbe, #7aafd1, #b6707d, #cfb669);

Note, the prefix is attached to the parentheses, not hyphenated as expected:

-webkit(linear-gradient
# vs
-webkit-linear-gradient

I have tracked the issue to the background-image mixin. Specifically lines like this with background-image: -webkit($images); seem to be outputting as a string. is -webkit supposed to be a function?

I'm happy to put up a PR if I can have some guidance as to where the problem might be coming from.

One moment it was available on Bower as 1.0.4 ... the next moment gone?

$experimental-support-for-pie can not be overridden cause it's set explicitly in css3/_pie.scss.

Npm now has similar packages such as:

https://www.npmjs.org/package/monkee-mixins
https://www.npmjs.org/package/bootstrap-sass

Would be nice if this was also npm installable.

BTW you saved me a ton of time. Thank you.

Continuing the discussion from #18 (comment)

It would be nice if Compass's URL functions were implemented, even if it comes down to variables we need to set before importing compass-mixins.

Wonder if it is possible to use relative paths for imports:
e.g., in _animation.scss instead of @import "compass/support"; use @import "../support";
I am using this lib via bower and gulp-ruby-sass and this change with release 1.0.4 is breaking my build process.
Thanks

When attempting to use this compass-mixins plugin with Normalize.scss (version https://github.com/JohnAlbin/normalize-scss), it produces numerous errors for missing variables.

/typography/_units.scss - missing
@output-rhythm - missing
@default-browser-font-size - missing

I had to replace _vertical_rhythm.scss with the default compass version and include _units.scss in order to get it to compile - but I wonder if this will mess up the compilation results.

I've got into a situation when I was needed some compass mixins which are yet to be "porterd" into compass-mixins. So I decided to add this support myself and started copying stuff from original compass sass files.

After 30 minutes of manually resolving unknown variables and mixins (first - by adding them into compass-mixins files, and then by just replacing some of them with compass originals), I realized that my success is not guarantied at all, the process is highly inconvenient and seems more like a monkey business then a real deal (not all dependencies can be resolved, many files in comass-mixins are just outdated etc). Wait, I thought, wtf? Can't compass be splitted into pure sass part and... the rest?

If I'm not missing something important the first goal can be achieved by creating a script, which would place Compass sass files in the proper place correspondingly replacing @import paths. For the the other part (not existing in libsass) stubs can be created, and later implementations on js will follow.

Has my vision any sense for you?

This error occurs at "#" symbol.
Error: bower_components/compass-mixins/lib/compass/functions/_caniuse_vars.scss
3:10442 error reading values after y
at options.error (/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:276:32)

@include display-flex()
unknow mixin ..

When using $font-unit: 1rem the rhythm function still outputs a calculation like what is need when using ems for the rhythm unit. I'm a n00b here so I'm not sure the proper way to make this suggestion:

// Calculate rhythm units.
@function rhythm(
$lines: 1,
$font-size: $base-font-size,
$offset: 0
) {
@if not($relative-font-sizing) and $font-size != $base-font-size {
@warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function";
}

// Suggestion //
@if $font-unit == 1rem {
$font-size: $font-unit;
}

$rhythm: $font-unit * ($lines * $base-line-height - $offset) / $font-size;
// Round the pixels down to nearest integer.
@if unit($rhythm) == px {
$rhythm: floor($rhythm);
}
@return $rhythm;
}

Is the project still matching tags to Compass versions, per #1? It seems like it's not, because there's no Compass 1.0.2. Should there be a different versioning pattern that will reflect the Compass version, and our patch level appended to the end? Semantic Versioning's pre-release section would permit something like 1.0.1-0.0.2. Ideally we wouldn't need a second major version, because we shouldn't be breaking backward compatibility if Compass isn't, but I suppose it could happen...

Is our goal to only match the most current version of Compass, or to provide compatibility back to the 0.12.x minor version?

When using the compass transform rotate, the vendor prefixes are not being added. I am not sure if this is not supported in this port, but if possible can it be implemented?

I don't have access to npm to release changes as 0.12.4 (tag exists already), version number following from #13.

I am attempting to replace compass in my Node.js project with a pure JS-based solution. So I installed the compass-mixins module and symlinked it into my stylesheets directory.

I am seeing the following error now:

"Sass -> CSS (may only compare numbers) styles/compass/css3/images"

Any ideas what this means or how to fix it?

I'm getting:

{ [Error: bower_components/compass-mixins/lib/compass/functions/_lists.scss
  34:12  index out of bounds for `nth($list, $n)`]
  message: 'bower_components/compass-mixins/lib/compass/functions/_lists.scss\n  34:12  index out of bounds for `nth($list, $n)`',
  column: 12,
  line: 34,
  file: './bower_components/compass-mixins/lib/compass/functions/_lists.scss',
  status: 1,
  messageFormatted: '\u001b[4mbower_components/compass-mixins/lib/compass/functions/_lists.scss\u001b[24m\n\u001b[90m  34:12\u001b[39m  index out of bounds for `nth($list, $n)`',
  name: 'Error',
  stack: 'Error: bower_components/compass-mixins/lib/compass/functions/_lists.scss\n  34:12  index out of bounds for `nth($list, $n)`\n    at options.error (/var/www/mdcurrent_dev/.modman/mdv14/skin/frontend/mdthemes/mdresponsive/build/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:277:32)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-sass' }

Changing

    @for $i from 2 through length($items) {
      $item: nth($items, $i);
      @if $item != null {
        $full: $full $item;
      }
    }

To

    @for $i from 1 through length($items) {
      $item: nth($items, $i);
      @if $item != null {
        $full: $full $item;
      }
    }

Fixes it... typo?

I am getting this error

Module build failed: Error: "/home/ubuntu/webdev/learn/node_modules/compass-mixins/lib/compass/css3/_images.scss" is not in the SourceMap.
    at SourceMapConsumer_sourceContentFor [as sourceContentFor] (/home/ubuntu/webdev/learn/yuzbir-react/node_modules/postcss-loader/node_modules/postcss/node_modules/source-map/lib/source-map/source-map-consumer.js:677:15)
    at Input.origin (/home/ubuntu/webdev/learn/yuzbir-react/node_modules/postcss-loader/node_modules/postcss/lib/input.js:91:31)
    at Input.error (/home/ubuntu/webdev/learn/yuzbir-react/node_modules/postcss-loader/node_modules/postcss/lib/input.js:61:27)
    at Declaration.error (/home/ubuntu/webdev/learn/yuzbir-react/node_modules/postcss-loader/node_modules/postcss/lib/node.js:68:38)
    at Warning.toString (/home/ubuntu/webdev/learn/yuzbir-react/node_modules/postcss-loader/node_modules/postcss/lib/warning.js:22:30)
    at /home/ubuntu/webdev/learn/yuzbir-react/node_modules/postcss-loader/index.js:35:40
    at Array.forEach (native)
    at /home/ubuntu/webdev/learn/yuzbir-react/node_modules/postcss-loader/index.js:34:31
 @ ./app/components/OkeyStone/_OkeyStone.scss 4:14-404 13:2-17:4 14:20-410

Trying to use a mixin like this:

@mixin app($color){
@include background(linear-gradient(bottom,$color,lighten($color,10%)));
  border-bottom:solid 4px darken($color,20%);
  font-family:Lobster;
}

With webpack sass-loader.

Not sure why.

When you are using vertical rhythm the mixin output-rhythm is missing.

i had setting ok in my project and use some mixin by import "compass/css3" or "compass"
but
i can't use some things like @include animtaion, keyframe, flex..and some mixin..
is there anything else i forgot !??

Hi,
Im using this include in a class style in my scss:

.my-arrow{
    @include animation(arrow-bounce 0.5s linear 0s infinite normal forwards initial);
}

the result in my css is:

.my-arrow{
   -webkit-animation: arrow-bounce;
      -moz-animation: arrow-bounce;
      -ms-animation: arrow-bounce;
      -o-animation: arrow-bounce;
      animation: arrow-bounce;
}

None of the other properties is used... am I doing something wrong?

thanks

There are a few things I am wondering about, that I think should be included in the readme:

• a list of implemented / not yet implemented features from compass (roadmap would be the bonus)
• known issues if there are any
• are versions of this repository in any relation to the compass versions?

also, the license link ends in a 404 (links to a branch stable which no longer exists)

The input placeholder mixin from the compass user_interface module is missing http://compass-style.org/reference/compass/css3/user_interface/ in compass-mixins

Hi, is there a way to use compass sprites?

$default-text-shadow-color: 999;
$default-text-shadow-blur: 5px;

@include single-text-shadow;

Output

text-shadow: 0px 0px 5px false #999;

The false for spread is not valid css.

raised when use

$base-rhythm-unit: "rem" !global;

h2 {@include adjust-font-size-to(1.953rem);}

when h2 {@include adjust-font-size-to(1.953px);} - everything is ok

What trouble is with "rem" ?

When I try to use image-width and image-height in my sass, the result is not calculated, rather the outputted css has the original image-width/height function calls inline.

Does this library handle compass helper functions?

Sorry but i don't understand how to add compass-mixins to own project.
added @import "compass" but there are errors :(
or @import "../bower_components/compass-mixins/lib/compass" ?
but is it ok ?!

I was thinking it might add more context for the user if git tags matched up with the Compass project so you know what version of compass mixins you will be using.

Compass color helpers are a very useful part of Compass. I expect they could be written as functions to be a part of this library.

The latest has it but this package doesnt :(

https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/css3/_user-interface.scss

Which is the actual latest version?

the mixin user-select exists in the file compass-mixins/lib/compass/css3/_user-interface.scss, however is not included in compass-mixins/lib/compass/_css3.scss

Noticed many references to image-url(). Does that work with libsass?

No idea what this is all about...

WARNING: PIE does not support background-image. Use @include background(linear-gradient(top, #ffffff 0%, #f5f5f5 100%)) instead.
    on line 74 of node_modules/compass-mixins/lib/compass/css3/_images.scss
    from line 84 of affirm-ng/src/styles/auth.scss

When I imported both foundation and this, it gave me error:

foundationSettings:23: error: cannot add or subtract numbers with incompatible units
Use --force to continue.

Branch here https://github.com/Igosuki/compass-mixins/tree/compass_latest

• Migrate files from compass-core
• Generate sass vars from caniuse json
• Implement stubs
  • browser-ranges
  • omitted-usage
  • prefix-usage
  • browsers
  • colors
  • configuration
  • constants
  • cross_browser_support
  • display
  • enumerate
  • env
  • files
  • font_files
  • gradient_support
  • image_size
  • inline_image
  • lists
  • math
  • selectors
  • urls

The regarded ruby sources are font_files.rb and urls.rb.

Hi
I have something like this in cmd:

Warning: bower_components/compass-mixins/lib/compass/css3/box-shadow:43: error:
error reading values after box-shadow

This error occurs wherever you used this mixin:
@mixin prefixed-properties (...) in _support.scss in line 359.

If you can check this issue I would appreciate it.

I'm using this package for compilation Libsass for grunt

What is a "slightly modified" MIT License? When clicking on that link in the readme only a 404 page opens. Would be nice to fix that.

I have noticed one issue with the latest version. The stylesheet I'm using has the following mixin:

@mixin flexbox {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-box !important;
  display: -o-box !important;
  display: box !important;
}

// the mixin is used in other places, but also this:
.flexbox {
  @include flexbox;
}

For some reason, after compilation, this comes out to

.flexbox {
  display:-ms-box !important;
  display:-o-box !important;
  display:box !important;
}

In other words, the -webkit- and -moz- versions are missing. The same appears to be true for the other classes that use the mixin. Other mixins related to flexbox, for instance box-orient, work fine with these prefixes.

Not sure what's going on here and whose fault it is (I'm using harp, which uses node-sass to compile SCSS). May or may not relate to #15.

Any thoughts on this?

I just downloaded the library from bower (v. 0.12.3) and the sass compiler broke trying to compile the images mixin (lib/compass/css3/images.scss). It could not import the hacks mixin in the utilities folder (lib/compass/utilities/general/hacks.scss)
_Import path was: "../../utilities/general/hacks"
_Changed to: "../utilities/general/hacks"
That fixed it.
Thanks.

I'm using python-libsass with compass mixins and when I tried to use grayscale filter, the output was:

-webkit-filter: compact(grayscale(100%), false, false, false, false, false, false, false, false, false); -moz-filter: compact(grayscale(100%), false, false, false, false, false, false, false, false, false); filter: compact(grayscale(100%), false, false, false, false, false, false, false, false, false);

SCSS:
@include filter(grayscale(100%));

Original issue:

Basically this doesn't work:

 @include background(url('image.png'), linear-gradient(left, red, white));

as it doesn't prefix linear-gradients.

UPDATE

Actually even this simple code works incorrectly:

@include background(url('image.png') no-repeat center center, red);

as it results to CSS code:

background: -webkit-url("/build/images/i-plus.png") no-repeat center center, red

where url is prefixed. This happens becuase of the prefixed() function:

@function prefixed($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
  $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;
  $prefixed: false;
  @each $item in $properties {
    @if type-of($item) == 'string' {
      $prefixed: $prefixed or str-index($item, 'url') != 1 and str-index($item, 'rgb') != 1 and str-index($item, '#') != 1;
    } @elseif type-of($item) == 'color' {
    } @elseif $item != null {
      $prefixed: true;
    }
  }
  @return $prefixed;
}

Which erroneously supposes that any list should be prefixed:

    } @elseif $item != null {
      $prefixed: true;
    }