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...
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:...
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 } } ...
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...
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"...
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....
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.
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",...
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...
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...
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:...
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...
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/...
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....
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...
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...
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); ...
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...
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....
gem update --system gem update gem list Check package version Compass - 1.0.1 sass - 3.4.9...
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...
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. ...
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...
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...
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) {...
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:...
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...
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...
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...
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; } ...
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,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; } } ...
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...
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...
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 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,...
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...
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%);...
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....
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...
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.
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";.
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...
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...
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...
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:...
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"; } ...
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...
You're not setting the lightened color as a style. You probably mean: li { color: lighten(#800, 20%); } ...
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. ...
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...
Just use percentage function width: percentage($i/100); ...
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...
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...
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...
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....
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);...
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...