Menu
  • HOME
  • TAGS

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...

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:...

Horizontal list menu: Calculated equal % width

compass-sass

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 } } ...

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...

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"...

converting scss file to css using sass compiler

sass,compass-sass

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....

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.

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",...

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...

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...

Use SASS to dynamically add color stops to linear-gradient

css,sass,compass-sass

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:...

Prevent SASS/Compass From Outputting Partials

css,sass,compass-sass

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...

SingularityGS: Why is the box-shadow missing at alpha and omega edges of of grid?

css,compass-sass,clearfix

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/...

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....

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...

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...

Sass/Compass Mixin For Determining Color After Opacity/RGBA

css,sass,compass-sass

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); ...

Understanding compass sprite generation for smart layout

css,sass,compass-sass

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...

@import make me confuse

sass,compass-sass

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....

Install sass and compass [duplicate]

ruby,cmd,sass,compass-sass

gem update --system gem update gem list Check package version Compass - 1.0.1 sass - 3.4.9...

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...

Symfony2 Compressing CSS without uglifyCSS and possibly using Sass :compressed

symfony2,sass,compass-sass

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. ...

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...

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...

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) {...

@include font-face SCSS issue

sass,compass-sass,compass

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:...

Is it possible for Compass to output files to multiple locations from Grunt?

sass,gruntjs,compass-sass

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...

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...

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...

Compass (SASS) rule with pseudo class

css,sass,compass-sass

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; } ...

Sass adds comments indicating line of the definition [duplicate]

css,sass,compass-sass

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 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; } } ...

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...

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...

How can I generate a class multiple times for a list of mixins?

css,sass,compass-sass

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; }...

generate classes from Scss / Sass nested map

sass,compass-sass,compass

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,...

gulp.js: 'gulp.watch' is not really watching changes

compass-sass,gulp

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...

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%);...

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....

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...

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.

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";.

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 error: can't import Compass

css,sass,compass-sass

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...

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...

How to get the value of last assigned property in Sass or CSS?

css,sass,compass-sass

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 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"; } ...

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...

SASS/COMPASS: Unable to use the ligthen/darken function

css,css3,sass,compass-sass

You're not setting the lightened color as a style. You probably mean: li { color: lighten(#800, 20%); } ...

listener.rb: Not a directory

compass-sass

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. ...

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...

SASS each function not working [duplicate]

css,sass,compass-sass

Just use percentage function width: percentage($i/100); ...

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...

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...

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...

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....

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);...

Where is compass 1.0.0 preview Documentation located?

css,compass-sass

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...