marioricalde / scss.tmbundle

The TextMate SCSS Official Bundle. Now Compatible with SublimeText2.

A SCSS syntax bundle for TextMate

Also Available

How to Install

TextMate 2 (Recommended)

Open Preferences, in the Bundles tab, check SCSS to automatically install the bundle.

Git with TextMate 1

1. Make a new bundles folder mkdir -p ~/Library/Application\ Support/TextMate/Bundles
2. Open the new folder cd ~/Library/Application\ Support/TextMate/Bundles
3. Clone to your new folder git clone git://github.com/MarioRicalde/SCSS.tmbundle.git "SCSS.tmbundle"
4. Reload TextMate Bundles osascript -e 'tell app "TextMate" to reload bundles'

Textastic for iPad

Instructions

How to Upgrade

1. Open the bundle's folder cd ~/Library/Application\ Support/Avian/Bundles
2. Pull new version git pull origin master

Credits

Enrique Canals (Site) Current Maintainer

Added support for Atom.

Mario Ricalde (Site) Creator & Advisor

Added support for Sublime Text 2, and TextMate 2.

Chris Eppstein

Creator of the original TextMate Bundle.

Stephen Way

Added support for Chocolat.

…and many more.

License

SCSS.tmbundle Copyright (c) 2012 Mario Ricalde

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. No attribution is required by products that make use of this software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Except as contained in this notice, the name(s) of the above copyright holders shall not be used in advertising or otherwise to promote the sale, use or other dealings in this Software without prior written authorization.

Contributors to this project agree to grant all rights to the copyright holder of the primary product. Attribution is maintained in the source control history of the product.

scss.tmbundle's Issues

Line comment behavior incorrect

In Textmate, hitting ⌘/(command + forward slash) enters a line comment (either for the currently active line, or a partial-line comment for selected text if available). The comment-character(s) typically are inserted at the beginning of the line but after tabs/spaces, so where you would expect the insertion point to be if you hit "enter".

This bundle places the // comment character at the absolute beginning of the line. When uncommenting existing line comments with the character(s) in the conventional place, the indention is not properly readjusted (in my case, it's adding a space).

Sublime Text 2 Branch

We need to push a SublimeText2 branch that provides only the compatible tools, and port the utilities if possible.

Anyone using Sublime Text 2?

HTML to SCSS conversion fails

Pasting HTML into an SCSS document in Textmate with Shift+ Cmd + V only pastes the HTML copy. No conversion occurs. I'm using the latest SCSS+Zen and Sparkup bundles.

Nested imports marked as invalid.

#something {
    @import "example";
}

Unexpected "invalid.illegal"

Screenshot taken in E Text Editor: http://i.imgur.com/jRJ9p.png

Installation instructions specifies an inexistant branch

In README.markdown, the Installation Instructions specify:

git clone -b TextMate git://github.com/kuroir/SCSS.tmbundle.git "SCSS.tmbundle"

However, there seem to be no such TextMate branch in the repository at the moment.

Some properties marked as invalid

src (used for custom fonts), filter (IE), -moz-border-radius, -webkit-border-radius, -moz-border-radius-topleft, -moz-border-radius-topright, -webkit-border-top-left-radius, -webkit-border-top-right-radius, -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -webkit-border-bottom-left-radius, -webkit-border-bottom-right-radius, -moz-box-shadow, , -webkit-box-shadow, zoom,

Why bundle Zen CSS?

Does it annoy anyone else that Zen CSS is bundled with this?

If someone wants to use Zen CSS, should't they just have both bundles separately? True, they might have to add scss to the scope, but that seems better than requiring anyone using the SCSS bundle to use.

I prefer the snippets in https://github.com/minimaldesign/mCSS.tmbundle, but when i have this bundle installed lots of the tab completions get mixed and it's frustrating.

true & false are both keywords of SASS

They both should be highlighted as keywords according to chris.

Headings (h1, h2...) marked as invalid

Nested imports do not highlight correctly

and im a sad panda

Autocompletion for Image Path

Use Case:

You're inside:

background:#FAF9FA image-url('gradients/[]');

Where [] is the cursor. When you press escape is going to look into the given path (looking into the config file or rails project) and give you a list of available files to include.

This feature should be intelligent enough.

ST2 compatibility troubles

Am I the only one who gets these errors when installing in Sublime Text 2?

It is followed by 2 or more similar alerts.

Sass Based Functions

Sass has two new @-rules: @function and @return.

You can see them in action here:
Compass/compass@d67a43a

It would be great if they were highlighted correctly.

Block comments in grammar.source

I had to make some tweaks to the block comments in the ST2 branch to make the block comment toggling work. I've not changed grammar.source because I don't know what repercussions this would have on TextMate. It should probably be tried and tested. Here's my commit:

