CODEWITHSUNDEEP
csssassless
Tintin81
Tintin81

Reputation: 10215

How to run SASS or LESS on a shared host?

I would like to use variables in CSS, so I am considering using either SASS or LESS for that purpose.

My problem, however, is that I will be deploying the project on a shared host, not a dedicated host with command line access.

I also don't like the idea of my users having to compile CSS files in their browsers using Javascript. (What if they have Javascript disabled?)

What is the best way to deal with this kind of situation? Will I have to resort to plain old CSS in the end? I hope not...

Upvotes: 18

Views: 19497

Answers (8)

Dylan R
Dylan R

Reputation: 213

Most shared hosts will not allow you to install custom gems to the default directory, as it usually exists outside of the user's home folder and therefore outside of the user's writeable directories.

What I had to do on my shared host (1and1 hosting) was follow -[these instructions]- on installing custom gems on a shared host. You'll need shell access to your shared hosting server to perform the necessary steps. You'll also want to make sure you update the commands you're running to handle the latest version of RubyGems (2.0.3 at the time of this post).

Once you've done the initial setup, it's just a matter of running the gem install sass command. Then change to the directory where you store your CSS files and run sass --watch to start generating your CSS files with SASS.

Upvotes: 2

Flavius-Calin Tofan
Flavius-Calin Tofan

Reputation: 11

Tintin81, just type php sass/less compiler in google and use the first results, like scssphp or lessphp

http://leafo.net/scssphp/

http://leafo.net/lessphp/

It will compile your scss files into css on the go, with caching and so on. Easy to implement, and the source scss files stay with the project. It will work online or on your local environment.

I can't believe how many stupid unhelpful answers were given here instead of simple answers to the question.

Upvotes: 1

Edgardo Jimenez
Edgardo Jimenez

Reputation: 11

Although it's not SASS or LESS, CSS-Crush has all standard pre-processor features. I've used it extensively in my own projects on shared hosts without any server-side installation.

The only requirement is PHP, which is a given at any decent host.

Upvotes: 1

Dovev Hefetz
Dovev Hefetz

Reputation: 1466

This might help - I'm exploring it for the same purpose http://www.dev-metal.com/compile-sass-to-css-with-pure-php-automatically/

It's a script that you initiate via the web, and then continues to run indefinitely to look for scss files that are out of date.

Update: It works great, but the host seems to be treating the script as a runaway and killing it. So I edited php-sass-watcher.php to comment out the loop, and added echo "Finished compiling " . date(DateTime::RSS);. Then in my eclipse I open a web browser view and just run the URL on each change, similar to running a compiler on the command line.

Upvotes: 0

Duncanmoo
Duncanmoo

Reputation: 4221

Two Options:

1) LESS/SASS pre-processor (recommended)

The OP did not mention what server side processing capacity is available which could have narrowed down options here, but what you want is a server-side LESS/SASS, which ideally also minifies and caches the generated CSS.

If you have PHP available to you you could use lessphp; the older project is github.com/Incenteev/lessphp, but don't use that the project has stalled, rather use github.com/oyejorge/less.php, which has a lot to offer and is nicely documented.

For SASS there is github.com/richthegeek/phpsass

2) LESS.js SASS.js (+)

Take a look at the less.js page in the section client side usage, simple but not a production solution.

SASS JS implementation is more tricky and it appears that numerous attempts have been made, I can not vouch for it but this project looks pretty active: medialize/sass.js

+ NOTE: this is a poor solution for a live environment as the browser has to download the full LESS/SASS files, compile and render; Most modern browsers can handle it BUT it is very inefficient. Only use in your dev enviro or for mockups.

Upvotes: 1

Hamish
Hamish

Reputation: 23346

Firstly, CSS pre-processors are a development tool to make it easy for you to manage your CSS files - they are not run in the browser.

Secondly, the only difference in running the pre-processor on a shared or dedicated host is whether you're able to install the pre-processor in the first place.

To revise my old answer: some CSS pre-processes can indeed run in the browser. For example, Lesscss will request and compile less sheets to CSS and update them live. It's an invaluable development aide, but definitely not something you want to do in a production environment.

Upvotes: 3

Andrey Mikhaylov - lolmaus
Andrey Mikhaylov - lolmaus

Reputation: 23883

You've got a contradiction.

If you would like to have full control over your site, you should get an own server, either dedicated or virtual. This would let you installing and running any stuff you want.

If you're not allowed to install and run custom software on your shared host, then you're not able to compile SASS on-the-fly. You have to compile SASS prior to uploading code to the server.

If you're not satisfied with a necessity of compiling SASS locally, you could automate it using a deployment technique like Capistrano or probably your IDE. The choice of a deployment tool highly depends on your development and hosting environments.

Another option is compiling LESS locally in clients' browsers. See http://lesscss.org/#usage. But i wouldn't recommend that for two reasons:

  1. This would make your website less accessible (what an irony!). You shouldn't rely on heavy JS for applying basic styles to your website.
  2. SASS is preferred over LESS for several reasons, the main of them is the awesome Compass toolkit.

Upvotes: 6

bookcasey
bookcasey

Reputation: 40511

Compile the Sass or Less on your development machine, and push the compiled, minified CSS to your server.

Upvotes: 15

Related Questions