Git Product home page Git Product logo

sass-build-sublimetext2's Introduction

SASS build system for Sublime Text 2

Note: I'm working in a portable version of the SASS build with all the libraries included & ready to use. It will be available (I hope!) the next week.

Description

Provides two Build system for SASS files (with and without compression)

Prerequisites

Requires Ruby & SASS libraries.

Step by step:

  1. Install Ruby library

    Windows: Download and install Ruby. You can find it here: http://rubyinstaller.org/downloads/

    Reboot after install it.

    IMPORTANT: Don't forget to mark the option 'Add Ruby executables to your PATH'. If you don't check the option, you will have to modify the path in the Build file afterwards.

    OS X & Linux: It's already installed. Easy! :)

  2. Installing SASS

    Open your console ('Command prompt with Ruby' on Windows) and execute the following command:

    gem install sass

Installing

OPTION 1 - With the Package Control plugin (recommended)

The easiest way to install this package is through Package Control.

  1. Download and install the Package Control Plugin. Follow the instructions on the website.

  2. Open the command panel: Control+Shift+P (Linux/Windows) or Command+Shift+P (OS X) and select 'Package Control: Install Package'.

  3. When the packages list appears type 'SASS' and you'll find the SASS Build System. Select to install it.

  4. Now you can compile your SASS files! Launch your build with Control+B (Linux/Windows) or Command+B (OS X).

  5. Enjoy your coding =)

OPTION 2 - With Git

Clone the repository in your Sublime Text "Packages" directory:

git clone git://https://github.com/jaumefontal/SASS-Build-SublimeText2.git SASS-build

You can find your 'Packages' inside the following directories:

  • OS X: ~/Library/Application Support/Sublime Text 2/Packages/
  • Windows: %APPDATA%/Sublime Text 2/Packages/
  • Linux: ~/.Sublime Text 2/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 two new options in Tools > Build system of your Sublime menu: SASS and SASS - Compressed.

By default your .scss and .sass files will be built using the SASS build (not compressed).

And remember, always you can launch the selected build with Control+B (Linux/Windows) or Command+B (OS X).

Recommendations

  • Is recommended to use this build with one of the next plugins: SASS plugin or SCSS.tmbundle.

  • Also, I recommend the plugin SublimeOnSaveBuild. Just save your SASS files and transform them into CSS!

  • If you want to change the default folder of your generated CSS files into another one, you can edit the build:

    Example: Save your CSS files into a css folder: "cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css"],

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.

sass-build-sublimetext2's People

Contributors

deadark avatar jaumefontal avatar katiek2 avatar winfried-van-loon avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

sass-build-sublimetext2's Issues

SASS Error With Variable Interpolation

I know this addon was built for Sublime Text 2, but I'm using it in ST3. I'm hoping someone can spot the problem here, because this works just fine in ATOM. I call the SASS mixin below with a standard INCLUDE, (@include transition(box-shadow 600ms ease);) but the build throws an error at the very first variable interpolation.

