igosuki / compass-mixins Goto Github PK
View Code? Open in Web Editor NEWA collection of compass' stylesheet for bower dependencies and libsass
License: Other
A collection of compass' stylesheet for bower dependencies and libsass
License: Other
@include display-flex()
unknow mixin ..
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.
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?
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;
}
$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.
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
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?
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?
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;
}
The regarded ruby sources are font_files.rb and urls.rb.
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.
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
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 ?!
One moment it was available on Bower as 1.0.4 ... the next moment gone?
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 !??
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
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.
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?
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.
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.
Branch here https://github.com/Igosuki/compass-mixins/tree/compass_latest
The input placeholder mixin from the compass user_interface module is missing http://compass-style.org/reference/compass/css3/user_interface/ in compass-mixins
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.
There are a few things I am wondering about, that I think should be included in the readme:
also, the license link ends in a 404 (links to a branch stable which no longer exists)
The latest has it but this package doesnt :(
https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/css3/_user-interface.scss
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
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.
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?
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?
Noticed many references to image-url(). Does that work with libsass?
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)
When you are using vertical rhythm the mixin output-rhythm
is missing.
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%));
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.
your npm version is outdated, https://www.npmjs.org/package/compass-mixins only offers 0.12.3
$experimental-support-for-pie
can not be overridden cause it's set explicitly in css3/_pie.scss
.
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 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.
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.
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.
Which is the actual latest version?
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
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.
Hi, is there a way to use compass sprites?
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.
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 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;
}
I don't have access to npm to release changes as 0.12.4 (tag exists already), version number following from #13.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.