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
Related
how to configure WebStorm to start with Sass? The best is to not install Ruby, so I should use Gulp as I know. But what to do with it? Have anybody WebStorm and may give me step by step instructions?
I am beginner front-end dev, fresh with Sass and I need your help. Thanks!
Please see http://ryanchristiani.com/getting-started-with-gulp-and-sass/ - you may find this post helpful. But note that gulp-sass is a wrapper around libsass, there are lots of known issues installing it... So installing Ruby might be a better option. See also https://www.jetbrains.com/help/webstorm/2016.1/transpiling-sass-less-and-scss-to-css.html
Install Ruby
https://rubyinstaller.org/downloads/
2.instal sass: please type in cmd => gem install sass
Instructions: https://sass-lang.com/ruby-sass
3.set in webstorm
Setting -> Tools -> File Watcher -> Add SCSS
Program: C:\Ruby25-x64\bin\scss
if you want to be compressed css, write " --style compressed " Continue to write the command Arguments.
Example: $FileName$:$FileNameWithoutExtension$.css --style compressed
Newby question.
I'm receiving the following error in Sublime Text 3:
[ERROR] compass not found. Make sure it exists in your PATH.
I installed Compass already, it's in my Packages folder of my Sublime Text 3 folder.
Thanks in advance for any help.
Edit: I run OSX 10.11.3 and I found my answer right here on How to configure Compass build with rbenv in Sublime Text 2?
I had to add edit my Compass.sublime-build file in my Packages folder of Sublime Text 3.
You installed the Compass plugin for Sublime, which provides a build system for converting SASS files to CSS. However, as stated in the Prerequisites in the documentation, it depends on compass, which is a Ruby gem. Therefore, you need to install Ruby, then follow the instructions here.
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.
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.
I wanted to use SASS on our company's web app but I can't install any programs on production machines. Everything I searched about SASS required you to run an installation program like gem and also required HAML.
I was hoping to find just a script that processes scss files without needing to install anything else.
Well... if you have Ruby available, you could checkout the Git repository of Sass (https://github.com/nex3/sass). Do so by either typing git clone https://github.com/nex3/sass.git or just downloading it.
Then you could use the interactive Ruby console by typing irb. Try to require 'sass/lib/sass' (this one here) and run Sass.compile_file 'my_styles.css'.
Otherwise... why are you trying to do that? You can also install sass locally, run sass --watch on your sass folder and it compiles your scss files automatically into css files - which you can deploy on your production environment.
If you can run java program in your build system, you could use JRuby for compiling sass. See this answer for more details
Here's a solution for using Sass without using the command line or installing dependencies. It works with Windows, OS X, and Linux. It has a graphical interface, and no installer, just unzip and double-click.
http://scout-app.io
You can also use the java library https://github.com/scireum/server-sass which can be embedded into any java based web-app. It will compile sass on the fly and return the resulting css. This is especially useful if the Sass sources change (i.e. for customizing reasons) and an ahead of time compilation is not possible. (Note: I'm the author of the project - and it is also not yet a complete implementation of the Sass standard).
Alternatively, what you could do is:
Install Ruby
Download the Sass Gem
Navigate to download location
Run: gem install sass-3.3.4.gem
Voila! Sass is installed.
Use the online Sass compiler SassMeister. You just have to paste your sass code on the left panel and get the css code on the right.