How do I get Burbon Neat running with code kit? - codekit

I have a burbon running on code kit. It is not problem, I cant get neat running?
when i put
#import "neat";
I get this error
Syntax error: File to import not found or unreadable: neat.
Load paths:
/
/Applications/CodeKit.app/Contents/Resources/engines/bourbon/bourbon/app/assets/stylesheets
on line 13 of /Applications/MAMP/htdocs/dev.wordpress/wp-content/themes/blankslate/style.scss
Use --trace for backtrace.

Since CodeKit version 1.8, Neat is built in. You don't need to install anything, just write this in your SASS/SCSS file:
#import "bourbon", "neat";

Make sure your 'Neat' folder is inside your stylesheets folder and use #import "neat/neat";
directory example:
[sitename] > [assets] > [css] > styles.css, [sass] > _main.sass, styles.sass, [neat]

Neat is a framework on top of Bourbon, so it does not automaticaly come with Bourbon.
Install Neat as following.
In Terminal:
gem install neat
Then cd to your Sass directory and run:
neat install
In your Sass file:
#import "neat/neat";

You also need to do:
#import "bourbon/bourbon";
before:
#import "neat/neat";
so your final scss file should start with(in the same order):
#import "bourbon/bourbon";
#import "neat/neat";

Related

Bootstrap 4 beta using rubygem doesn't work with Jekyll

I just start using Jekyll recently for my personal project.
I'm using Jekyll-assets together with gem 'bootstrap-sass'; and everything works with charm.
This is what my main.css.scss look like:
#import '_sass/variables';
#import '_sass/scaffolding';
#import 'bootstrap-sprockets';
#import 'bootstrap';
#import 'font-awesome-sprockets';
#import 'font-awesome';
Everything works when I run jekyll serve.
However, when I try to use the latest beta version,
I got this error when I try to run Jekyll Serve
Incremental build: disabled. Enable with --incremental
Generating...
Error in _assets/css/main.scss:7 File to import not found or unreadable: bootstrap.
Load paths:
/Users/MacBookPro/.rvm/gems/ruby-2.3.0/gems/font-awesome-sass-4.7.0/assets/stylesheets
/Users/MacBookPro/.rvm/gems/ruby-2.3.0/gems/font-awesome-sass-4.7.0/assets/fonts
I commented out the #import 'bootstrap-sprockets.
It seems that Jekyll-assets does not found the bootstrap path.
I've already follow the step-by-step guide as stated in the documentation at [https://github.com/twbs/bootstrap-rubygem][1]
Currently I'm not using any package manager such as npm,yarn etc. Any help?

Laravel scss compiling fails

I'm trying to learn laravel and set up a new project with composer on Windows 10
if I try to compile the
resources\assets\sass\app.scss
I got the following error
Compilation Error
Error: File "c:\Users\Michael\www\demolaravel\resources\assets\sass\node_modules\bootstrap-sass\assets\stylesheets\bootstrap" not found
on line 9 of sass/c:\Users\Michael\www\demolaravel\resources\assets\sass\app.scss
>> #import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
why he complains about that dir - also the app.css (at least this particular line) is original. It's the way composer installs it.
// Fonts
#import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
body{
padding-top: 80px;
}
I just added the body selector at the end
I work with visual studio code and the live sass compiler extension. But I also tried Scout-App
also tried puting the absolute path but nothing works :(
It seems you didn't installed all your node dependencies.
Run this command npm install on your project.
the #import
write like this
#import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
compile new css with npm run dev
First make sure you have installed node and npm globally. Then delete the node_modules directory from you project, and run
npm rebuild node-sass
This command may take some times to execute. After that go to your project directory and run npm install. Then compile your assets with laravel-mix.
I also faced the the same problem in linux environment and I have come across with this solution.

Include Susy with Nanoc

I'm trying to include Susy in my Nanoc project.
I followed the GitHub of ddfreyne. I installed Compass first and Susy next. Then, in my Gemfile I added the line: gem "susy".
In my stylesheet, I added #import "susy" Unfortunately, I have an error during the compilation which is Sass::SyntaxError: File to import not found or unreadable: suzy. I don't understand this error...
I'm using SASS to make my stylesheets.
I hope you'll be able to help me! Cheers.
The mistake was quite simple. I had to replace #import "suzy by #import "susy" in my stylesheet.

Importing Compass styles with Sass using Yeoman

I created a project using yo webapp (with the generator-webapp installed obviously).
Everything is fine, but I'm still missing something. I'm sure it's such an easy answer that I'll never come back to SO because I'll be too embarrassed.
I want to use Compass, which comes out of the box with Yeoman, but I don't know how. I mean, obviously #import "compass...etc" inside any Sass files won't work since inside app/bower_components (the default path for Sass #imports specified inside Gruntfile.js) there's no compass directory.
What should I do now in order to import Compass stylesheets?
You can use compass just as you would usually do. If you set up a vanilla compass project with compass create, there is compass folder either. If you want to use any of the helpers compass ships with, you can import them just as described in the documentation, e.g.
#import "compass/css3";
.mybox {
#include box-shadow(red 2px 2px 10px);
}
main.scss
You would have to install grunt task for compass with npm install grunt-contrib-compass and adjust your Gruntfile.js to add a task for compass compilation.
It may appear not that easy since it has some tricky parts like to compile your sass to .temp/main.css to use for testing/livereload, and then minify it into your dist when doing final build.
The most easy way might be to just try another generator that has compass in a separate directory. For example angular generator has compass and even bootstrap for compass. It's pretty cool.

sass #import "compass/reset" error

I'd like to use Sass with Compass on my static HTML project, but following the instructions does not work. This is what I did:
$ gem install compass
$ cd <myproject>
$ compass install compass .
which was following by awaiting:
directory ./sass/
directory ./stylesheets/
create ./sass/screen.scss
create ./sass/print.scss
create ./sass/ie.scss
create ./stylesheets/screen.css
create ./stylesheets/ie.css
create ./stylesheets/print.css
But when I start watching scss sass --watch sass:stylesheets, I get an error:
error sass/screen.scss (Line 6: File to import not found or unreadable: compass/reset.
This msg coherent with #import "compass/reset";
What do I have to do on my Ubuntu to see that compass imports?
Use compass watch instead of sass --watch sass:stylesheets. If you're using compass, you don't need to bother with sass command. Just use the compass command.
if you really wanted to use sass command i use this code. Considering that you are in your sass directory running the following command.
sass --watch style.scss:../stylesheets/
That simply means that I have created a new file called style.scss and imported the following files within my style.scss. So sass would only watch a single file. In the above command we wishes to have the generated style.css to be in the stylesheet directory.
again its sass --watch style.scss:/path-to-output-directory/
#import "ie";
#import "print";
#import "screen";
so in this process sass is only watching single file style.scss for any changes within sass directory files.
I hope this explains well.

Resources