With Rails 3.1 I have to append my scss files with .erb to use images in my css. It's causing me a problem with textmate though.
How do you tell textmate to always open .scss.erb files as SASS?
Here's an illustration of my problem:
http://screenr.com/Jjps
If you only need to .erb the sass files to include images, you can use the image-url helper provided by the sass-rails gem. This way you can keep files as .css.scss and TextMate highlighting will work.
background: #fff image-url("search.png") no-repeat scroll left center;
More info:
http://guides.rubyonrails.org/asset_pipeline.html#css-and-sass
If you have to .erb the sass files then the syntax highlighting in TextMate will only be fixed by adding support for a new language for scss.erb files in a bundle. This would be similar to the HTML (Rails) language in the popular Ruby On Rails bundle by drnic.
https://github.com/drnic/ruby-on-rails-tmbundle/tree/master/Syntaxes
Here's the official SCSS Textmate bundle:
https://github.com/kuroir/SCSS.tmbundle
Related
Duplicate Question?
Yes it is. But a little bit different from this
Overview:
I am also a new user of the brackets text editor. I know the difference between Scss & Sass. But the reason why I am using brackets text editor is for just Sass not Scss.
I saw some tutorials of Jason Sanjose for integrating Sass in brackets text editor. But I think. I am not doing it right. Below is my steps. What I am doing.
Install Sass for bracket using Extension Manager.
Install bower and bourbon
Create folder on root named: "SASS" and inside this folder create app.sass file.
Create folder on root named: "CSS"
Create a config file named: ".brackets.json" and put below code inside it:
{
"sass.enabled": false,
"path": {
"SASS/app.scss": {
"sass.enabled": true,
"sass.options": {
"outputDir": "../CSS/",
"includePaths": [],
"sourceComments": true,
"outputStyle": "nested"
}
}
}
}
and here is the snapshot also
Question:
When I write below code in app.sass file it is not converting it to css file or creating any css file in output directory.
body
background-color: black
Now my question is: Please explain me how I convert sass file in css or tell me what I am doing wrong in ".brackets.json" file or in my "app.sass" file.
After a lot searching on web. I found a useful article and my answer. Which I am sharing with you guys.
Brackets-SASS Plugin setup
Step By Step Tutorial Without migrating on other apps.
You don't need to install Sass in you text editor mate,only thing you need to install on your computer is Prepros,that software support sass/scss coffeescript typescript FTP upload and much more
I personally recommend installing Koala.app - it's fully automated and refreshes on save.
Text editors can come pre-packaged or with an addon that highlights SASS and SCSS, but all (which I know of) cannot compile it.
I use Sublime text 3 and installed plugins Sass, Syntax Highlighting for Sass, CSS Completions and CSS Extended Completions, but when I work with .scss, there aren't any auto-complete options for CSS keywords.
I followed this post, where isn't mentioned auto-complete functionality and this post, where is mentioned only emmet.
Anybody knows how to add sass auto-complete to sublime text 3?
The problem that you are likely running into is that Sublime is loading your .scss file with Sass syntax. The Sass syntax is a bit different than SCSS (they did away with the curly braces and semi-colons. If you go to this link you can see the difference between the two). To get your .scss files working you will need the SCSS plugin. Install it and set the syntax to SCSS and the auto-complete should start working for you.
I have a very basic rails application in which I've added compass and zurb foundation to. I've noticed an issue that now when I save changes to any stylesheet, which I'm using scss for, I also have an additional css file with the same name but .css instead of .scss added to the stylesheets directory. This causes a problem because my layout templates then try to use the application.css file instead of the application.scss file.
Has anyone had this happen and how can I get it to stop adding .css files to my stylesheets directory?
In my foundation_and_overrides.scss file the content is the standard zurb foundation content.
However, in the foundation_and_overrides.css file the contents are:
https://gist.github.com/iambca/5084463
Found the issue here: Auto compile SCSS files in Sublime Text 2
I still don't have a solution but this is the issue. Sublime Text 3 is coming so perhaps this will be resolved in the new release.
I am using Middleman (a sinatra app for front-end demo development). It has sass and asset pipeline. Currently I have this sass file, and many rules references background images:
a
background: image-url("main_layout/blog.png") no-repeat left top
However a lot of images are missing, and when this happens, Middleman will give me this error page:
Error compiling CSS asset
Errno:ENOENT: No such file or directory - (path)
Is it possible to configure Middleman (or sass) so that a missing image reference in sass won't cause error when viewing a page. I want this because these sass files are used in Rails and won't throw exception on the page.
Try the latest middleman-sprockets gem, this should be fixed.
According to this website. It said that sass will generate css file which is css3
so,here is my concern,what if the browser is not compatible with css3 file.
can I generate css2 file?
SASS is simply an alternative syntax for writing CSS which is then compiled into the standard CSS syntax. This means that your output CSS file will only contain CSS3 properties if you decide to use those properties in your SASS file.