SASS --watch command not fully working - css

I have a pretty basic SASS setup running, which includes the following folder structure:
css
style.css
-modules
_all.scss
_globals.scss
partials
_base.scss
_normalize.scss
_styles.scss
vendor
-empty
I am telling SASS to watch the following sass --watch modules/_all.scss:style.css --style compact.
The issue is, that one one machine a change to ANY file included in _all.scss is recorded and output properly. On another machine, completely up to date, a change to a partial file thats included in _all.scss does not record a change, and therefore no styles are output. I have to reset SASS to watch the partial _all.scss once more for the change to be recorded.
Has anyone experienced these inconsistencies before? I'm not looking to watch an entire directory as I wish to have only a single stylesheet output...
Both builds have the same version of sass, ruby and command line tools running.

It seems like the sass-cache is not being busted when you make the change. You can try disabling the cache on the broken machine to see if the problem resolves. If it does, check manually delete the cache directory and try again.
Side note, you shouldn't have to use the watch command with rails (unless you're doing something unique). Sprockets is supposed to have plugins which do this automatically when serving assets.
In fact, I suspect that this may even be a conflict between sprocket's SASS engine configuration and the sass watcher binary configuration.
See the default cache configuration for the sass binary here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#cache_location-option

Related

How to recompile less files on existing project

So I have been using SCSS and Compass on all my projects. Super happy with it. However, just now I got an existing site built by a different team that needs to be updated and uses LESS. (The project also uses .ftl files which is also new to me)
Less syntax seems pretty similar and straight forward so I don't have an issue updating .less files, however how do I get it to "compile" to css so I can see my updates on the browser?
[You] can invoke the compiler from the command-line, as such:
$ lessc styles.less
This will output the compiled CSS to stdout. To save the CSS result to a file of your choice use:
$ lessc styles.less styles.css
To output minified CSS you can use the clean-css plugin. When the plugin is installed, a minified CSS output is specified with --clean-css option:
$ lessc --clean-css styles.less styles.min.css
source: http://lesscss.org/#using-less-command-line-usage
This is assuming that you have less installed through node. Additionally, the previous developer could have been using a gulp file to compile it, so you will want to look at that as a possibility.
If you just want to quickly convert it without installing any tools: http://less2css.org/
Personally I use http://koala-app.com/ for less, sass, compass and coffeescript. I especially like the auto compile option, just working on less files and the css file will be updated in the same folder at the same time.

"compass watch" compiles one file and not another

I have a set of SASS files and I use Compass as my pre-processor. I run compass watch in the MacOSX Terminal.
My files are structured so that all of my code gets compiled twice... once with media queries in mq.css and once without in no-mq.css. The non-media query code is meant for IE8 and browsers that won't recognize media queries.
When I make a change to any of my files, my mq.css gets compiled but very seldom does the no-mq.css. If I compass clean and then manually compass compile they both will. If I run only compass compile without a clean first, only the mq.css compiles. I can run watch all day and my mq.css will continue to get compiled.
I've upgraded, downgraded, and generally played with combinations of SASS and Compass. I am not using Susy or another SASS-related library. I do have SASS maps turned on.
My SCSS starter package can be reviewed here: https://github.com/jhogue/scss-scaffold in case I am missing something in config.rb or /sass/framework/_config.scss.
My gems are as follows:
compass (1.0.3)
compass-core (1.0.3)
compass-import-once (1.0.5, 1.0.4)
css_parser (1.3.5)
fssm (0.2.10)
libxml-ruby (2.6.0)
listen (1.1.6, 0.7.3)
sass (3.4.7)
Its not as critical as it is annoying, and I'd like to know if anyone else has encountered this or a similar issue.
I've had the same problem several times in the past, and have found it often occurs when I have partials inside of subdirectories. Calling add_import_path in the config.rb file for each subdirectory has usually fixed it:
// config.rb
add_import_path "sass/framework"
Of course a compass clean before watching/compiling is in order as well.

Sass directory watch not acknowledging changes

I have been using Sass for about half a year now and have absolutely fell in love with sass --watch.
Just recently (I believe after I updated Sass to 3.4.5), I am unable to get standard functionality out of the --watch option.
My directory structure exists like this:
Desktop
-parent
--project
---css
As you can imagine, I'm trying to watch the "css" folder. My command has always been sass --watch Desktop/parent/project/css. I even tried other things such as sass --watch Desktop/parent/project/css:Desktop/parent/project/css to see if that would work, but it didn't.
Any shove in the right direction would be appreciated. I just don't understand why this suddenly isn't working.
Sass is 3.4.5 and I just updated ruby today to this ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin14].
In case anyone else encounters this problem, I have found a workaround by simply navigating to the directory I want to watch (via Terminal) and then executing a watch on the current directory like so: sass --watch ./.

Does a save to a scss file automatically update the css file?

