I have split my less/css into several files grouped by certain categories, so the single files stay easy to maintain. Though I only want to have one css file which gets imported into the layout.
For this I have - how I call it - a master less file which imports all the others like config, forms, layout and so on.
Now the problem is, that for example WinLess or all the other copilers i tried, only monitor the save of my master file, and only then compiles it. However this is stupid, because this file nearly never gets any changes. So what I would like to have is something, that detects changes on the imported less files and then only compiles the master file.
Does anyone know any tools, which are capable of that?
Or how do you manage your less files to bypass this problem?
Further Info: I have mapped the server directory locally via SSH and edit the files in there, i.e. the files are only pseudo local. They are on the server but accessible with a local path over a drive letter. The compiler should be able to work with that setup.
Thanks for the answers!
In all honesty, your best bet is to actually use Less's own compiler which will of course be the most up to date option. It will be done through command line but it's the best way to know that everything is correct, working and up-to-date.
All the information can be found in the Less Documentation Here
More information about compiling with imports can be found HERE
The latest version of WinLESS does report that it has automatic re-compiling when an #import file is changed so it could be that your version of WinLESS is out of date. (See HERE - 3rd bullet point under Features)
Alternatively, see if you can get it to work on purely local files. If this works, it may be an issue with the compiler not being able to do asynchronous checks over SSH.
I use Notepad++ with the NppExec-plugin on-save script. If you make a convention decision to always name your primary file "master.less" you can use this script:
NPP_CONSOLE 0
NPP_SAVE
if $(EXT_PART) != .less goto end
"C:\Node.JS\node_modules\.bin\lessc.cmd" -x "$(CURRENT_DIRECTORY)\master.less" > "$(CURRENT_DIRECTORY)\master.min.css"
:end
You can do something similar with any editor that supports batch scripting (like Stewartside suggests)
For development, I guess it is fine to use a plugin like https://github.com/stephenplusplus/grunt-wiredep
But for production I would like to use CDN where such exists. Does it exist a Grunt plugin that goes through the bower.json file and replaces this with a CDN-link from the most popular ones (and if a component is present in more than one CDN, then pick one based on rank-setting or random or something).
I haven't tried it myself, but this might be helpful - https://www.npmjs.org/package/grunt-google-cdn
If you'd like to use a different cdn, then maybe you could use cdnify
Is there a way to use Sass or Compass or anything like that without Ruby?
I have been looking around google and this site and can't find anything, any help would be appreciated. Thank you
Sass was originally written for Ruby, but now they've created libSass which is a C/C++ port of the Sass engine, which makes it easier to integrate the engine into an IDE or another language. At this point, you can use the Sass engine in Ruby, Node.js, Python, PHP, Java, .NET and others. For more information, visit libSass. Also, your IDE might have a plugin which would support Sass, without the need of ruby by using the libSass.
The original answer below may or may not apply to your situation (depends on whether or not your language has implemented support for libSass or not). I decided to leave it the way it is for archive reasons.
Sass (requires Ruby)
Sass is written in Ruby, so you’ll need Ruby installed as well.
Taken from sass's site
Compass (requires Ruby, as it's based on SASS)
Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy.
Taken from compass's site
Less (written in js, requires node.js or less.js included in the page)
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino. Taken from Less's site
These are the main processors out there that I know of.
You may write your own parser/port for any another language of choice.
In other words, no you can't use sass/compass without having Ruby because the program itself (sass & compass) IS written in Ruby. So you'll definitely need it in order to run it.
Actually there is a library that provides binding for Node.js to libsass, the C version of the Sass: https://npmjs.org/package/node-sass
It allows you to natively compile .scss files to css at incredible speed without Ruby installed.
To install just run:
npm install node-sass
And there is also a Grunt extension if needed: https://github.com/sindresorhus/grunt-sass (this is what I've been looking for in this question)
Find out more at: https://github.com/andrew/node-sass
It's true that the question is not clear enough, but i'll try to address some issues. There are other CSS pre-processors that don't rely on Ruby (two coming to my mind right now are Less, which i've used and liked, but not as powerful as Sass, and Stylus, which i haven't used, both based on JavaScript), but as you're specifically asking about Sass+Compass, and as i'm still looking for the same answer, i'll talk about that.
#JamundFerguson said:
Is there a way to compile Sass without Ruby? Depends.
There is
Sass is a pre-processing language. There's a compiler built in Ruby for it and anyone can write a compiler in any language. There's a C implementation of a Sass compiler called libsass which can be used on any language that allows to import C libs. It's the library used by node-sass, which is a compiler built in Node.js, which I didn't tried yet and don't know how it could work and if it's ready for production use. It may be a question of time for Compass to be ported (maybe you end up doing that?) and so we can have a compiler which doesn't depends on the Ruby gem (currently, there's a node-compass module that does relies on the Ruby gem).
Other languages
So far i've mentioned the possibility for a Node.js compiler, which, as you may know, it's a JavaScript environment, being the language of the web and my language of choice. But you didn't specified which language you would like the compiler to be written into. I think there may be compilers built in many languages, for example, #EricMeyer mentioned a Python compiler. Maybe he's using pyScss? That seems to have built-in support for Compass. But then you need a Python environment. So the thing is: you'll need some environment for a compiler unless you run natively compiled binaries. (Less has less.js which can be included on the page to run client-side and avoid the compiling step, but it's not meant for using it on production.)
Native apps
I've worked for a year with CodeKit, which does very well, compiles Sass/Compass, Less, Stylus and template languages like Haml, Slim, Jade, etc. Rebuilds your assets when they change automatically and you see the changed on your browser immediately. The only thing that i didn't liked was that when moving to a different computer, installing CodeKit, checking out project and trying to use it, i had to reconfigure the project settings, which i had to remember so i could get to a build like the one i made in the other computer. Also i started working with a team, and they had also to configure the project with the same settings (sometimes not having the same project config lead to ugly inconsistencies) and also members of the team using Ubuntu couldn't use it. That's why i started to think on making a command-line tool to build projects and discovered Grunt immediately, and fell in love with it.
As #Dave mentioned, there's Scout and also there's LiveReload, but haven't used them.
Conclusion
Conclusion is i have not a strong conclusion. I'm still looking for the same answer, but i hope this answer sheds a little bit of light on the status of compiling Sass/Compass outside of the Ruby environment.
Just a little bit of an update on this, you can use SCSS/SASS files and generate the correct files on the fly without installing Ruby by using a program called Scout.
Scout has its own self contained ruby environment and is coded in java so make sure you java is up to date before using. Linky here.
Regards :)
You can actually parse sass without ruby, you can use node-sass.
details here: https://github.com/andrew/node-sass
If this is for .NET, there is now a wrapper for libsass. Available from Nuget.
Adobe Brackets (free, open source) can compile LESS, SASS and Stylus when the files are changed, and update styles during live preview, you just need to install required extensions from the extension manager.
Get Brackets and enjoy !
Edit: As other questions suggest node-sass is also a good option if you have nodejs already installed.
macOS users can install Dart Sass by running:
$ brew install sass/sass/sass
Windows users can install Dart Sass by running:
$ choco install sass
More info:
https://github.com/sass/dart-sass
This is a noob question.
I would like to use grunt.js as a build tool for my web project. Can use grunt.js to validate my HTML/CSS files? Do you have an example of such a grunt.js file?
There is another plugin that seems to be updated more often and does not require java. grunt-html-validation. It has a number of options and has been working great for me. You can install and use it like this:
npm install grunt-html-validation --save-dev
Then put something like this in the initconfig of your Gruntfile.js
and this in appropriate places in your Gruntfile.js
grunt.loadNpmTasks('grunt-html-validation');
grunt.registerTask("default", ["validation"]);
There is also a number of useful options including the ability to relax errors based on a regular expression (could be useful for AngularJS for example) and the ability to save a report.
You can use the grunt plugin grunt-html. Beware, you will need Java on your computer to use it. It works well for me.
As of now there seem to be two popular HTML validation plugins:
grunt-html-validation
grunt-html
grunt-html-validation uses the W3C Markup Validation Service and grunt-html uses a local copy of the java-based The Nu HTML Checker.
They both work well and have very similar options so it comes down to whether you want to wait for an external service call or wait for a local java app.
if you're familiar with Liferay you'll know that when you make an itsy-bitsy change to a css file you shall rebuild the theme and redeploy it.
As for redeploying I made a symlink (mind you I'm on Windows: for the curious creating a symlink on Vista is just a matter of issuing mklink /d dir1 dir2).
But what about rebuilding the stuff with maven? I'd rather skip that step. Basically what it does is combyining and packing all CSS in one everything_packed.css. Is there a sort of config variable to tell liferay just to include the raw files and skip redeployment alltogether?
Thanks
Guys I found the solution myself.
You should have a file called portal-ext.properties file in
$TOMCAT_DIR/webapps/ROOT/WEB-INFO/classes
Or more specifically for my win setup in
C:\liferay\webapps\ROOT\WEB-INF\classes
The file would hold the value
theme.css.fast.load=false
This will prevent liferay to be looking for the everything_packed.css and so you're free to modify your stuff without rebuilding and CTRL-R to refresh the page and see the changes.
Just for completeness, as this question is somewhat old and the problem already solved: There's a lot more along these lines, e.g. javascript, layouts etc. that can be used uncached. This is documented in either the Liferay Wiki (as Developler Mode) or the Development Guide, available from the documentation site (though currently it's not there for the last version - if it's still not there when you're reading it, look for it (PDF) in the older versions.
It's advisable to use these settings only in development, not in production, as putting all css and javascript in as few files as possible results in a huge performance impact.
to include all those settings, just can also just add the following line into your portal-ext.properties file:
include-and-override=portal-developer.properties
this will include all the developer specific settings, and when you want to remove them, you can just comment out this line.
you can edit the css files of your theme from Webapps{your theme}\css
And can see the changes directly.
You can edit almost every file which doesn't require compilation.like .jsp files but not .java files