Adding custom include-path folders to LESS.build - css

I am currently using Sublime Text with LESS.build package to compile my .less files into CSS.
My current LESS.build cmd is:
"cmd": ["lessc", "screen.less", "${file_path}/screen.css", "--verbose"]
I tried to add some extra folders to the --include-path:
"cmd": [
"lessc",
"screen.less",
"${file_path}/screen.css",
"--verbose",
"--include-path='.:/var/www/whatever/'"
]
But, whenever i try to build my .less files the --include-path params seems to be ignored.
The only workaround i found is adding the full relative path on my #import:
#import "../../../www/whatver/config.less"; //Ugly solution
Can anyone point me where i am failing and/or any other workaround prettier than mine's?

Looks like there was a bug out for this. https://github.com/cowboyd/less.rb/issues/13
and there was a similar issue here LESS #import: Passing paths to lessc.

Related

Ruby Sass Compatibility Error IBM857 and UTF-8 [duplicate]

While trying to use grunt to convert my sass files into normal css files i get the warning:
Warning: Encoding::CompabilityError: incompatible character encodings: UTF-8 and CP850.
However when I run sass calling the file(s) everything works as it should even though no encoding is specified by me. My Gruntfile.js looks like this:
[...]
sass: {
main: {
files: {
'css/theme/default.css': 'css/theme/source/default.scss',
'css/theme/beige.css': 'css/theme/source/beige.scss',
'css/theme/night.css': 'css/theme/source/night.scss',
'css/theme/serif.css': 'css/theme/source/serif.scss',
'css/theme/simple.css': 'css/theme/source/simple.scss',
'css/theme/sky.css': 'css/theme/source/sky.scss',
'css/theme/moon.css': 'css/theme/source/moon.scss',
'css/theme/solarized.css': 'css/theme/source/solarized.scss',
}
}
}
[...]
which is a part of the Gruntfile.js I forked from the reveal.js on GitHub. I took a look at the grunt-contrib-sass on GitHub and tried to find the option to change the encoding manualy. However it apears that there is none (maybe I just overlooked it?).
I think a keypart of the problem is that I am using Windows 8 and not any Unix based OS.
So my question is:
How do i get rid of this warning? Or how do i fix the code to work properly?
Any help is appreciated.
I had this error when trying to use the command:
sass --watch global.scss:global.css --style compressed
And the cause was the most stupid cause ever... I had this folder: E:\Dropbox[Websites][External] Fundación Global\css and I run the command in there, and SASS returned this same error: Warning: Encoding::CompabilityError: incompatible character encodings: UTF-8 and CP850.
I just needed to take out the ó from the folder's path!
That simple and silly! Just changed this: ...Fundación Global\css for this ...Fundacion Global\css and I have SASS watching with no issues again.

Speeding up compass sass compilation with sprockets-sass

I am working with really big projects which are using compass(compass sprites tools including) sass framework cli tool(compass watch, compass compile) to create app.css file. Sass of the project is using multiple #import statements to include dozens on sass partials.
Problem is that app.css file is compiling for more than 2 minutes(app.css is 70000 lines long) after each small change in any sass partial imported into app.scss file compiling all of them at once while I need only 1 line change.
I made an extensive research and found articles like this one http://blog.teamtreehouse.com/tale-front-end-sanity-beware-sass-import which is suggesting to use spockets instead of #import to include sass partials. I like the solution more than most but big refactor will be needed even to test if it will work also all global includes like mixins and variables will need to be included in each sass partial used in the project which is also not ideal.
After some more research I have found this https://github.com/petebrowne/sprockets-sass tool which should automatically transform #imports into spockets require statements for compiler and also preserve ability of global imports.
The problem is I don't know ruby and did not use anything ruby related else then "gem install" statement )))
Can someone who knows ruby help me by explaining step by step how to make compass compiler work with sprockets-sass ?
P.S Please do not suggest solutions like libsass and it's like I have tested it by excluding all compass sprite related stuff and libsass also take a bunch of time to compile 40000 lines that remained without sprites(I suspect that part of the problem is not in compilation speed but in time system needs to create 400000 line file after).
The only thing that you can do is to split the output top-level file (app.css) into multiple output top-level files, and at the end of the compass-compilation reconcat them with a sprockets task!
This optimizes the usage of sass cache and the final concat-task is efficient because is a simple concatenation!
By the way, at the moment, compass is replaced with the EyeGlass Project made by Chris Eppstein the author of Compass.
So Consider the idea of a whole refactoring using (grunt/gulp) with libsass (A sass compiler built in C/C++) and EyeGlass that adds all compass-like features to sass!
hope Helps!