@mixin transition($prop, $values...) { -webkit-#{$prop}: $values; -moz-#{$prop}: $values; -ms-#{$prop}: $values; -o-#{$prop}: $values; $prop: $values; }

SCSS support

The new SCSS format should be supported, as it is now SASS's primary format. Right now I have to manually tell Sublime that the file uses SASS to build, and it would be nice for it to be automatic.

Directory Rewrite

I am looking to get this package to build my scss files into another directory.

For example my dir structure is as follows:

Project
-library
--css
---style.css
--scss
---style.scss

Where I want the
project/library/scss/style.scss
to build to
Project/library/css/style.css

The LESS build package does exactly this. Maybe someone can use it as help.
https://github.com/berfarah/LESS-build-sublime

Syntax Error On Build - Unknown Reason

I keep getting Invalid CSS after "grid": expected expression (e.g. 1px, bold), was ";" (Sass::SyntaxError)

Can't determine the cause of the error, since the indicated expression is correct:

.grid-container {
    display: grid;
}

SASS file is included as attachment, full output of backtrace follows:

/Users/leo/Desktop/github/cs493-cloud-dev/styles.sass:2: Invalid CSS after "grid": expected expression (e.g. 1px, bold), was ";" (Sass::SyntaxError)
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/scss/parser.rb:1308:in `expected'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/script/lexer.rb:240:in `expected!'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/script/parser.rb:897:in `assert_done'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/script/parser.rb:69:in `parse'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/script/parser.rb:228:in `parse'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/script.rb:27:in `parse'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/engine.rb:1169:in `parse_script'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/engine.rb:745:in `parse_property'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/engine.rb:707:in `parse_property_or_rule'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/engine.rb:666:in `parse_line'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/engine.rb:539:in `build_tree'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/engine.rb:558:in `block in append_children'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/engine.rb:557:in `each'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/engine.rb:557:in `append_children'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/engine.rb:548:in `block in build_tree'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/engine.rb:541:in `each'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/engine.rb:541:in `build_tree'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/engine.rb:558:in `block in append_children'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/engine.rb:557:in `each'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/engine.rb:557:in `append_children'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/engine.rb:417:in `_to_tree'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/engine.rb:389:in `_render_with_sourcemap'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/engine.rb:307:in `render_with_sourcemap'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/plugin/compiler.rb:462:in `update_stylesheet'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/plugin/compiler.rb:209:in `each'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/plugin.rb:82:in `update_stylesheets'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/exec/sass_scss.rb:338:in `watch_or_update'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/exec/sass_scss.rb:51:in `process_result'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/exec/base.rb:50:in `parse'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/lib/sass/exec/base.rb:18:in `parse!'
	from /Library/Ruby/Gems/2.3.0/gems/sass-3.7.3/bin/sass:13:in `<top (required)>'
	from /usr/local/bin/sass:22:in `load'
	from /usr/local/bin/sass:22:in `<main>'
[Finished in 0.4s with exit code 65]
[cmd: ['sass', '--update', '/Users/leo/Desktop/github/cs493-cloud-dev/styles.sass:/Users/leo/Desktop/github/cs493-cloud-dev/styles.css', '--stop-on-error', '--style=compressed', '--trace']]
[dir: /Users/leo/Desktop/github/cs493-cloud-dev]
[path: /usr/local/bin:/usr/bin:/usr/bin/ruby:/bin:/usr/sbin:/sbin]

styles.sass.zip

Building error

On building I get this

[Errno 2] No such file or directory [cmd: [u'sass', u'--update', u'/mydir/css/style.scss:/mydir/css/style.css', u'--stop-on-error', u'--no-cache']] [dir: /mydir/css] [path: /usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin] [Finished]

and path encreases with each build

[path: /usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin]

Error with SASS build

The following was printed at the bottom of the screen:

[Errno 2] No such file or directory: 'sass'
[cmd: ['sass', '--update', '/Users/katyaugust/Desktop/Portfolio/scss/styling.scss:/Users/katyaugust/Desktop/Portfolio/scss/styling.css', '--stop-on-error', '--no-cache']]
[dir: /Users/katyaugust/Desktop/Portfolio/scss]
[path: /usr/local/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin]
[Finished]

Error handling does not work

The file_regex and line_regex should be as followed to use ST2 error finder (next_result and prev_result commands):

    "file_regex": "^(...*?):([0-9]*):?([0-9]*)",
    "line_regex": "style\\.scss:([0-9]+):",

Build not found on Sublime Text3

I followed the steps as stated in the readme and some other articles online but just couldn't get through the part of installing the builder using package installer. It was sad to find out that this some a common problem, It would be nice to get the builder on sublime text3 and soon too.

Thanks

Greedy build key binding

Hi! When I edit a .tex (LaTeX) file in Sublime 3083 on Windows 10 and press Ctrl+B (for build), Sass Build starts trying to build the file, even though it is clearly not a SASS file. Have you by any chance set key bindings in an overly greedy fashion? Perhaps without context sensitivity?

Cannot get a build - Path issues

I followed everything here: http://stackoverflow.com/questions/19610553/sass-wont-build-in-sublime-text-2-errno-2-no-such-file-or-directory

I tried symlink and also changing the path code in the SASS.sublime-build file to point to my sass install
like this:

{
    "cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-   cache"],
    "selector": "source.sass, source.scss",
    "line_regex": "Line ([0-9]+):",

    "osx":
    {
        "path": "/Users/Andrew/.rvm/gems/ruby-2.1.1/bin/sass"
    },

    "windows":
    {
        "shell": "true"
    }

}

But I keep getting this error:
[Errno 20] Not a directory
[cmd: [u'sass', u'--update', u'/Applications/MAMP/htdocs/Alloy- Engineering/sass/styles.scss:/Applications/MAMP/htdocs/Alloy-Engineering/sass/styles.css', u'--stop- on-error', u'--no-cache']]
[dir: /Applications/MAMP/htdocs/Alloy-Engineering/sass]
[path: /Users/Andrew/.rvm/gems/ruby-2.1.1/bin/sass]
[Finished]

Also, if I change my path in SASS.sublime-build back to: "path": "/usr/local/bin:$PATH"
I get this error: env: ruby_executable_hooks: Not a directory

Running MAC OS Mavericks and Sublime Text 2.

Support of partial files

Hi,

During my dev, I'm using generaly one main .scss file, which call 2 partials files :

  • styles.scss
  • _variables.scss
  • _mixins.scss

Before using Sublime Text and SASS Build, I used the "sass --watch" command to build my styles.css
When I edited and saved _variables.scss or _mixing.scss, the styles.css file was generated automaticaly

With SASS Build, when I'm editing and saving _variables.scss, it's building _variables.css (which I don't need), and whorse : it's not rebuilding the main styles.css

Is there a way to do this stuff or can it be implemented in a future version ?

Thanks :)

Cannot compile a class that is just one hypen, ex. ".- {}"

hey I encountered this issue because I am making page-specific css, with classes that mirror page structure, but replacing slashes with hypens, so my index page's special class is '.-'. this is valid css; it works fine if you just write it out in css. it just seems that this plugin cannot compile it.

Location of config files

Hi,

I installed Sass Build for sublime text 3 a while ago and remember to edit the path to ruby.
The build process works but due to encoding problems I want to edit the file adding a charset
directive:
sass --update .... -E "UTF-8"

But I can't locate the files anymore:

SASS - Compressed.sublime-build SASS.sublime-build

It's really strange - when I copy them manually into my User folder I get the menu items
Tools/Build System/[SASS Compressed/SASS] twice.

Any idea where I can find the files or settings?

I'm on Mac osx, Sublime Text 3

`report_activate_error': Could not find RubyGem sass (>= 0) (Gem::LoadError)

I have no idea why I simply cannot get this to work on my system:

ST2 2.0.1 build 2217
OS X 10.7.2
Ruby 1.9.3-p286 with rvm
Sass 3.2.1

When I don't update the 'path' in the build file, I get an error:

[Errno 2] No such file or directory

If I update the path to where my sass bin lies, I get the error:

/System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ruby/1.8/rubygems.rb:777:inreport_activate_error': Could not find RubyGem sass (>= 0) (Gem::LoadError)`

Any help would be greatly appreciated as I am exhausted of firing up the terminal to the directory every time I need to build a sass file.

Line endings

How do you set line endings to Unix for compiled css?

SystemStackError: stack level too deep

When trying to compile my scss file I get this error, unable to build the css file. Any idea why?

SystemStackError: stack level too deep
  Use --trace for backtrace.
[Finished in 1.6s with exit code 1]
[cmd: ['sass', '--update', '/Users/raysensenbach/Documents/bw/public/css/ui_ray/layout.scss:/Users/raysensenbach/Documents/bw/public/css/ui_ray/layout.css', '--stop-on-error', '--no-cache']]
[dir: /Users/raysensenbach/Documents/bw/public/css/ui_ray]
[path: /usr/bin:/bin:/usr/sbin:/sbin]

Invalid option : --update error

Hi, I installed this plugin as describe with the recommended companion using the SublimeText2 package install way, but each time I try to build a scss file I got this error message in the Subl2 console :
invalid option: --update
[Finished in 0.3s with exit code 1]

No such file or directory - &

Hello!
Thanks for this plugin. I got this working on sublime text 3. However I get the error:

Errno::ENOENT: No such file or directory - &
Use --trace for backtrace.

I just commented out these two lines, since I don't need them:

"&", 
"sass", "--update", "$file:${file_path}/../${file_base_name}.min.css", "--stop-on-error", "--no-cache", "--style", "compressed"

And it's working for me.

Ability to format uncompressed output

Currently, the uncompressed build option out puts CSS with the closing bracket on the same line as the last property.

.box {
    border: 1px solid #aaaaaa;
    background: #f00;
    font-size: 12px;
    font-weight: bold; }

I have no real issue with this other than preferring the closing bracket to be on its own line in the uncompressed output. Very minor issue really, through if there is an easy way to output like below, that would be awesome:

.box {
    border: 1px solid #aaaaaa;
    background: #f00;
    font-size: 12px;
    font-weight: bold; 
}

Expanded 'readable' Output

Is there a way to get the output to be expanded? Where it would look more like this?
div {
min-height: 120px;
}

Instead of ... Current Output

div {
min-height: 120px; }

I tried adding in "--style", "expanded" in the user file but no go

"cmd": ["sass", "--update", "$file:${file_path}/css/${file_base_name}.css", "--stop-on-error", "--no-cache", "--style", "expanded"],

Many thanks!

"shell": "true" preventing desired behaviour

For me, on Mac OSx the builds only run successfully when "shell": "true" is removed.

I'm not sure if anyone else is experiencing this, or if there's something funny going on with my shell. Additionally, none of the default builds use "shell": "true", although I've never used any of them.

Is there any change in behaviour on Windows / Linux when excluding shell on this build?

[Errno 20] Not a directory

Upon building I receive the following error:

[Errno 20] Not a directory
[cmd: [u'sass', u'--build', u'/Applications/MAMP/htdocs/Project/assets/css/app.scss']]
[dir: /Applications/MAMP/htdocs/Project/assets/css]
[path: /Users/Alex/.rvm/gems/ruby-2.0.0-p247/bin/sass]
[Finished]

I was receiving a similar error with the default build system, and I made the following modifications:

  • Updated the SASS executable path to proper location
  • Simplified command to sass --build $file

Error compiling SCSS inline comments

There is an error compiling SCSS inline comments.

Say I have this code:

html {
  font-family: sans-serif; // 1
  -ms-text-size-adjust: 100%; // 2
  -webkit-text-size-adjust: 100%; //2
}

Upon compilation an error will be generated:
error_pic

Save build css in a different folder

Bones Jaume

I tried to change the build css file as you say in the readme with those new line

"cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache"],

But still built the css in the main /scss/

Am i forgetting something?

I'm on win7, with Ruby 2.0.0 installed
The default sass files are on

C:\Users\username\Projectes\projectname\scss\

The output folder where i want to put

C:\Users\username\Projectes\projectname\css\

The console log:

overwrite C:\Users\username\Projectes\projectname\scss/main.css
[Finished in 0.5s]

Any idea?

Gràcies

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.