I decided to use the Sass version of Foundation 4.
I followed the instructions from the official Foundation 4 documentation:
For a new installation i started with following code in my console:
sudo run compass create <project-name> -r zurb-foundation --using foundation
To compile my SCSS Files to CSS i ran:
compass watch
After that everything works fine and i'm ready to start editing my files.
Now my problem:
Every time when i make changes in my SCSS files, it would take almost 8 seconds to compile the CSS-file. Status in console:
Change detected at 09:52:48 to: app.scss
displays very fast, but after that
overwrite css/app.css
is to slow.
What am I doing wrong?
Versions:
Sass 3.2.12 (Media Mark)
Compass 0.12.2 (Alnilam)
You'll find my SASS-file structure here:
Github SASS-file structure
You're not doing anything wrong. Compass (built on Ruby) is notoriously slow in compiling SASS/SCSS. Especially larger, more complex structures like Foundation. 8-10 seconds is about average for my Foundation projects, too. It doesn't even seem to matter whether you use the more advanced language features or not, it's just a dog.
Unfortunately, the only other effective "live" compiler i know of is node-sass, which is VERY fast, but miserably far behind on SASS language support. You can't use it with more recent versions of Foundation (5.3+, if fuzzy memory serves).
Since you're using Foundation 4, you could try setting up Node & use node-sass to compile. i think it'll support the older F4 code, just make sure you don't use any SASS 3.3 language features (maps, for instance) in your own code.
Related
Our team is starting to use LESS to write CSS. I am using atom.io and there is a plugin to auto-compile LESS to CSS on save. (Link to plugin) However, some team member prefer to use sublime. While there are also similar plugin for sublime, it requires npm for installation. Our team mainly use PHP with composer for package management, so installing npm just for a plugin seems a bit overkill. Is there any other way to do LESS auto-compile on save with sublime?
Not that I know... :(
There is a python library that compiles less to css. (sublime plugin are written in python) though
So, all you've got to do is: write this plugin using lesspy
If you are a bit patient, I am trying to make this plugin, it shouldn't be to hard, I'll keep you in touch.
Matt
EDIT: Here's the plugin: st-py-less. Follow the (simple) instructions to install it. Only working with Sublime Text 3.
They could probably use SublimeOnSaveBuild
But npm and Composer aren't really comparable here. Composer manages a project's dependencies, npm provides easy access to hundreds of thousands of community-maintained packages. Using Composer isn't a reason to not install npm.
And the package you install when you "install npm" is under 14MB. It also comes included with Node.js. The "Installation Requirements" for sublime-less2css, by listing "install node" and "install npm" as two separate steps are misleading, and the provided links aren't that helpful. Here's the official documentation for Installing Node.js and updating npm
This is getting beyond the scope of your question, but to have a single team-wide editor-agnostic setup for automatically compiling LESS to CSS you could use Gulp. If you aren't familiar with Gulp, follow CSS-Tricks' Gulp for Beginners from the start up through the "Watching Sass files for changes" step. (Note that the guide teaches you how to use gulp-sass to compile Sass to CSS; in your case you'd just use gulp-less instead.)
We've been working with Neat framework for 6 months and love it.
However suddenly we have a critical problem with one of their excellent mixins which we are entirely dependant on for media queries.
Here's a link to the file.
https://github.com/thoughtbot/neat/blob/master/app/assets/stylesheets/grid/_media.scss
Heres the docs for the mixin.
http://thoughtbot.github.io/neat-docs/latest/#media
We've called it in our sass files almost 300 times so its pretty essential, although we mostly only use the first parameters e.g. media( max-width $small-screen)
Although we have also used it in some of the Refills navigation modules which use it in a more advanced way
http://refills.bourbon.io/
Don't know what the error is because gulp-sass and browser-sync crash without sending error messages to the console like it normally does with the way we have it set up.They only crash when this mixin is loaded. Don't know what causes the error
If I start removing the mixin we get error reporting back and gulp-sass doesn't crash any more. ALthough we get errors from all the files that call the mixin.
I've also tried the following
Completely deleting the node_modules directory and doing a fresh npm install
Doing a npm uninstall of gulp and gulp-sass, then a fresh npm install
Doing a global install of node-sass, and doing a global uninstall of node-sass.
Doing a npm rebuild node-sass from within the node_modules/gulp-sass directory
Does anyone have any suggestions/ ideas / solutions ?
I have a LESS file which I want to compile to use as my bootstrap theme. How can I compile it? Is there a place where I can do this?
The less FILE comes from http://bootswatchr.com/ but when I click the link get CSS and choose either minified version or complete version, nothing happens.
I have the LES file from the left pane, is there a way I can still compile it?
Install node.js
Install the Less compiler: npm install -g less
Run the Less compiler on your Less source to produce CSS: lessc your-source.less > output.css More info: http://lesscss.org/#using-less
If you are using WebStrom IDE, then it has a plugin for LESS to compile. I have been using the plugin to compile the LESS over a year.
If you want software, then I would recommend SimpLESS. You can use it on OSX/Win. It has drag and drop support which is nice and will tell you if your syntax is wrong. It also updates to support the latest LESS version.
I'm pretty new to whole Grunt and SCSS workflow stuff and recently configured Grunt with a WP theme development that run under MAMP. Installation of Node, NPM, Grunt and its dependencies went smooth. However, when i make a change on .SCSS files, it doesn't seem to be reflecting the changes to the .CSS files due to following warning from compass:
Running "compass:app" (compass) task
LoadError on line ["55"] of /Library/Ruby/Site/2.0.0/rubygems/core_ext/kernel_require.rb: cannot load such file -- susy
Run with --trace to see the full backtrace
Warning: ↑ Use --force to continue.
Aborted due to warnings.
Not exactly sure what's up but obviously a communication issue between Ruby and Compass?
Whether it be incorrect version mapping or paths..?
I researched and attempted following:
Uninstalled the current and installed new Ruby
Installed RVM (didn't use it, just installed it)
Upgraded compass to the latest version 0.12.2 and made sure this version is reflected in package.json for grunt.
Any pointers and advise highly appreciated!
I don't know if this is an option but you might look at PrePros (https://github.com/sbspk/Prepros). I tried for a while to setup the raw/core setup you are working with but it was just always quirky - not to mention super tedious to setup. PrePros takes all the pain away! Just a suggestion.
Related/Reference link: https://stackoverflow.com/questions/19866550/sass-haml-compile-on-prepros
I've been trying to install Sass on Gentoo, but it hasn't been going too well. Unfortunately, the latest version of Sass in portage is 3.1.21.
What I want to use Sass for requires at least Sass 3.2, which is available through rubygems.
What I've tried:
emerge dev-ruby/sass (installs an old version)
gem install sass
The second command appears to install the Sass gem. However, I do not use Rails or Ruby in any other aspect apart from Sass, so the gem appears useless to me. In addition, I do not know where gems are installed to or how to use them (I'm a ruby noob.) All I want to do is call sass from the command line.
Are there any ways to obtain an up-to-date version of Sass which I can just use from the command line?
Cheers.
On Gentoo, user-installed gems are not in your PATH by default. I have created a bug report because while user-installed gems work much better than they used to, this problem really needs to be rectified. You can help by voicing your opinion in the report and linking back to this page. To get things working, you can either deploy the script I uploaded to the report or use RVM instead, which will give you much more consistent behaviour across distros.
I'm wondering but all the answers looks weird for me. One of the biggest gentoo advantage is ebuild writing which is easy as pie so every user can contribute whatever he needs.
Add local overlay
fork upstream ebuild to your local overlay
bump version
use
test
attach tested ebuild to bug report, maybe also contact someone on #gentoo-dev-help
Trust me, using gem (or cabal, or whatever) instead of your package manager if way to mess your system.
Some might find useful to know that under Gentoo you can install sass using emerge which will solve the PATH problem some people are encountering.
# emerge -av sass
after which you should be able to use sass without problem.
Another solution would be to use rvm which could make things more portable and uniform across environments.
edit: in case someone's asking: to install rvm just follow the instructions found at: https://rvm.io/rvm/install/ and install the stable version.
I don't see a down side to using the gem version of Sass. I'm also not a Ruby/RoR developer (I use Haskell/PHP), and I just use the gem. I know just enough about gems to install/uninstall them, and that seems good enough for using Sass.
Installing and upgrading Sass is done with the same command:
sudo gem install sass
Installing Sass via gems gives you the ability to use it via command line, just like it shows on the official website: http://sass-lang.com/.
sass --watch style.scss:style.css
Other command line options can be found via --help or on their docs: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#using_sass
sass --help
Consider using compass it will accepts command lines like: compass [YOUR-FILE].sass and can also compass watch [SASS FOLDER] and 'compile' css to it.
http://compass-style.org/
To install using a gem
gem update --system
gem install compass
Installation