MarioRicalde/SCSS@d802f71

As you can see, I've removed the capturing of whitespace before and after the comment tokens. I don't know why the whitespace is being captured - maybe as a hangover from the Sass whitespace sensitive syntax?

Lack of distinction between selectors

I've switched from Sass to Scss and I use the Sunburst theme in TextMate. I've found a lack of distinction between IDs and Classes in that theme when using the Scss bundle. I switched to the CSS highlighter and found that did a better job of highlighting CSS selectors, but of course didn't highlight Sass additions like @include or $var.

Here is a screenshot to give you an idea of what I'm seeing: http://cl.ly/3Jj6

I really wish the Scss highlighter looked more like CSS but with added rules to cover the Sass additions. I don't know the first thing about how to write a syntax highlighter and I really appreciate your work on this.

go to symbol not supported?

Thanks for the awesome bundle. I'm just wondering, is it possible you can include support for the 'Go to symbol' command? (CMD+SHIFT+T). It works in regular CSS files but not in SCSS files.

It does work when I change the file type from SCSS to CSS Zen, which I believe is supplied by this SCSS bundle?

More information on this can be found on section 3.3.1 of this page. Hope it helps.

media queries marked invalid

See screenshot:

http://img.skitch.com/20100822-8h8hx1bieur8c19ewbrrtgqwan.png

SASS Functions are not colored correctly.

SASS Functions are not colored correctly.

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

Illegal filename characters on Windows.

If this bundle is installed on Windows for use with the e Text Editor, many of the files in the snippets directory contain characters that are not allowed in a windows filename.

http://www.e-texteditor.com/wiki/index.php/Bundles#Getting_the_bundles

"Be aware that some bundles contain filenames with characters that are invalid on windows. This can cause problems when doing checkout with svn. The solution for this is to rename the bundle items with invalid names. We will try to work with the bundle maintainers, to gradually transition the bundles to use more cross-platform friendly filenames."

Rewrite Snippet to be usable on .sass and .scss files

The snippets should be smart enough to know when they should insert .scss specific syntax and vice versa, ideas on this?

Integrate “Insert Color” command

It would be nice if it’s possible to run the color picker with Cmd + Shift + C just like in CSS or Sass files. Maybe this is just a copy/paste of Insert Color....tmCommand but it did not work for me. Adding “source.scss” to the scope in the CSS.tmbundle works, but I think it work out of the box for the SCSS.tmbundle, too.

(btw good job—thanks for this bundle)

Functions in Pop-Up Not Properly Nested

Should add tabs to nested definitions to align with TextMate's standards.

The Toggle Comment command is broken.

Edit → Comment → Toggle Comment is broken. Works fine on the previous build.

suppoer for @function and @each ?

Any chance of adding support for @function and @each ?

At the moment they are marked invalid.

Thanks

Align SCSS Assignments, minor problem

I just noticed a problem with Align SCSS Assignments (⌘:) when using pseudo-classes.

Example

a:focus,
a:hover { 
  color: #E54A83; 
}

Is currently converted to:

a       : focus,
a       : hover { 
  color : #E54A83; 
}

Support for scss.erb

Would be great to also support scss.erb

Add support for Sass functions

Although they currently work OK, Sass functions don't work in every situation. For example, the darken function seen here: http://imgur.com/arUbr.png

List of functions can be found here: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

src is a legal property name

http://img.skitch.com/20100828-cuj7tufy85xae5u33e9bagcia6.png

not urgent or anything.

Make .sass style compatible

This bundle has the potential to support .scss and .sass syntax in one go, need to think on how to implement it.

Options:

1. Implement it on the same syntax file. This would mean we would need to drop the error-highlighting feature + the highlight breaking when there's a missing ; character.
2. Implementing it on another syntax file. This would mean we would have two different syntax files, which would need to be updated constantly to mach each other.

Please discuss on this matter, any feedback is appreciated.

Breaks ⌘⏎ (command + enter) Newline

Typically in Textmate when you hit ⌘⏎ a line is inserted following the current line and the caret/insertion-point is moved to the beginning of the line (with the indent-level considered). The newline is not inserted at the insertion point, so the remainder of the line is not carried down.

When working on SCSS with this bundle, this does not work and instead enters a new line at the insertion point as if only return/enter had been hit.

Error loading bundle in Sublime Text 2

Just upgraded to the official fork, but received this error on launch:

http://d.pr/RSdi

Vendor prefixes marked as invalid when they contain interpolated variables.

.rounded- {
  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}

textarea and h[1-6] selectors highlight as invalid with SCSS bundle?

not sure why, but textarea and h[1-6] selectors are highlighting as invalid.

they seem to be properly added to selector_entities array in the bundle

http://www.rawcanvas.com/_/_skitch/style.scss_syntax_errors-20110328-002727.jpg

