I have started trying out Sass for my css work. In the directory where my Css file resides I see a '.sass-cache' folder too. Can any one tell me why is this folder created and is it safe if I delete it.
thanks,
By default, Sass caches compiled templates and partials. This dramatically speeds up re-compilation of large collections of Sass files, and works best if the Sass templates are split up into separate files that are all #imported into one large file.
Without a framework, Sass puts the cached templates in the .sass-cache directory. In Rails and Merb, they go in tmp/sass-cache. The directory can be customized with the :cache_location option.
If you don’t want Sass to use caching at all, set the :cache option to false.
You can configure the Sass cache location by setting a Sass option in your compass configuration file like so:
sass_options = {:cache_location => "path\to\tmp\sass-cache"}
Source: Sass reference
If your main problem is "inhibiting pushes to development environments when multiple developers use/change it", you can add it to your .gitignore file. As stated in the other answer, Sass cache files speed up compilation based on whether a Sass file has changed since last compile.
In my experience it's standard practice to consider them temporary files, and omit them from version control.
Related
Shahzaib here, coming to you for a bit of help !
I'm still new in the Shopify and liquid stuff but i'm getting there.
I'm cutrently trying to minify a scss.liquid file on Shopify, usually when I try to do that with a css file, I use an online minifier, exept that, apprently the scss.liquid format is not properly handled. Every time I try to minify it, my site crash ?
Do you guys have something to recommand regarding minifying a scss.liquid file ?
thanks in advance,
regards, Shahzaib.
I recommend setting up a gulp task to do this. This will help simplify your SCSS files into individual files for whatever they style. Also, you won't be edited your theme's default theme.scss.liquid file, so it is easier to overwrite default styles, and you know exactly which styling is yours vs the theme's.
To setup a gulp task, you will need to install node.js and gulp. I recommend using npm for this. Here is a good introduction tutorial to this which you'll need to adapt a bit to work with your Shopify file structure. For example, I recommend adding a src directory for your custom .scss files, and compiling them into one single file in the assets directory, instead of working directly in the theme.scss.liquid file.
https://css-tricks.com/gulp-for-beginners/
Once you have completed those instructions, make sure to add node_modules to your .gitignore file before committing.
Next, setup your project to use themekit. https://shopify.github.io/themekit/ , and have your gulp task run on save of the file. This will compiling your src files into a single file in the assets directory which will then be uploaded to your store by themekit.
Hope this helps!
I'd second than10's answer, and add that if minification of static assets is going to be part of your theme development workflow, use gulp.js running locally with something like gulp-shopify-upload watching your changes and pushing them up to your store:
https://www.npmjs.com/package/gulp-shopify-upload
See basic usage in particular.
I've created a Gem which copies sass stylesheets to a specified install location. However, I'm now working on another Gem which will contain sass stylesheets which don't need to be copied to a project.
What I'm wanting to be able to do, if possible, is to add the path to the sass stylesheets within my gem and import them from there as opposed to including them in every single project which in the long term would be useless and potentially a headache to maintain.
For example, I create a gem called sassext which contains all the stylesheets. Then within my projects I can do the following;
#import 'sassext/foobar'
Ideally, I want to be able to use the sass --watch tools as opposed to create my own.
Cheers
P.S. Any links to relevant information/guides would also be appreciated.
Somehow, my blocks, foundation, and common folders got deleted. I still have my Sass cache files - is there any way I can get the original SCSS files out of them?
Currently, I am able to go through the scss-cache and grab a few styles - hope is not lost. But there's a bunch of compiled crud throughout the SCSSC file.
In the meantime, I'll be setting up a version control system for the office.
Sass caches parsed documents so that they can be reused without parsing them again unless they have changed.There is no way they can be used to get the original SCSS files
I am using Grunt and SASS. I am currently using the grunt-contrib-compass plugin.
My goal seemed simple, but it is very hard to achieve.
During development I want my CSS to be compiled in separate files (because dev tools, speed of watch etc.)
For production I want all of my CSS to be merged into one.
However using the concat task does not do the job.
When I have #import statements and SASS is compiling every file separately this outputs the same CSS from vendor libs like Bootstrap or Compass plugins over and over again in the different files. In development this is fine. When I concat the CSS files for production though it produces a quite bigger file with repetitive CSS.
How should I configure Grunt and use #import statements so this does not happen?
Not an exact answer but an alternate solution.
For the use of dev tools I would recommend investigating .map files. This will allow you to have a compiled and minified css file but when you open the developer tools you can see the location of styles as they are in the original sass files.
Details on the grunt plugins GitHub page.
A guide on Sass and source maps.
I hope this helps.
I'm playing with Padrino, experimenting with a very minimal site at the moment with no DB and just a few HAML and SASS files under the app/ directory.
What I've noticed is that each time I render a page which links to a stylesheet that's defined in a .sass file, it compiles the stylesheet to .css and stores it under public/.
This is all very well, but I also have some static assets stored in public/, including images and some other hand-written .css files.
What this means is that my public/ directory becomes a mix of things I placed there and things compiled by Padrino. So, looking in there will show a bunch of .css files, some of which are compiled .sass files, and some of which are my actual primary static assets. This is confusing.
Is there a way I can stop Padrino (or Sinatra, or Rack, or whatever is doing it) from saving these compiled files during development, and keep my public/ clean?
Alternatively, can someone explain why what I'm asking for is a bad idea / by design / I should learn to love it instead? :-)
Thanks.
I don't know how to set the SASS settings for Padrino, I had a look and couldn't find anything helpful either. I would feel a bit nervous about running it this way too, it could easily get confusing and unhelpful, and what if the asset names clash?
What you could do is not add SASS in via Padrino, and then run it yourself either via the --watch switch or via something like Guard. That way you can also specify different subfolders within the public directory (images/css/js etc), which is what I do (although it does mean you need to remember to add the subfolder as part of the path when describing links). The app doesn't even need to know you're using SASS, and precompilation, when it's this simple, is surely better than the kind of compilation on demand that you've got at the moment (IMO).
You might try the Padrino mailing list for help with the settings.
Using the padrino-sprockets gems I also wanted to change the default /public/stylesheets directory to /assets/stylesheets where sprockets pick them up. I found that my padrino project genereated with the -c sass option had a /lib/sass_plugin.rb file with the following:
# Enables support for SASS template reloading for rack.
# Store SASS files by default within 'app/stylesheets/sass'
# See http://nex-3.com/posts/88-sass-supports-rack for more details.
module SassInitializer
def self.registered(app)
require 'sass/plugin/rack'
Sass::Plugin.options[:template_location] = File.join(Padrino.root, "app/stylesheets")
Sass::Plugin.options[:css_location] = File.join(Padrino.root, "public/stylesheets")
app.use Sass::Plugin::Rack
end
end
Editing the :css_location path and restarting Padrino did the trick!