Using blueprint.sass in Webby/Compass Integration - ruby

I'm following an article here:
http://gom-jabbar.org/articles/2009/02/04/don-t-use-css-or-table-layout-use-sass-ad-compass
more specifically the section entitled "Concrete Example of using
Compass and Sass for creating a layout that people generally use
tables for"
The example references #import blueprint.sass
Where is this file located as my webby project does not seem to be able to find it.
(Also note that I'm using Ubuntu)
My layout.sass file looks like this (nothing fancy):
---
filter: sass
extension: css
layout: nil
---
#import blueprint.sass
body
+blueprint-typography
I get the following error when running webby:
create output/stylesheets/layout.css
[22:56:30] ERROR: while rendering page 'content/stylesheets/layout.sass'
[22:56:30] ERROR: sass filter error: "File to import not found or unreadable: blueprint.sass."

Definitely need to upgrade to the latest edge haml. That was a bug in how comments get parsed that was fixed in the last month or so.
git checkout git://github.com/nex3/haml.git
cd haml
rake install

Alright figured it out...
You have to download/install the most recent installation of haml which isn't yet specified on the compass primer
This should actually be the first step in installing it!
And here is how that step goes:
Download the latest version of HAML with the following command: git clone git://github.com/nex3/haml.git
(This will create a new directory ./haml/)
Change to the ./haml/ directory.
In the ./haml/ directory type the following command: rake install

Related

Jekyll site fails only when pushed to GitHub

I am developing a new version of a static website with Jekyll that deployed via Github pages: https://devcampy.com
The repository: https://github.com/gianarb/devcampy.com
Locally I run it with docker, and I am not able to reproduce the issue:
$ docker run --rm -p 4000:4000 -v "$PWD":/srv/jekyll jekyll/jekyll:stable jekyll serve
This is the error I get via email when I push to the repository. I can't figure out why it does not work properly
The page build failed for the `master` branch with the following error:
Your SCSS file `assets/main.scss` has an error on line 6: File to import not found or unreadable: vendor/rfs. Load paths: node_modules /hoosegow/.bundle/ruby/2.5.0/gems/jekyll-theme-primer-0.5.3/_sass /hoosegow/.bundle/ruby/2.5.0/gems/jekyll-theme-primer-0.5.3/_sass /hoosegow/.bundle/ruby/2.5.0/gems/jekyll-theme-primer-0.5.3/_sass. For more information, see https://help.github.com/en/articles/page-build-failed-invalid-sass-or-scss.
Does somebody have any feedback? Thanks a lot
Your current bootstrap code is incomplete.
/node_modules/bootstrap/scss/vendor/_rfs.scss is missing because of a .gitignore rule that prevent any vendor folder to be versioned.
In your .gitignore, replace vendor line by vendor/bundle
run npm install bootstrap to override current version
The error is telling what the problem is. You have this on the line in main.scss
#import "bootstrap/scss/bootstrap";
So this means the file may exist locally but is not able to import on your deploy since it's not there.
Looking at your repo I see you have bootstrap located here:
node_modules/bootstrap/dist/css/bootstrap.min.css
So try this instead:
#import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
// or you could try
#import "../node_modules/bootstrap/scss/bootstrap.scss"
I would think one of those should work.

PHPStorm: Missing file for SCSS configuration?

I'm trying to switch over to PHPStorm and I would like to activate the transpiling of SCSS files, but it seems like one file is missing in my ruby-folder.
I found an image in this thread, which shows how to configure the file watcher:
The problem is now that I don't have a "scss.bat" in my /bin/-folder, to insert in the "Program:"-field. I made sure that I have the latest version of ruby by downloading it from rubyinstaller.org.
These ".bat"-files are in my folder:
erb
gem
irb
rake
rdoc
ri
setrbvars
testrb
I tried every file, but I get a different error each time.
What am I doing wrong?
Thanks for your help.
I found my error:
I forgot to install SCSS after my Ruby-installation. To do so open your commandline and type:
gem install scss

breakpoint (gem) not found or unreadable

I’m using breakpoint within a serve project. After adding require 'breakpoint' to my './config.ru' and #import 'breakpoint' to my stylesheets, breakpoint works well while running serve (which I actually run via Pow).
However, when using serve export to export the site to static HTML/CSS/JS files within a predetermined folder, I get the following error in my stylesheets:
/*
Syntax error: File to import not found or unreadable: breakpoint.
Load paths:
/Users/agarzola/git/devdev-splash/stylesheets
/Users/agarzola/.rvm/gems/ruby-1.9.2-p290/gems/compass-core-1.0.0.alpha.16/stylesheets
Compass::SpriteImporter
on line 5 of ./stylesheets/screen.sass
1: /Users/agarzola/git/devdev-splash/stylesheets/screen.sass
Backtrace:
./stylesheets/screen.sass:5
[…]
*/
I’ve been poking around the serve gem itself and found that export simply runs compass compile -c '#{#input}/compass.config' '#{#input}' to compile stylesheets before copying them to the destination folder. I had also learned some time ago that the export feature in serve does not yet use config.ru (as it should), and I haven’t been able to figure out where exactly I need to tell compass to use the installed breakpoint gem.
So I tried running compass compile -c ./compass.config and compass watch -c ./compass.config, both of which return a similar error:
error stylesheets/screen.sass (Line 5 of screen.sass: File to import not found or unreadable: breakpoint.
Load paths:
/Users/agarzola/git/devdev-splash/stylesheets
/Users/agarzola/.rvm/gems/ruby-1.9.2-p290/gems/compass-core-1.0.0.alpha.16/stylesheets
Compass::SpriteImporter)
I created an issue on the serve project, but I’m hoping someone here can share some much needed insight. Thanks!
I had a similar issue where I have to uninstall the theme and reinstall because for some reason the gems were not being seem. Post here
After I uninstalled the theme, I ran install bundle and then checked rvm requirements. Then I reinstalled the theme and subtheme. I do not use serve however this could be similar enough that it might work. I did not find anything that helped other then that.

Trying to install foundation using compass

I get the following error when trying to get my project up on my mac.
LoadError on line 31 of /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ruby/1.8/rubygems/custom_require.rb: no such file to load -- zurb-foundation
Note I have updated my gems, updated compass to the latest version, updated the foundation gem but I cannot get my stuff to compile. Also I tried creating a new project with the same settings but i get the same error.
What does your include look like? The library itself is just called foundation. On all my projects I include the path to my vendor files (usually bower_components) in my importPaths configuration, and include this in my main sass file:
#import 'foundation';

Use Bourbon SASS library with LiveReload

I'd love to use Bourbon with LiveReload but I can't seem to get them to work together. Anybody successfully made these two play nice?
If you use the 'Run a custom command after processing changes' option rather than the standard compilation option, then you can use the commands as detailed on the readme.
# Example (project root directory)
sass --watch stylesheets/sass:stylesheets -r ./stylesheets/sass/bourbon/lib/bourbon.rb
I wrote a blog post covering this.
If you install the latest version (3.0.0) of Bourbon and install bourbon into your compass sass directory:
bourbon install --path ./sass
You can then use LiveReload with one small tweak. You will need to replace LiveReload's version of SASS with at least 3.2.3, since Bourbon requires this.
Instructions on how to replace LiveReload's default SASS version can be found here: http://carl-topham.com/theblog/post/changing-version-sass-livereload/
This seems to work for me.
I've been told you can get it to work by passing the lib/bourbon.rb file into the "Run a custom command" option in LiveReload. See attached image.

Resources