I'm trying to use SASS for the first time with textmate. I seem to have installed it correctly by following the instructions on the git page - https://github.com/MarioRicalde/SCSS.tmbundle
but I can't find any information on how I can now use it.
When I make a .sass file the new Sass syntax is highlighted but when I save it is not compiled. Am I missing something?
Make sure to open up Terminal and in the command line, navigate to your project folder and run this command:
sass --watch style.scss:style.css
Name your working file style.scss, and it will compile and generate and update the style.css file that you reference in your document head.
Also make sure you have installed the Sass gem within your project directory :)
gem install sass
UPDATE
The bundle is only for installing syntax highlighting in Textmate. Sass is a precompiler for CSS, so it generates CSS from what you write in Sass. This is done through the sass --watch command above in the command line.
Read more on how to use and install Sass.
Related
I installed Bootstrap CSS with SASS from the following repo:
https://github.com/twbs/bootstrap-sass
I ran the command "bower install bootstrap-sass" on the command line and this successfully installed the folder bower_components on my project folder. (Incidentally - I have nothing else present yet, I want to learn to bootstrap the CSS compiling first).
OK, here's what I want to accomplish:
I want to be able to add .scss files to the folder I create called resources/assets/sass/
I want to provision/manage so that .scss files I add to this directory are in turn compiled to public/build/css/that_file_name.css
More practically, I would like to compile all of the .scss files into one large .css file.
My question(s) are:
What does the compiling?
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
What does the compiling?
Compiling Sass files transforms stylesheets with Sass-specific syntax like selector nesting and mixins into normal CSS that can be parsed by browsers.
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Since you're already using Bower which is a Node.js package, I assume that you have no problem using the Node.js package node-sass instead of the original Ruby version.
First, install the package using npm i -D node-sass. Then, create a new script inside your project's package.json:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"
main.scss is now your entry point where you import Bootstrap and your other stylesheets.
// I don't know whether this path is correct
// Just find out the location of "_bootstrap.scss" and then create the relative path
#import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
/* Your custom SCSS */
Finally, to actually run the compilation, execute npm run compile-sass in your terminal.
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Since you never tell node-sass to "compile everything inside this folder" and instead use an entry point file (main.js), when you want to include a new file you simply add an #import directive with a relative path to it.
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
To minify the resulting main.css file, I recommend csso. You can install its CLI package using npm i -D csso-cli and then add another script to your package.json:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"
You can then run that script using npm run minify-css. The minified file will be outputted as main.min.css.
For all the question asked, the answer can be found above. But if you are just looking to compile .scss file to .css using command line, use below,
sass source/stylesheets/index.scss build/stylesheets/index.css
Make sure you have "node JS/npm" and Sass compiler installed.
If not, use this to install Node.js and npm - https://www.npmjs.com/get-npm
And use this to install Sass - https://sass-lang.com/install
Enjoy ;)
I've installed Sass and set up a folder with an index.html file and style.scss in my local server (In Ubuntu 13.04).
I type this command into the terminal:
sass --watch style.scss:style.css
And get this output:
Sass is watching for changes. Press Ctrl-C to stop.
LoadError: cannot load such file -- rb-inotify
Use --trace for backtrace.
Sass will update the css the first time I save my .scss file but after that nothing. Anyone know why?
You need to install rb-inotify gem:
gem install rb-inotify
Its more of code editor issue. I faced this issue with brackets and once I switched to Atom (just to test) sass started writing on css file real time.
Tried with both sass --watch sass:css (Directory based watch) and sass --watch sass/app.sass:css/app.css (file based), and both worked fine.
Is there a way to force sass to overwrite css files already generated. I already know compass does this but I really don't want to install compass for this simple setup.
What I'm trying to do is minify all my files in one go.
I was using this before. But with the watch command I would have to go into all 40 sass files and make a change in each one for it to update and compress. I'm hoping there is a command to update all or overwrite all. Can't find it in the sass docs.
sass --watch sass:../web-app/css --style compressed
You simply want to use 'update' with 'force'
sass --update --force path/to/sass:path/to/css
I just started using SASS in my project and I want a script to compile them and convert them to CSS files. Im planning to run this script only when I build.
I installed SASS in my system and SASS --watch doesn't seem to be the right approach here; as I told, I want a script that runs only when I build. I used to have one such script for LESS compiling, but couldn't find any for SASS.
Does anyone know of any such scripts?
Looking at the documentation, just run sass from the command line as part of your build script. An example for a one time use on a single file:
sass input.scss output.css
link:
From the command line, you can just do sass --update for a one-time compile from Sass to CSS. This will use whatever settings already exist in config.rb.
I have scss and css files in ASP.NET project.
If I change scss, should be css be regenerated? If yes, then how? VS can do this or should I have some other tool?
There are extensions that allow you to regenerate from inside Visual Studio, but I personally prefer the command line way.
sass --watch [folder holding .scss files]:[folder holding .css files]
If you use Compass, you can use this command instead:
compass watch
Both of these commands will tell Sass to watch the folder with the .scss files, and any time they're changed and saved, regenerate the CSS files.
If you created the project, then you likely already have Sass (and, by extension, Ruby) installed. If you don't, you'll need to install Ruby and Sass. Windows has a nice little installer that installs both Ruby and RubyGems. Once it's installed, you'll need to run the following to install Sass:
gem install sass
Once Sass is installed, you can either run the sass --watch command, or use a VS extension of your choice to watch and recompile the CSS files.