oddly these tags highlight fine with the CSS Zen language, just not when SCSS is selected.

can anyone else confirm this?

Sublime Text 2 semicolon invalid

As textmate has been abandonware for me for some time now, I switched to the great "Sublime Text 2", it allows for tmLanguage files for syntax highlighting.

I tried the SCSS syntax in your bundle and it works great, except for the semicolon ; icon which shows up as invalid (red background). I am working in a .scss file so not sure what is causing this, maybe a regex that isn't correctly read in Sublime Text 2?

Anyway, I couldn't find the issue inside the tmLanguage file so maybe you have any idea what is causing this and if you can fix this or point me in the right direction I would be very grateful. Thank you :)

Conflicts with Zen Coding bundle?

maybe it's just me, but the SCSS bundle is not detected by TextMate if Zen Coding already installed. I'm using TextMate 1.5.9 and it doesn't show up in the bundles list (and no, it's not disabled).

Syntax Highlighting Messy With Complex Mixins?

Symbol list extraction for "go to symbol" menu should show SCSS hierarchy

Hey. I've been trying to find where in the bundle to add support for these. (I can only find where to change the formatting of the results for the symbol list, not how they're extracted)

(1) If I have a declaration like the following. If I were to type col I think it would be good to show .column h1 in the popup instead of simply .column.

.column h1{
    ....
}
.column a{
    ....
}

I'm aware this this is not nested SCSS but I actually prefer writing some types of code with this style as it gives me a better overview with code folding on in some cases.

(2) An extension of this, what would be really awesome would be if I had the following. If I were to type h1 if we could show .column h1 in the popup instead of simply h1.

.column {
  h1 {
  ....
  }
  a {
  ....
  }
}

This mixin doesn't highlight properly (easy fix?)

@import "partials/standard_list";

@mixin common_index($resource) {
    ##{$resource}s_index {
        ##{$resource}_new_area {
        }
        span#title {
            font-size: 20px;
        }
        ul##{$resource}_list {
            @include standard_list(#{$resource});
        }

    }
}

The "s_index" and "new_area" are oddly red, which is bothersome... maybe it has something to do with the #{$resource}?

Symbols (Parenthesis and Signs) break when inside variable declaration

Image.

Error message "didn't find rule #constant_mathematical_symbols", occasional crashes

I've had occasional crashes in TextMate since I started using the SCSS bundle. I've been using TextMate for years and almost never had crashes. Could this be related to the bundle?

In the system log, I get the following as soon as I open an SCSS file or change the mode of any file to "SCSS" so that the bundle is getting activated:

TextMate[1333]: didn't find rule #constant_mathematical_symbols
--- last message repeated 229 times ---

I'm not sure if its related to the bundle, but maybe you can give me a hint.

Functions Highlights working incorrectly.

http://dl.getdropbox.com/u/4651065/Screen%20shot%202010-2-30%20at%207h2m41s.jpg

$sticky-bg-light: desaturate(#fdfef2, 10%);
$sticky-bg-darken: darken(desaturate(#fcfae8, 10%),1%);
@include linear-gradient(color-stops($sticky-bg-light, $sticky-bg-darken));
td { border-top:1px solid #fff; border-bottom:1px solid desaturate(darken($sticky-bg-darken, 4%), 4%);}

textmate2 bundle path

If you are using pre-release textmate2, the bundle should be installed in:

mkdir -p ~/Library/Application\ Support/Avian/Bundles
cd ~/Library/Application\ Support/Avian/Bundles
git clone git://github.com/kuroir/SCSS.tmbundle.git "SCSS.tmbundl

semicolon injected when adding keyword args colon

it should only be injected when variables are being declared, not passed.

Feature: Asset Path Autocompletion

image-url('path/to{alt+esc}');
opens a dropdown with all available files.

Brackets don't automatically close when creating a new rule.

For example:

.something {....

Doesn't automatically close with another }

Do not use CTL-CMD-R as a default keystroke for SCSS conversion

This conflicts with Textmate's reveal command which selects the current file in the project tree.

inclusion with SublimeText2

I have requested this be added to SublimeText2, can you provide some input here?

http://www.sublimetext.com/forum/viewtopic.php?f=4&t=2579

Sublime Text 2 instructions

cd ~/Library/Application\ Support/Sublime\ Text\ 2
git clone git://github.com/kuroir/SCSS.tmbundle.git "SCSS"

this seemed to work fine getting syntax highlighting to work in Sublime Text 2. Probably should be in README?

tmbundle doesn't load in Textmate 2

Hi,

I am using the latest master of the tmbundle but it isn't loaded in tm2.
my tm2 revision is: 8971

any idea?
What I found are strange encodings in filenames. may this be the reason?

cheers