I don't know how to connect the atom.io editor with susy.
I have tried searching the "atom susy", "atom susy sass" and simmiliar in google, but I have found nothing that help me. (most result were connected with chemistry, so I started to write "atom.io" instead of "atom" and this still has not delivered good results)
Okay... So I have:
Atom (editor) with packages:
sass-autocompile
sass-watch
and npm with:
node-sass
susy
auto-loader
I have tried:
#import "/Ruby22/lib/ruby/gems/2.2.0/gems/susy-2.2.12/sass/susy"
But susy doesn't work.
#import "C://Ruby22/lib/ruby/gems/2.2.0/gems/susy-2.2.12/sass/susy"
But susy still doesn't work.
#import "susy"
Error (not found)
#import "~/susy/sass/susy"
Error (not found)
#import "~/susy-2.2.12/sass/susy"
Error (not found)
Can anyone tell me how to get this to work?
Am I missing config? (if yes: Where to write this config?)
Follow the below steps to make sure whether you installed properly.
Install Compass
gem install compass --pre
Install Susy
gem install susy --pre
Create config.rb in the root of the project folder.
# Add the below contents
require "susy"
project_type = :stand_alone
http_path = "/"
# your sass folder
sass_dir = "sass"
css_dir = "css"
images_dir = "img"
fonts_dir = "fonts"
javascripts_dir = "js"
line_comments = false
preferred_syntax = :scss
output_style = :expanded
relative_assets = true
Create main.scss
// Add the below contents
#import "susy";
body {
background: #000;
}
Watch through compass now - "compass watch"
Related
I'm pretty new to Node and i'm trying to use Susy grid but get this error
ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./scss/waterbottle.scss
Module build failed:
#include gallery(1 of 2);
^
No mixin named gallery
I installed Susy and sass-loader with this command
npm install sass-loader --save-dev
and imported Susy in my .scss file like this
#import "~susy/sass/susy";
I've tried changing this path with no luck. I shouldn't have to do that according to their website.
My project file structure
It seems Webpack is locating the Susy file correctly, but somehow won't recognize it's mixins.
You likely installed Susy3 without reading the changelog. Susy3 no longer has a gallery mixin. Check the susy3 intro and documentation for more details. Susy2 will be maintained for the foreseeable future, if you want to stay with that.
I already work on an Angular 2 project and so far GMap and Chartjs works.
But now i have the problem that if i include an Accordeon it doesn't get formatted properly.
I included primeng and primeui via
npm install primeng --save
npm install primeui --save
and also font-awesome via
npm install font-awesome --save
this is my angular-cli.json
"styles": [
"styles.css",
"../node_modules/primeng/resources/themes/omega/theme.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/primeui/primeui-ng-all.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/primeui/primeui-ng-all.min.js"
],
and this is the resulting output so far.
resulting output
It would be nice if anyone could bring up some suggestions :-)
I found a solution by my self after a hard research ;-)
The solution is to import the .css files in the global styles.css and not in angular-cli.json
This is my new styles.css-file
/* You can add global styles to this file, and also import other style files */
#import url('../node_modules/primeng/resources/themes/omega/theme.css');
#import url('../node_modules/primeng/resources/primeng.min.css');
#import url('../node_modules/font-awesome/css/font-awesome.min.css');
And this is my new output
So maybe, if someone has the same fault this will help.
I had integrated sass suport in angular2 seed (https://github.com/mgechev/angular2-seed) and also installed susy form npm(npm install susy --save-dev) but when I imported susy form .scss file it gives following errors
[13:01:16] Starting 'build.html_scss'...
Error in plugin 'sass'
Message:
src/client/css/main.scss
Error: File to import not found or unreadable: ~susy
Parent style sheet: /home/jorin/WebStormWorkSpace/nylndaUI/src/client/css/main.scss
on line 1 of src/client/css/main.scss
>> #import "~susy";
^
[13:01:16] Finished 'build.html_scss' after 218 ms
Anybody who can guide me, what I am doing wrong?
In your sass, correct the path to susy.
It could be
#import "~susy/sass/susy";
The Susy install Guide suggests to use bower and to use a relative path.
bower install susy --save
#import "../bower_components/susy/sass/susy";
But there's no reason you couldn't use the path to your npm-installed susy:
#import "../node_modules/susy/sass/susy";
If you're taking this method, this file is relative to your sass file, so it could be something like
#import "../../../../node_modules/susy/sass/susy";
I like to use Codekit for a Compass-Poject with Susy and Breakpoint.
#import "compass";
#import "compass/reset";
#import "susy";
#import "breakpoint";
But there is an error message "File to import not found or unreadable: breakpoint."
Can i use Breakpoint with Codekit2?
Thanks!
Yes, however as Codekit 2 doesn't come bundled with Breakpoint like it does Susy and Compass, it's not as easy as #import "breakpoint";. What you will need to do is, using Codekit 2's Bower integration, download the breakpoint-sass bower package and change your import to #import "../bower_components/breakpoint-sass/stylesheets/breakpoint";.
Why not use #include susy-breakpoint(setting, layout);? It allows you to add settings once instead of using #include breakpoint(your setting); and then #include layout(your layout); on the next line.
I no longer see breakpoint-sass in the Codekit listing of bower packages. I will keep checking.
For those cannot find breakpoint-sass in the CodeKit listing of bower packages, you can do the following.
npm install -g bower
bower install at-import/breakpoint
And then
#import "../bower_components/compass-breakpoint/stylesheets/breakpoint"
inside your main .scss file.
I cloned the repo https://github.com/TryGhost/Ghost for (a nodejs) Ghost blogging platform and followed the instructions for set up. When I ran grunt I got this error
Running "sass:compress" (sass) task
Syntax error: File to import not found or unreadable: bourbon/_bourbon.
Load paths:
/Users/m/Sites/Ghost
/Users/m/Sites/Ghost/core/client/assets/sass
on line 22 of ./core/client/assets/sass/modules/mixins.scss
from line 10 of ./core/client/assets/sass/screen.scss
Use --trace for backtrace.
Warning: Use --force to continue.
Aborted due to warnings.
I found a blog post http://www.bearfruit.org/2013/10/19/quick-tip-for-getting-the-ghost-blogging-platform-running-locally/ where someone had a similar error that was solved by running
gem install sass bourbon
However, that hasn't fixed the problem for me. While I can run grunt --force, there are problems with the css that I'm guessing would be solved if it could find the files it's looking for.
In mixin.css file referred to in the error message, it has this
// Bourbon - http://bourbon.io/
#import "bourbon/_bourbon";
$rounded: 2px;
$shadow: rgba(0,0,0,0.05) 0 1px 5px;
$default-transition-duration: 0.3s;
However, there's no bourbon folder of any kind in the ghost repo. I'm wondering if it's supposed to import from the installed gem, if so it's not working.
Can you suggest what I might do to fix this problem?
If it's not there (for whatever reason), I'd recommend manually installing bourbon. If the gem installs successfully to your system, you can cd to your sass directory and run bourbon install. That should give you what you need.