A little confusion about SASS which is something comes along with HAML - ruby

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.

Related

How do you override the existing Sass with your own styles in Materialize?

When working with Sass for Materialize and wanting to add my own .scss code to a project is it a better practice to directly modify the existing .scss files within the project, or to create your own separate .scss files, compile them to a different .css and refer to it at a later point in an HTML file to override the existing styles?
I would suggest never overwrite the classes of any library's .css or .sccs file if you are using some library like materialize or bootstrap.
Always create your own custom classes and use your CSS to modify the layout. Use your own CSS selectors while writing classes.

Sass autocomplete in Sublime text 3

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.

Does SASS render the css to a new css file , to an allready existing file or does it simply generate css when the page loads?

Does SASS render to an actual css file of my choosing or a newly generated style sheet?
in the case of an app with many style sheets , the most sensible thing is replace some css at a time and render to a style sheet that loads last -that would override all other style sheets until the updating is done and I would remove css.
The typical Sass workflow is to compile to a main style.css file from a style.scss file where you specify which files it should compile. You can set it to compile to a different file. If you're using the command line you can tell it what to watch and where to output a la
sass --watch input.scss:output.css
sass --watch app/sass:public/stylesheets
http://sass-lang.com/documentation/file.SASS_REFERENCE.html
Most GUIs that handle Sass have simple settings that allow you to do the same for individual files.
It renders into an actual CSS file. All of the SASS is eventually compiled into vanilla CSS

Highlighting PHP-Code in CSS

How can I enable recognizing and highlighting of PHP-code in CSS files in PhpStorm?
The files are named *.css and not *.php. I cannot change them (restriction/dependency on the environment/framework).
I'm aware of the possibilities of Highlighting js-code inside php file, but this requires the extension to be php which isn't possible.
Just assign CSS extension to php file type and then set the "outer" language to CSS at Settings/Template Language for all those files.

How to tell textmate to open .scss.erb files as SASS?

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

Resources