I'm just wondering if there is a way to integrate SASS into Jekyll. All that I need is an automatic .scss compilation into .css when I launch Jekyll.
I don't see anything wrong with compiling assets when you launch (which I take to mean run) jekyll. The whole point of running jekyll is to pre-compile your site, which is good for performance.
As for asset conversion-- there are many plugins available that focus on this. I like the Jekyll Asset Pipeline gem, which supports any language (e.g. Scss, Less, CoffeeScript, Erb, etc.) and has a bunch of features (e.g. asset tagging, compression, gzipping, etc.) that set it apart. It also seems to be the fastest growing Jekyll-related gem these days, which I take to mean that it is gaining traction in the community.
If you want to keep it as simple as compass watch you can use the Guard gem along with guard-jekyll and guard-compass (and if you like style injection, guard-livereload).
Guard bundles multiple 'watch' actions under a single terminal window, and is much easier to set up than a robust asset pipeline. Install the gems, configure the .guardfile according to the guard-compass and guard-jekyll instructions, cd to your directory and type guard. Any time a relevant file changes your sass files and/or jekyll site will be recompiled.
Native Sass, and CoffeeScript, processing debuted in Jekyll v2.0:
http://jekyllrb.com/docs/assets/#sassscss
Full disclosure: I am the lead dev behind this project.
The easiest way I've seen to setup Sass with Jekyll is with jekyll-compass. This gem will do exactly as you describe: Any time jekyll builds your website (jekyll build, jekyll serve, etc) your Sass will be compiled into the output folder along with the rest of your website. Check out the readme linked above for full usage details.
There's also some work under way currently by the Jekyll guys to get Sass support into the core of Jekyll so that everyone will have at least basic access to Sass and the wonderful feature-set it provides.
Related
I'm writing a Sinatra app and I'm quite tired of Sprockets (because it's hard to configure and doesn't support some libs). I'm thinking of moving to Compass for stylesheet management but I haven't found anything similar to it when it comes to scripts. Now I can manually compile coffeescript into Javascript and concatenate the resulting files, but how do I compress them for less size? Thank you very much.
You may take a look at Gulp. Here is the good article about using Gulp with Rails (but it would work for Sinatra too).
I'm currently trying to make my company use Bourbon/Neat/Bitters/Refills, the Toughtbot front-end stack often refered as the Bourbon family.
But while we use Ruby on most of our projects, we code static websites from time to time. On that kind of project, the scaffolding speed of Bitters could be very useful.
Thoughtbot released Bower packages for Bourbon and Neat, not for Bitters and Refills. Combined with Gulp for Sass pre-processing, Bower is perfect for small projects.
I can't find a reasonably reliable way to use Bitters and Refills for static websites. Any idea?
We don’t publish Bitters or Refills to Bower because we expect authors to change the code they come with. They are there are get you started.
For Bitters, I recommend using the gem, which comes with a CLI. We publish installation instructions on our GitHub: https://github.com/thoughtbot/bitters#installation
For Refills, you can also use the gem, or simply copy-paste from the website: https://github.com/thoughtbot/refills#installation
The UI developers touch the CSS, but given that Sass's workflow creates CSS, would any machine that displays the app (servers included?) need to have Ruby and Sass installed to view the app properly?
Or is it enough for anyone just working on the UI to have Ruby and Sass installed, in which case updating the CSS is done by a UI guy, and then the rendered file can be committed to be viewed and used by all?
You only need Ruby to compile Sass, the app will use the CSS (in fact, you don't need Sass files on your production app).
So only the people who are susceptible to work on the UI need to have Ruby (ans Sass) installed.
Sidenote:
Some frameworks allow on-the-fly Sass compilation (I'm thinking to Laravel-SASS for example). In this case, everyone need to have both Ruby ans Sass installed.
I am working on the css and html of a simple web-project.
I would like to use livereload to update what gets rendered in the browser on the fly whenever I make a change to any of the files in my project.
From the description on the livereload website:
What does LiveReload do?
LiveReload monitors changes in the file system. As soon as you save a
file, it is preprocessed as needed, and the browser is refreshed.
Even cooler, when you change a CSS file or an image, the browser is
updated instantly without reloading the page.
Since this is not a rails/sinatra project, but just simple html/css/js, what could I use to get live reloading?
E.g. is there some lightweight server in the gem repos that could solve this for me?
You could use the catapult gem to set up a simple sprockets app, without sinatra or rails. It is just a static site that makes it easy to use a sort of asset pipeline. I have used it a lot and I love it.
Then in your Gemfile you can add gem 'guard-livereload' project here.
Just follow the setup instructions, you may also have to check out guard to get everything working nicely together.
I only am suggesting catapult because it makes setting up a simple static site incredibly easy with the added benefit of sprockets, coffeescript and your flavor of sass.
To do this without catapult, just run bundle init (assuming you have the bundler gem installed) in your root directory which will create a Gemfile. Then all you need to do is add the guard-livereload gem like I wrote above.
enjoy
I love compass (SASS) and HAML. I've been using staticmatic for building static web pages. Staticmatic seams outdated (no updates, bugs). What are the alternatives?
What I would like:
$ preview .
> Server started ad port XXXX
> Now you can use Compass and HAML
:). So... no configuratio, no directory structure, just haml and sass files.
I am currently using Compass/Sass/Haml with middleman. https://github.com/tdreyno/middleman It is very easy to use, and runs a sinatra in the background so you can see your changes live in your web browser.
After you are done editing and previewing your markup it builds static HTML from your stack of Compass/Sass/Haml. See https://github.com/tdreyno/middleman/wiki for usage.
This requires no conf at all except to tell it which templating engines you are using at setup so I think it is exactly what you are looking for.
You can try jekyll. I think it doesn't work with sass and haml out of the box but you can look at plugins
Don't forget Nanoc. While it is a little involved, it has some slightly more powerful features than StaticMatic. It does depend on a directory however. :/
There are just a ton of static generators around, most of them in Ruby. I'm planning to use Frank for the next few static projects.
It uses Tilt to support a ton of template engines
It has a concept of layouts, which go in a separate layouts folder, and templates can have a metadata header, but other than that it's very minimal.