foundation framework - folders messed up - sass

fresh install of the framework.
When I open the app.scss with ruby:
sass --watch app.scss:app.css
I get an error - "fail to import files a b c ..."
That error is expected since all along the foundation scss files there are "important" ref's to files that aren't there!
Starting with the foundation.scss itself.
Any ideas why this happens and how to get it to work?
I'm working locally on windows btw.
The sequence of install I did:
ruby -> sass -> compass -> zurb-foundation
Thanks in advance!

I am late here but I think this will help others as well.
Download Foundation master from https://github.com/zurb/foundation
get foundation.scss file from scss folder inside foundation-master folder.
Rename it to _foundation.scss and put it inside the sass folder of your project, _foundation.scss file has everything in it so it will fix you r problem I think.

Related

Sass --watch keeps compiling the file

I've been unable to find something similar to this on a Google search, but using VSCode and Dart Sass (now v 1.23.1) and running sass --watch css the file keeps on saving/compiling
There seemed to be no issue earlier today. However, the version I was running was 1.21. (I updated Sass to use the new module spec)
What is happening?
The file main.scss is saved
Terminal displays Compiled css/main.scss to css/main.css
It then loops, printing the following
Compiled css/main.css to css/main.css
Things I have tried
Uninstalled and reinstalled sass
deleted map files and related compiled files
Aprart from that, I am at a loss of what to try next. Has anyone experienced similar to this and what did they do to resolve it?
It seems this has been reported as a bug in the Dart-Sass repository and a pull request has been opened.

Why isn't my SASS watch command working?

Attempting on a Mac with the latest version of Yosemite
I'm using the latest version of sass to refactor my site. I'm setting up watch command via the command line. my directory setup has a scss folder with the main css stylesheet cloned as .scss. and no css folder.
When I attempt the sass --watch scss:css command while in the main project directory folder, I've been told that, if there isn't one present, a css folder should be generated and a cloned .css file should be created along with a map file. Command line tells me >>> Sass is watching for changes. Press Ctrl-C to stop. however, changes are not being recorded.
I've tried updating my gems and uninstalling/ reinstalling sass, but nothing seems to be working.
Just tried this - the css folder doesn't get autogenerated. You need to generate it yourself. From there on, you should be good to go.
So if you are in the main project folder with subfolders called scss and css and you have, for example, a main.scss file in the scss directory, you can run the command exactly as you specified and everything should work as specified.

How do I start a SASS project in Sublime Text 2

I have all the correct packages installed and have SASS running. Now I just need to figure out how to start a project with it. Are there any pre-built templates that show you the file structure, etc...Any help would be great!
An easy way would be to install Compass (http://compass-style.org/) and then it's a simple as running:
compass create project-name
Which would create the structure for you.
And then to compile
compass watch
More can be seen here http://thesassway.com/beginner/getting-started-with-sass-and-compass

Compiling sass with SassyStudio and Compass and multiple areas

Iam trying SassyStudio für Visual Studio to compile the SASS in our project - but there area some issues.
The project is structured like this:
Solution
- Project 1
-- Areas
--- Area 1
---- Styles
----- style.scss
------ style.css
--- Area 2
---- Styles
----- style.scss
------ style.css
-- Styles
--- globalstyle.scss
---- glogalstyle.css
As you can see the scss files are scattered all around the project. The css Files should be compiled beside the scss files. Since there are compass references within the scss files there are dependencies to compass.
Mindscape Web Workbench is not designed to work like this.
I installed Ruby + gem sass + gem compass and
sass --watch C:/compasstest:C:/compasstest --compass
works well. But I dont like to start a batch everytime I start developing.
So I found SassyStudio an it pretty looks like what I need. But there are some issues with the compass references. In the options I entered "C:\Program Files (x86)\Ruby193\bin" to Ruby Install Path and "C:\compass" to the Include Paths property. The Compass Folder contains for example the "compass/css3" structure from github.
12:00:52.447 : Failed to compile css.
[SassCompileException]c:\compass/compass/css3/shared:1: error: file to import not found or unreadable: "compass/support"
at NSass.SassCompiler.CompileFile(String inputPath, OutputStyle outputStyle, Boolean sourceComments, IEnumerable`1 additionalIncludePaths)
at SassyStudio.Integration.LibSass.NSassDocumentCompiler.Compile(FileInfo source, FileInfo output)
at SassyStudio.Editor.GenerateCssOnSave.GenerateCss(DateTime time, String path)
12:00:52.447 : Compile complete.
What exactly is Ruby Install Path for?
Do I need the config.rb even if I dont want so specifiy specifiy sass and css folder?
How can I tell SassyStudio to find the file compass/support (It already found compass/shared as we can see)?
OK, so the sass --compass is new to me, so I don't know if I can comment on that.
Here is what you want to do.
First, change your ruby path to this C:\Program Files (x86)\Ruby193 as you don't need the bin directory in there (and not sure if it would cause issue or not).
Next, for me to detect that you are using compass (vs sass gem), I look for the config.rb file, and I believe that compass requires this to work as well, but not exactly sure on that. For me though, I definitely need it.
Now, what happens when you save a file is that I go looking for that config.rb from the current directory upward, so I believe that you can achieve what you are wanting to do through the use of multiple compass.rb files. So, that means if you put one in Area 1, one in Area 2, and one in Styles, I think it will work (but I've never tried).
I'm a bit unfamiliar with the syntax of compass.rb but I'm sure you will be able to figure out something that works there. That file may need to go into the Styles folder instead of root folders, I don't remember for sure (I think styles is perhaps configured in config.rb).
Let me know if you need anymore help.

How to configure a SCSS project?

I'm pretty new to SASS/SCSS and got a git project with CSS Files in the main directory which shall import partials from a subdirectory. I was wondering if it's possible to install sass on the server, create a compass project so that css files will be created automatically after a live edit of the scss files on the server? Or does it have to be local with a filewatcher? I already tried to set up a compass project on the server but no css files were created automatically. Was it because of wrong settings or is it just not possible this way?
If it's possible is there a good step by step tutorial? I already found this
Maybe the problem is the path. In my config.rb I changed the path without knowing what to write in the string if sass and css directory are the same as project path. Didn't work with "/" or an empty string.
Both Sass and Compass provide watch commands. You can use either:
sass --watch input.scss:output.css (options)
or, assuming you've got your Compass config file correctly setting your css_dir vairable:
compass watch
Either of those should recompile the css file upon changes. If you want this done live on the server, you'll need to execute the watch command on the server.
To add a point to #aerook's answer,
In your projects you may have multiple scss and css files. In which case you may use the following to watch the entire scss directory to make changes in the css directory
sass --watch scss:css
PS : scss and css are folder names in the same directory path.

Resources