I just started working with scss a few days ago (with Webstorm), and it seem to auto generate/update the css file after saving the scss file. Unfortunately, when I save the scss file now, no changes are made to the css file. I was working on these files from a different location, so I am guessing that the Webstorm settings might be different. I thought file watchers might have something to do with it, but I am not sure what goes in the program field. I really have no idea why this is happening.
No, saving a .SCSS file does not automatically compile the final stylesheet file. What you need to do is set up a watch. There are a number of ways to do this (and a number of programs that'll do it for you).
The most straight forward is through the command line. Assuming you have the SASS gem installed (and you're in a ruby environment), do the following in the command line:
Navigate to the folder in which your .scss file/s are kept.
Run the following command: sass --watch style.scss:style.css
Note: The above assumes that both your .scss and .css files are named style, adjust accordingly if they are not. Also, if your .css and .scss files are in different directories you'll have to adjust the paths accordingly.
Remember, sass --watch then yourScssFile.scss : yourCssFile.css
Alternatively you can use an app, like LiveReload to watch the files for you. this'll take a bit of configuration, but it may be a little easier for you if you're only just getting started in the wornderful world of SCSS/SASS
Yopu can use File Watchers in WebStorm to auto-update the CSS file on changing SCSS; but this would also require installing the external SCSS compiler (SASS gem). Please refer to http://www.jetbrains.com/webstorm/webhelp/transpiling-sass-less-and-scss-to-css.html#d104715e458 for more information

Eclipse plugin to automatically compile Sass files [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I'm currently using the Aptana plugin for Eclipse, which is giving me great syntax highlighting, and allows me to manually click to compile a *.scss file into a *.css file. What I would really like to be able to do is get it to automatically compile every time I save, but I cannot figure out how to do this.
I know you can use sass --watch on the command line, but I don't want to have to set this up manually every time I open eclipse, or create a new project.
Has anyone found a good way of achieving this? Is there must be a way of hooking into Aptana's Sass bundle and running it's compile command everytime I save? The accepted answer to this question suggests using a "Program Builder" - but is this really the best solution? If so does anyone have any tips/links to tutorials?
Update: I wrote up a blog post about how to use an ant script as a builder, but I'm still looking for a better way.
After lot of tries, I've found that the best solution in Eclipse is to define a simple Builder using the --update sass feature:
From the Project menu select "Properties" and choose the "Builders" section.
Create a new Builder and select "Program" as configuration type.
Choose a name for your launch configuration (SASS?!).
Insert the path of your sass installation into the Location field.
Use ${project_loc} as working directory.
In the Arguments text box insert the configuration parameters you want sass to use and, at the end, specify the --update parameter followed by your sass files directory source followed by ":" and the destination folder for the compiled css files. In my configuration "resources" is the source folder containing the .scss files and "web" is the destination directory containing the compiled .css files. The --update command will check for modifications in the source folder and all sub-folders. Screenshot
In the "Build Options" tab just check all options under the "Run the builder:" section. You can also "Specify working set of relevant resources" to launch the builder only when files contained in selected folders are saved. Screenshot
Click ok to save your launching configuration.
Now try to modify a .scss file in your source directory and then save it, you'll see the sass CLI output in your console window.
The sass CLI will automatically check for modified resources inside the source folder (resources in my configuration) and compile them into the destination folder (web in my configuration). Also, all .sass files that #import the modified resources will be compiled.
there is a watch switch for the sass comiler.
which rebuild the output (css) file everytime the source (scss,sass) change.
Quoting from : http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass
Using Sass
Sass can be used in three ways: as a command-line tool, as a
standalone Ruby module, and as a plugin for any Rack-enabled
framework, including Ruby on Rails and Merb. The first step for all of
these is to install the Sass gem:
gem install sass If you’re using Windows, you may need to install Ruby
first.
To run Sass from the command line, just use
sass input.scss output.css You can also tell Sass to watch the file
and update the CSS every time the Sass file changes:
sass --watch input.scss:output.css If you have a directory with many Sass files,
you can also tell Sass to watch the entire directory:
sass --watch app/sass:public/stylesheets Use sass --help for full
documentation.
Using Sass in Ruby code is very simple. After installing the Sass gem,
you can use it by running require "sass" and using Sass::Engine like
so:
engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax
=> :scss) engine.render #=> "#main { background-color: #0000ff; }\n"
There is much easier solution. Just follow the instructions to install SASS from:
http://sass-lang.com/install
and you will notice that first you will have to install Ruby. After that, just go to the folder where your SCSS/CSS files are located, start CMD and run this DOS command:
>cd <path-to-your-css-files>
>sass --watch .
Then all you need to do is to link your SCSS files to be recognized by Eclipse as native CSS files. Follow this solution:
https://stackoverflow.com/a/12322531/4180447
Hope this helps.
Note: I might have missed one or two steps. This is as per what I remembered after I completed the installation. If you face any problem, just post a comment, and I will try to help you.
Tarek

Resources