Importing a SASS file from outside of a rails app
ruby-on-rails,ruby-on-rails-4,sass,compass-sass
As cimmanon said in the comments this is a duplicate of SASS: Import a file from a different directory? The issue had to do with the @imports in the external SASS files using relative paths that the current directory wasn't able to access. By updating the @imports to paths accessible...
Can’t set custom font when using SASS - Ionic framework
css,sass,ionic-framework,font-face,compass-sass
Whats happening is your CSS is being called AFTER the Ionic styles, and they are getting priority over your change. Place your .login_title, and all future style changes, ABOVE the Ionic @import...
Horizontal list menu: Calculated equal % width
Hopefully this will help you. http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ @for $i from 1 through 4 { li:first-child:nth-last-child(#{$i}), li:first-child:nth-last-child(#{$i}) ~ li { width: 100% / $i } } ...
CSS file not found when pushing a Jekyll project to gh-pages remote branch and using jekyll-compass
compass-sass,jekyll,github-pages,jekyll-extensions
Instead of setting the output of your rendered SASS files to /_site/css, set the output to just /css (the site root level). What is happening is that locally SASS is running just fine and outputting into your /_site/ directory as you'd expect. But in production on GitHub pages (where the...
Grunt + Compass doesn't create CSS File
node.js,sass,gruntjs,compass-sass,grunt-contrib-compass
In the end (and after a day of trial and error) it boiled down to setting relativeAssets to false. My mistake with the "2nd try" was putting the boolean values in like this relativeAssets: 'false', instead of relativeAssets: false,. That and some tweaking basePath and "more". module.exports = function(grunt) {...
Replace broccoli-sass with broccoli-compass in broccoli-sample-app
ember.js,compass-sass,broccolijs
I changed the brocfile styles preprocess to: var styles = 'styles' styles = pickFiles(styles, { srcDir: '/', destDir: appNamespace + '/styles' }) styles = preprocess(styles) and the compileSass call to: var appCss = compileSass(appAndDependencies, appNamespace + '/styles/app.scss', { outputStyle: 'expanded', sassDir: appNamespace + '/styles', imagesDir: 'public/images/', cssDir: '/assets' }) Similar...
CSS Transition works when adding class, but not removing it
jquery,html5,css3,css-transitions,compass-sass
As mentioned in the comments, the issue is that height: 0 immediately hides the element when the class is removed. The opacity still transitions, but you don't see it. Unfortunately, since height: auto is not a transitionable value, adding a height to the transition is not going to help. You...
How to get the value of last assigned property in Sass or CSS?
If all you want is to have all arguments be the same value, what you're looking for is a function that's commonly called fill or array-fill in other languages. As long as you know exactly how many arguments the mixin takes, you're good to go: @function array-fill($value, $n) { $list:...
@include font-face SCSS issue
Random numbers were added because browser cache fonts base on url, then these random numbers cause every time you compile your codes and put it in your html, it download fonts again. I have Visual Studio 2013 and compile your code with sass and the result is: @font-face { font-family:...
compass not working with mithril yeoman generator
sass,compass-sass,yeoman,compass,mithril.js
The answer was found here In order to install compass On Mac OS X (Yosemite) Set Up Ruby Environment, ensure its up to date ruby -v sudo gem update --system Set Up MAC Environment, install Xcode Command Line Tools xcode-select --install This was the key to getting Compass working on...
How can I generate a class multiple times for a list of mixins?
you could try in this way $mobile: 480; $smalltablet: 767; @mixin mq($width) { @media only screen and (max-width:#{$width}px) { @content; } } @mixin generateMediaqueries { @include mq($mobile) { &-mobile { @content; } } @include mq($smalltablet) { &-small-tablet { @content; } } } table.responsive { @include generateMediaqueries { display: block; }...
What happened with gutter function/mixin in Susy 2?
compass-sass,susy-compass,susy-sass,susy,susy-next
Your layout settings are wrong, so your gutters are undefined and hence the null values you are getting. It's gutter-position: after, not gutter-position: right. (The valid settings are these). See it working here. (Spoiler alert, output for your code is .test { margin-right: 1.0989%; margin-bottom: 1.0989%; } .test2 { background:...
Broken upgrade to susy 2.1.2 cannot load such file — sass/script/node
sass,compass-sass,susy-compass
This is the message I got when trying to update Susy with bundler. susy (~> 2.1.2) ruby depends on sass (~> 3.3.0) ruby compass (~> 0.12.6) ruby depends on sass (3.2.19) This means you will need at least Sass 3.3.0. The latest alpha pre release of Compass will work with...
Use SASS to dynamically add color stops to linear-gradient
You have 2 problems here. linear-gradient is a custom Compass function, that's what's generating that error. As such, it expects a specific number of arguments. You're not creating a list with 3 elements in it, you're creating a list with a single element in it that looks something like this:...
Compass (SASS) rule with pseudo class
You can use the parent selector (&) by itself, in addition to other selectors inside nested blocks. DEMO $state-info-text: #538DA7; .heading-link { &, &:hover { color: $state-info-text; } } Compiles to .heading-link, .heading-link:hover { color: #538DA7; } ...
Using Codekit 2 with Susy and Breakpoint
susy-compass,compass-sass,codekit,breakpoint-sass
Yes, however as Codekit 2 doesn't come bundled with Breakpoint like it does Susy and Compass, it's not as easy as @import "breakpoint";. What you will need to do is, using Codekit 2's Bower integration, download the breakpoint-sass bower package and change your import to @import "../bower_components/breakpoint-sass/stylesheets/breakpoint";.
grunt “undefined variable” errors for imported sass files
javascript,sass,gruntjs,compass-sass,grunt-contrib-watch
I will answer your 'only compile the base scss file'. You have two options here: 1) Add underscore to the filenames, which you don't want to compile (only import) you name it as "_someImportedFile.scss" you import it in your base.scss as @import "someImportedFile"; (without underscore) For more info take a...
Understanding compass sprite generation for smart layout
The limiting factor on the image size is total amount of pixels so if you put them in the row instead of square it should be ok. Also, if design allows, you can add to each sprite border with the element border and background so it will look ok. But...
Integrating Compass into Visual Studio 2013 update 2 with Web Essentials 2013
visual-studio-2013,sass,compass-sass,web-essentials
I use just the mixins from Compass, but rely on Web Essentials to compile the SCSS files on save. This gives me a much better development experience, since compass watch requires a few seconds to compile the stylesheets, whereas the Web Essentials are very fast. With compass watch I often...
gulp.js: 'gulp.watch' is not really watching changes
Ok, finally the problem was the gulp-notify plugin. I just commented those lines on 'compass' and 'images' task and gulp.watch run as expected. My compass task gulp.task('compass', function() { return gulp.src('src/sass/**/*.scss') .pipe(compass({ css: 'src/css', sass: 'src/sass', image: 'src/images' })) .pipe(gulp.dest('build/dev/css')) .pipe(minifyCSS()) .pipe(gulp.dest('build/production/css')); //pipe(notify({ message: 'Compass task complete' })); }); My...
Grunt/Bundler wont use specified sass version
ruby,responsive-design,sass,bundler,compass-sass
If you want to limit your gems to only those in your bundle (listed in your Gemfile), you should prefix your commands with bundle exec when running them in the terminal. eg. if you were running sass --watch then you would run bundle exec sass --watch to make sure you...
Where is compass 1.0.0 preview Documentation located?
I also was looking to documentation but on project site it's old version only and no info about 1.0 version or even 0.12.6 . I think it's better to use old stable version (I also installed 1.0 version but had some problems and I'm back to 0.12.6) I've just found...
generate classes from Scss / Sass nested map
What you're looking for is a recursive mixin. Walk through the mapping. If the value is a mapping, call itself otherwise print out the property/value. $palette: ( 'brown': hsl( 33, 35, 50), 'blue': hsl(207, 80, 50), 'green': ( 0: hsl(157, 65, 65), 1: hsl(157, 50, 50), alt: ( 0: hsl(125,...
Sass Keyframes animation mixin generating invalid CSS
css,css3,sass,compass-sass,css-animations
You're required to use string interpolation on variables for keyframes names. Your keyframes mixin needs to be written like this: @mixin keyframes($animationName) { @-webkit-keyframes #{$animationName} { @content; } @-moz-keyframes #{$animationName} { @content; } @-o-keyframes #{$animationName} { @content; } @keyframes #{$animationName} { @content; } } Note that the keyframes mixin that...
Using a function in Sass is returning the string containing the name of the function rather than the result
sass,zurb-foundation,compass-sass
Your function doesn't exist. You must declare it (or import it from another file) before you use it. Sass does not throw errors for non-existent functions because they have a similar syntax to CSS functions. So it assumes that if it isn't a Sass function that it must be a...
Is it possible for Compass to output files to multiple locations from Grunt?
Rather than modify the configuration of your css generation task which could result in a second copy being compiled, you can utilize an additional entry under grunt-copy: styles: { expand: true, dot: true, cwd: 'deploy/styles', dest: 'other/styles', src: 'filename.css' } Take care that you aren't calling the entire copy task...
Managing CSS in Sencha Touch
css,sass,sencha-touch,compass-sass
I have no idea of CodeKit or Grunt. Anyways in Sencha Touch all the CSS files get placed to the resources/css folder after the compilation. It's the same even when we add custom CSS files or use SASS with Compass compiler.
gulp isn't noticing sass/compass extension imports / bundler
sass,bundler,compass-sass,gulp,singularitygs
gulp-ruby-sass was messing things up, for some reason. Seems like more people would have ran into this problem before me though. I commented out sass = require('gulp-ruby-sass'), and .pipe(sass({style: 'expanded', bundleExec:true})) and it worked....
Yeoman mobile with twitter bootstrap: glyphicons are missing
twitter-bootstrap,gruntjs,compass-sass,yeoman
You can try add grunt-contrib-copy task to automate procedure of copying styles I think, it will be better to add separate task for this: grunt.registerTask('install', ['copy']); In this task you can simply copy font styles from bower_components/bootstrap folder into /styles/vendor/fonts...
Grunt-contrib-sass doesn't create config.rb file?
sass,gruntjs,compass-sass,mixins,grunt-contrib-sass
So basically I added a config.rb file into the root of the project (where grunt is run from). http_fonts_path = '../fonts/' http_images_path = '../images/' relative_assets = false Then, I changed the font-face mixins usage like so: @import "compass/css3"; @include font-face("Tw Cen MT", font-files("tw_cen_mt/Tw_Cen_MT-webfont.woff", "tw_cen_mt/Tw_Cen_MT-webfont.ttf", "tw_cen_mt/Tw_Cen_MT-webfont.svg"), "tw_cen_mt/Tw_Cen_MT-webfont.eot"); @include font-face("New Cicle Gordita",...
How to add DatePicker at JHipster UI
angularjs,compass-sass,angular-ui-bootstrap,jhipster
I added it to my project using WebJars: <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap-datepicker</artifactId> <version>1.3.1</version> </dependency> Then I use class="date" on my date fields and use the following HTML/JS to initialize the field. <link rel="stylesheet" type="text/css" media="all" href="/webjars/bootstrap-datepicker/1.3.1/css/datepicker.css" /> <script type="text/javascript"...
Sass/Compass Mixin For Determining Color After Opacity/RGBA
To ensure that you're always working with positive numbers, you want to use the abs() function: @return rgba(abs($r1), abs($g1), abs($b1), $desiredAlpha); ...
Compass plugin with Grunt
sass,gruntjs,compass-sass,grunt-contrib-compass
You've got a couple problems here... First, you're watching your sass files in the compass task already, there is no need to monitor them with an explicit watch task. Additionally, your concurrent task is set to run watch again once the sass files change. This is the logic flow you...
Trying to get Sass and Bundler to work cross team?
ruby,sass,bundler,compass-sass
The key was to prepend your "compass watch" with "bundle exec". So in command prompt, start your watch using "bundle exec compass watch" on the project directory.
Transform rotation doesn't start from the centre of a circle
javascript,jquery,css,compass-sass
Your rotation origin had no issues. Rather, each of your <li>'s was being given a set width and height that were equal - creating a square. Your image therefore overflowed the <li>. A simple fix would be to re-write your mixin to take an additional parameter for the width and...
@import make me confuse
Here's some basics: Those SCSS files you don't want to be generated into independent CSS file, you name with an underscore at the beginning, e.g. _mixin.scss, it then will be your partial. And files you want to have as a separate CSS file you name as usual without underscore, e.g....
Symfony2 Compressing CSS without uglifyCSS and possibly using Sass :compressed
Some time ago I had the same problem. It is quite easy to overcome, but there is nothing mentioned in the documentation. This is how you do it: // in config.yml assetic: filters: scss: style: compressed This will pass --style argument to sass with the value compressed. ...
listener.rb: Not a directory
Best option I found was this: Failed to build gem native extension (installing Compass) After that, I starting using http://mhs.github.io/scout-app/ and that worked fine. When I started a new job that uses Grunt, I ditched compass watch all together and used the grunt-contrib-sass plug-in to get the job done. ...
Box-Shadow compiling from SCSS but not showing in Firebug; using Compass
twitter-bootstrap,sass,compass-sass,html5boilerplate
In your mixin you have commas where you don't need them. Use @include box-shadow(5px 5px 3px #888); instead of: @include box-shadow(5px,5px,3px, #888);...
Customizing Foundation 5 with SASS
css,sass,zurb-foundation,compass-sass
Your variables need to be set first: $body-bg: #ccc; $body-font-color: #000; // $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; // $body-font-weight: normal; // $body-font-style: normal; @import 'foundation.scss'; @import 'normalize.scss'; Deprecated warnings are nothing to worry about since it is unrelated to your problem (they are something should be fixed by...
Build fails on older Git branch after checking out another with build.gradle specifying newest version of Sass jar
ruby,gradle,build-process,compass-sass,build.gradle
There were two cached files and one directory that needed removing - ~/.gradle/caches .gradle build The last two, .gradle and build, live in the project directory. .gradle/caches is in the user's home directory....
No such framework “susy” using compass
compass-sass,susy-compass,susy-sass
Thanks to Eric M Suzanne, I installed a pre-release version of compass 1.0 (now available as 1.0.1 stable) using gem install compass --pre. This solved the issue....
Install sass and compass [duplicate]
gem update --system gem update gem list Check package version Compass - 1.0.1 sass - 3.4.9...
Prevent SASS/Compass From Outputting Partials
From the manual: If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You...
How to vertically center a div with sass (compass)?
css3,sass,vertical-alignment,mixins,compass-sass
I use this mixin to centre content. It uses tranforms so not all versions of IE are supported. MIXIN: @mixin centre($axis: "both"){ position:absolute; @if $axis == "y"{ top:50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @if $axis == "x"{ left:50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%);...
SASS error: can't import Compass
After a month of troubleshooting, the solution ended up being simpler than expected. I uninstalled all versions of both Sass and Compass, and then I installed the latest Compass and let it install Sass automatically. So after doing sudo gem uninstall compass and sudo gem uninstall sass, I did sudo...
SingularityGS: Why is the box-shadow missing at alpha and omega edges of of grid?
Probably because you've got overflow: hidden on the container. @MrPaulDriver, the asker: Thank you @lolmaus (once again). This turned out to be because I was using @include clearfix on the container. What was needed was @pie-clearfix. Documentation can be found here http://compass-style.org/reference/compass/utilities/general/clearfix/...
Sass adds comments indicating line of the definition [duplicate]
If compass is already running while you're modifying your config.rb file, you have to restart Compass to execute the changes. http://stackoverflow.com/a/19797651/2670516 The config.rb is only read when the compass command is run. If you're using compass watch, you will need to stop and start it before the changes will take...
SASS/COMPASS: Unable to use the ligthen/darken function
You're not setting the lightened color as a style. You probably mean: li { color: lighten(#800, 20%); } ...
Compiling Compass in an Ember-CLI project
ember.js,compass-sass,ember-cli
Try this (added prefix and cssDir): var compileCompass = require('broccoli-compass'); var styles = compileCompass(appAndDependencies, prefix + '/styles/app.scss', { outputStyle: 'expanded', sassDir: prefix + '/styles', imagesDir: 'public/images/', cssDir: '/assets' }); Steffen...
Best way to support mobile first for IE8 without script?
css,internet-explorer-8,responsive-design,sass,compass-sass
I've written a solution for this myself. All you need is two different CSS files (one for modern browsers and one for older IE browsers) and a cleaver mixin. Create a second SASS file which Compass can watch and call the file something like oldIE.scss. Copy all the imports from...
Cannot find screen.css compass/sass in django project that is compiling correctly
css,django,compass-sass,static-linking
If you want to keep your layout this way, you need to add stylesheets to your STATICFILES_DIRS: 1) Updating STATICFILES_DIRS STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'staticfiles'), os.path.join(BASE_DIR, 'stylesheets'), ) 2) Updating base.html – load staticfiles – embed the stylesheet using the {% static %} tag {% load staticfiles %} {% block main_header...
Sass breakpoint doesn't work
sass,media-queries,compass-sass,breakpoint-sass
That's because you're using the mixin incorrectly. The breakpoint mixin is a @content aware mixin, the styles intended for that mixin need to be placed inside curly braces: body{ @include breakpoint(100rem) { background-color: #000; } } Output: @media (min-width: 100rem) { body { background-color: #000; } } ...
Wildcard selectors in css path for grunt-contrib-compass
javascript,sass,gruntjs,compass-sass,grunt-contrib-compass
My comments converted into an answer: Currently, the compass grunt plugin can only process single directories per target, thus no globbing that would match with multiple directories. To circumvent this limitation, you always have the ability to create mutiple targets inside your compass task (Grunt functionality). A target is a...
Why don't my floats in my Singularity grid fill all the columns?
sass,compass-sass,singularitygs
Wow, that's some messy Drupal markup! You should've cleaned it up and post a reduced demo of your problem rather than just copy-pasting all the mess. The float-span mixin sets a right margin for an item unless you specify the second argument to be either 'last' or the number of...
SASS each function not working [duplicate]
Just use percentage function width: percentage($i/100); ...
converting scss file to css using sass compiler
You would not use sass --watch as you mentioned above to watch and compile changes. In this case, you are receiving that error because only Sass is doing the compilation for you, and doesn't know anything about that Compass command. With Compass projects, you need to do a few things....
jQuery Error with Zurb Foundation 5 (font-family bug)
jquery,sass,zurb-foundation,compass-sass
font-family should not be attributed to html as it leads to that bug. Use body instead: body{ font-family:"Open Sans"; } ...