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.
Related
I am on Manjaro using Neovim and SpaceVim vanilla installations. The editor works fantastically well.
Since I am new to vim-style editing, I do not want to mess my configuration. Yet I'm not very savvy about how to add plugins to Neovim+SpaceVim.
I want my Hugo files to have a proper syntax highlighting. Files's content are TOML (.toml), markdown (.md, but not .markdown), Go+HTML (.html with some Go templates inside) and CSS (.css).
I tried to use the vim-go plugin using yay package manager, but there was no syntax highlighting :(
If you could help me, please take into account that I'm very new to this vim-universe. Thanks!
I just can't get Codekit to compile my files.
I created a New Zurb Foundation project exactly as Bryan did in his video. No errors but for him the page loads with the styles. For me it just loads html but no styles are included except app.css.
Bower succesfully downloads all the files to bower_components. How can I make codekit to compile all files? Do I have to manually move the files from the folder to the root? I'm trying to start with SASS so I don't know how the imports work.
They don't mention any imports or any particular settings here: https://incident57.com/codekit/help.html#zurb-foundation
I had same issue, but enabling the libsass compiler for app.scss seemed to work for me.
Highlight app.scss, then in the right pane, select "Use the libsass compiler."
I was able to get this working by changing the output file for app.scss to be /css/app.css. That was the path the the index.html file was looking for.
You'll probably need to create the "css" folder in your project, as it wasn't there for me by default.
Is there a way to make autocomplete work for scss in the same way it works for css?
For example I type backg and then tab and it gives me background:; but not in scss files...
I have installed all packages to support scss... but there is only syntax highlighting that is working.
You can install Emmet (formerly Zen Coding), it is an extremely powerful tool to do css (and scss), example :
I type bi and press tab and it gives me : background-image: url(|); (with the | your cursor).
If you are interested, please take a look at this:
Emmet for sublime, and all the abbreviation (Emmet is very good with HTML too -- look what is happening when you type, for example, nav>ul>li...)
Now, how to make it works with scss:
The answer is here
You have to install the package sass-textmate-bundle for scss and do what I have wrote.
If you need sass and not scss, check this answer, especially the second response from Alexander Ekdahl
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.
Often times I use "edit css" functionality in web developer extension to edit my style sheets.
It's a great feature but it takes time to edit the css and copy it back to an editor to save it.
I am planning to use Compass for my next project and I am wondering how I can use "edit css" functionality with SASS/Compass.
There's no way to do this the way you're expecting.
The flow will have to work like the following ->
Write Compass/SCSS -> Refresh Page -> Edit CSS to get results -> Re-Edit SCSS with previous step and or copy/paste.
Because it compiles down, there's no solution I know of yet that hooks it back in to the SCSS layer.
I don't think it will be much different from what you're doing now..
Compass will precompile the stylesheet written with Sass/SCSS, it will be a regular stylesheet by the time it reaches the browser, so if you then use the "edit CSS" function of your browser toolbar it will work the same way as you do now only you will need to go back to the SASS/SCSS file and insert the changes into the right place (e.g. it could be in a nested rule or mixin or function, depending on how you've written the SASS/SCSS file) - then Compass can recompile the stylesheet
Codekit
Codekit is a great product for OSX that will allow you to edit your local files and as you hit save it will automatically inject the new compiled stylesheet into your browser without a page refresh, so it will at least save you that step. However, as of yet there is no Windows counterpart that I'm aware of.
I've used Codekit on a pretty large project recently where we were using SCSS and it was certainly helpful. Although sadly, like you, I'm used to the "Edit CSS" Web Developer Toolbar workflow, and I've yet to find an exact translation over into the SASS world.
Web Putty
One other option that has some potential (but some SERIOUS drawbacks) is a open source framework from Fog Creek called Web Putty. It was a service they offered that allowed you to live edit CSS in the browser, including SASS and SCSS flavored CSS, but they stopped the service and simply open sourced the software so getting it setup is entirely on you and requires quite some effort (THATs the drawback).
This is possible now with experimental support for Sass in the Chrome dev tools.
First enable the support for Sass:
Then make sure you're compiling to anything other than compressed and enable debug info in Sass. If you're compiling from the command line, pass the --debug-info flag, if you're using Compass, add this to your config.rb:
sass_options = { :debug_info => true }
Presto, you have access to the Sass source in the dev tools:
Clicking on the line number in the dev tools will allow you to edit and apply the local changes:
Personally, I prefer to use compass watch in conjunction with LiveReload and edit in my editor, but for those of you that like to edit in the browser, you can now edit the Sass files directly.
Don't forget to compile to compressed before deploying.