Description
This is a plugin for Sublime Text 2/3 providing four build systems for Sass/SCSS files:
Jan 06, 2015 'cmd': ['PATH_TO_YOUR_CHROME', '$file'] for Windows 'cmd': ['open', '_a', 'Google chrome', '$file'] for Mac The code I have entered for 'New Build System' is the above. Say you're coding HTML in Sublime Text & you want to check how it looks in a browser. Some text editors (BBEdit, for instance) have a feature that lets you open your page in a browser, but Sublime Text does not. Sublime Text 2. Sublime text2如何设置快捷键让编写的HTML文件在浏览器预览?. Save it in Package->User. Save that as Chrome.sublime-build, relaunch Sublime Text and you should see a new Chrome option in the build list. Select it, and then you should be able to launch Chrome with Cmd + B on a Mac (or whatever hotkey you have configured for build, maybe its F7 or Ctrl + B on a Windows machine). Using the proper target for this file compilation, it starts Ninja from a background thread and send the results to the output.exec panel (the same one used by the build system of Sublime Text 2). So you can use key bindings like these two, to build the current file in either Debug or Release mode.
Nested
(default)Compressed
Compact
Expanded
Prerequisites
Requires Ruby & Sass libraries.
####Step-by-step library installation guide:
- Install Ruby libraryWindows: Download and install Ruby. You can find it here: http://rubyinstaller.org/downloads/Reboot after installing it.IMPORTANT: Don't forget to mark the option 'Add Ruby executables to your PATH'.If you don't check this option, you will have to modify the path in the Build file afterwards.OS X & Linux: It's already installed. Easy! :)
- Installing SassOpen your console (
Command prompt with Ruby
on Windows orTerminal
on Mac) and execute the following command:gem install sass
Depending on your user permissions, the above command may not work. If that is the case, try executing this command:sudo gem install sass
Installing
OPTION 1 - With the Package Control plugin (recommended)
The easiest way to install this package is through Package Control.
- Download and install the Package Control Plugin.Follow the instructions on the website.
- Open the command panel:
Control+Shift+P
(Linux/Windows) orCommand+Shift+P
(OS X) and select 'Package Control: Install Package'. - When the packages list appears type 'Sass' and you'll find the Sass Build System. Select to install it.
- Now you can compile your Sass files! Launch your build with
Control+B
(Linux/Windows) orCommand+B
(OS X). - Enjoy your coding =)
OPTION 2 - With Git
Clone the repository in your Sublime Text 'Packages' directory:
Depending on your version of Sublime Text, you can find your 'Packages' inside the following directories:
- OS X:
~/Library/Application Support/Sublime Text 2/Packages/
~/Library/Application Support/Sublime Text 3/Packages/
- Windows:
%APPDATA%/Sublime Text 2/Packages/
%APPDATA%/Sublime Text 3/Packages/
- Linux:
~/.Sublime Text 2/Packages/
~/.Sublime Text 3/Packages/
OPTION 3 - Without Git
Download the latest source zip from Github and extract it into a new folder named
Sass-Build
in your Sublime Text 'Packages' folder.Using the build
After installing the package you will find four new options in
Tools > Build system
option in your Sublime menu: Sass — Nested
, Sass - Compressed
, Sass — Expanded
, and Sass - Compact
.By default, your
.scss
and .sass
files will be built using the Sass — Nested setting. Additionally, the files will be saved into the same directory as the Sass file. For information on how to change this setting, please see the Recommendations section below.Mac Build System For Sublime Text 2 For Chromebook
And remember, always you can launch the selected build with
Control+B
(Linux/Windows) or Command+B
(OS X).Recommendations
- This plugin will work best when combined with either the Sass plugin or SCSS.tmbundle.
- Also, I recommend the plugin SublimeOnSaveBuild. When you save your Sass files, they will transformed into CSS!
####Changing the default folder for generated CSS
If you want to change the default folder of where your CSS is generated, you can edit the
.sublime-build
files, found in the Sass-build
folder of the 'Packages' directory. In Sublime Text 3, you can easily access this directory through the Preferences > Browse Packages
option in the Sublime menu:Example: Save your CSS files into a
css
folder:'cmd': ['sass', '--update', '$file:${file_path}/../css/${file_base_name}.css'],
If you are using partials and running into issues, David Kiv suggests putting this code in the
.sublime-build
files:Windows*
'cmd': ['sass', '--update', '${project_path}scssstyles.scss:${project_path}cssstyles.css', '--stop-on-error', '--no-cache'],
Mac*
'cmd': ['sass', '--update', '${project_path}/scss/styles.scss:${project_path}/css/styles.css', '--stop-on-error', '--no-cache'],
Author
Created by Jaume Fontal (@jaumefontal).
If you need more info you can find me on Twitter!
Acknowledgments
Thanks to the collaboration of @hdennison with the testing in MacOS.
Active4 years, 7 months ago
I followed the instruction for windows 7 to setup chrome. No luck!
after entering the file location/path under what format should I have to save. I am a noobie. sorry to ask this question. Anything helps!
If I press f7 getting the following messageError trying to parse build system: Invalid escape in C:UsersgmuAppDataRoamingSublime Text2PackagesUserChrome.sublime-build:2:9
Thanks
Amicable2,23633 gold badges3939 silver badges7171 bronze badges
samdroidsamdroid
4 Answers
- preferences > key bindings-user should look like this in windows:
- look in your packages folder for a folder called 'openbrow' then open the openbrow.py file in sublime
find the icon for the browser you want to use and goto it's properties to copy the path to it's location on your computer
then in the openbrow file your gonna paste that path where it should go. for instance
([r'C:path to your browser', '-new-tab', self.view.file_name()])
here's what my openbrow.py file looks like:
hope this helps! KCCO
Jason Sturges14.6k1212 gold badges5252 silver badges7070 bronze badges
joeljoel
Install the Sublime View In Browserextension that, quote:
View In Browser is a Sublime Text 2 plugin that will open whatever is in your current view/tab.
Installation in using instructions in tne
README.md
file.ScottieScottie
I was having the same problem and found this post ! My problem was fixed by just typing this:
Notice that double
solved my problem .. And then I saved it as Chrome.sublime-build on:
whoan6,53944 gold badges2828 silver badges4343 bronze badges
User1911User1911
In my Windows this code is working.Go to Tools > Build System > New Build SystemThen put the code with your browser file path.
Please use double ' for '.Hope it will work.
Sayed Mahmud BhuyanSayed Mahmud Bhuyan