How to specify line_comments in compass compile?

I am using Eclipse IDE and I use compass to compile my .scss file. For this I have created a builder which I manually trigger whenever required. But each time I run this builder it adds lots of comments in generated .css file. I see we can use line_comments=false and that should fix my problem.
How to run compass compile without file or line reference?
But the point is where should I specify this. I don't have any compass.rb file. Can I somehow specify this in command line. As of now I am using this:
compile --css-dir=./css
Use --no-line-comments in command line argument to disable generating line comments.
Example:
compile --css-dir=./css --no-line-comments

problems with compass importing sprites

I'm confused by how the directory structure works. For example, mine is like:
--compass
--css
--images
--frontSprite
Images
-sass
--_base.scss
--advertiser.scss
config.rb
When I try to import my images I am using:
#import "frontSprite/*.png";
in my _base.scss, but this generates me an error which I feel is related to not finding the directory correctly. Any suggestions?
Well, the correct directory structure depends on what you've set in your config.rb.
Should look like that:
images_dir = "images"
http_images_path = "/this/path/is/rendered/in/the/css/file"
images_dir tells compass where the images lie (relative to the config.rb) and the http_images_path defines what is actually rendered in the CSS-output.
Try the command compass sprite "images/frontSprite/*.png" (this will generate the sprite css-output) from within your compass directory to debug the path.
Sidenote: When you work with .pngs you should consider installing oily png, this will remarkable speed up the sprite generation process. It's extremely simple just use gem install oily_png and Compass will automatically detect that it is installed.
If you are using Symfony & assetic
Go to config.yml & add this in parameters :
assetic.filter.compass.images_dir: %kernel.root_dir%/../src/App/PlayerBundle/Resources/public/assets/img/
I had this problem with compass in windows and solved it by editing this file:
C:\Ruby193\lib\ruby\gems\1.9.1\gems\compass-0.12.2\lib\compass\sprite_importer.rb
Change line 19:
- Dir.glob(File.join(path, "**", glob))
+ Sass::Util.glob(File.join(path, "**", glob))
And line 78:
- files = Dir[File.join(folder, uri)].sort
+ files = Sass::Util.glob(File.join(folder, uri)).sort
Save and it works!
Source:
https://github.com/chriseppstein/compass/commit/58babac01b56eddf63bac737f7f781d98f00f6b9
It's an old patch, so I wonder why it isn't in latest version of compass?

How can I add the "--watch" flag to this TextMate snippet?

I love TextMate as my editor for all things web, and so I'd like to use a snippet to use it with style.less files to automatically take advantage of the .less way of compiling .css files on the fly using the native
$ lessc {filepath} --watch
as suggested in the less documentation (link)
My (thanks to someone who wrote the LESS TM Bundle!) current TextMate snippet works well for writing the currently opened .less file to the .css file but I'd like to take advantage of the --watch parameter so that every change to the .less file gets automatically compiled into the .css file.
This works well when using the Terminal command line for it, so I am sure it must be possible to use it in an adapted version of the current LESS Command for TextMate since that only invokes the command to compile the file.
So how do I add the --watch flag to this command:?
#!/usr/bin/env ruby
file = STDIN.read[/lessc: ([^*]+\.less)/, 1] || ENV["TM_FILEPATH"]
system("lessc \"#{file}\"")
I assume it should be something like:
#!/usr/bin/env ruby
file = STDIN.read[/lessc: ([^*]+\.less)/, 1] || ENV["TM_FILEPATH"]
system("lessc \"#{file}\" --watch")
But doing so only crashes the TextMate.app.
Did you try running it as a background task?
system("lessc \"#{file}\" --watch &")
I'm guessing you have to put the --watch parameter before the file parameter to lessc, like so:
system("lessc --watch \"#{file}\"")
Take a look at this snippet. It doesn't use the --watch flag, but if you link it to the cmd+s key combination it works perfectly. The snippet will also compile any less files that reference (i.e. #import) the file that was changed. This is great if you have a until.less or something that you include in many different less files, if you change the util.less all the LESS files that depend on it will auto-compile.
Combine that script with the browser refresh script and you have a fairly decent web dev testing routine.

Resources