Giter VIP home page Giter VIP logo

komodo-sass-compiler's Introduction

Komodo SASS/SCSS Compiler

SASS/SCSS compiler for Komodo Edit/Ide.
This addon gives you the ability to compile SASS/SCSS files and gives a improved auto-completion of Less variables (also includes imports).

Usage

If you install this addon. default the compiler is enabled.
When you edit a SASS/SCSS file the file will be compiled to a CSS file.

If you have imports in you're sass/scss-file or you want to run multiple output-files.
You need to use a file scope this enables you to set up project based file scopes, that will trigger output-files based on output-files and include-folders.
If you want to compile a file on the fly that has includes, you can also set up a single file watcher.
This will trigger the selected output-file regardless of the scss/scss-file you're working on.

Trough the Tools-menu and file context-menu are Sass menu's added, that allows you to trigger file based commands and a few commands concerning file-watchers, file-scopes and auto-completion commands/settings. Also is a status-bar added to the breadcrumb-bar that also has a context-menu that allows you to control various commands/settings.

Sass Status-bar

When editing SASS/SCSS files, a Sass status bar will be shown.
The status bar well tell you, if the compiler is enabled/disabled, if a file watcher or file scope is active and it will show errors if present.

Screensot

Trough the status-bar you can easily configure the settings.

Status-bar options

  • Disable/Enable Compiler
    This will enable/disable the compiler.
  • Disable/Enable File Watcher
    This will enable/disable a file watcher for the current file, when you edit sass/scss file's only the "Watched file" will be compiled.
  • Disable/Enable File Scopes
    This will enable the "file scopes" mode, that will trigger file scopes based on projects.
  • File Scopes
    This will open a window where you can set file scopes, so you can work with multiple output files in one project or work with multiple projects.
  • Settings
    This will open the Sass-settings window.

Auto-completion

This addon will provide you with a SASS/SCSS variables auto-completion.
The vars will be search automatically( on file open and after you pressed $ on save ).

You can also trigger the search trough the menu.
When you type $ a auto completion box will be shown.

Screenshot

Menu options

Tools > SASS > ...

  • Compile Saved File into CSS
    Takes a .sass or .scss file and creates a .css file with the same name in the same spot as the .sass or .scss file.
  • Compile Current Buffer (including imports)
    into CSS. Takes the contents of the current buffer and turns it into CSS.
  • Compile Selection into CSS (including imports)
    Takes the current selection and turns it into CSS
  • Compile and Compress Saved File into CSS
    Takes a .sass or .scss file and creates a .css file with the same name in the same spot as the .sass or .scss file. The .sass or .scss file will be compressed/minified.
  • Compile and Compress Current Buffer (including imports)
    into CSS. Takes the contents of the current buffer and turns it into compressed CSS.
  • Compile and Compress Selection into CSS (including imports)
    takes the current selection and turns it into compressed CSS.
  • Collect @vars
    collect all the SASS $vars for auto completion.
  • File Watcher
  • Enable File Watcher for current file
    Enables a file watcher for current SASS file
  • disable File Watcher
    Disables the file watcher
  • File Scopes
  • Enable File Scopes
    Enables the "file-scopes" mode.
  • Disable File Scopes
    Disables the "file-scopes" mode
  • Sass Settings
    This will open the settings window.

File Scopes

File-scopes allow you to work with output-files and include-folders, these file scopes are set on a project level.
When you edit a file in the include-folder(s) the selected output-files(s) are triggered.
To create a new file-scope you will have to use the menu in the status-bar status-bar > File Scopes. This will open the File scopes window, in this window you can edit, create or delete file scopes:

screenshot

If you click the "Create new file scope" menu item, the following popup will shown:

screenshot

In this window you can create you're project based file scopes, you can have multiple file scopes in one project.
You can set up file scopes with the following structures:

 Include folder/
    ├─ Sass file
    ├─ Sass file
    ├─ Include folder/
    ├── Sass file
    └── Sass file   
─ Sass output-file
 

And:

 Include folder/
    ├─ Sass file
    ├─ Sass output-file
    ├─ Include folder/
    ├── Sass file
    └── Sass file
	

You can select multiple output-files, but is not recommended to use more that two output-files for performance reasons.

File Watcher

If you want to edit a SASS/SCSS-files that has includes, on the fly.
You can set up a File watcher, when you enable the file Watcher the current file will be added as output-file.
When you now edit Less files only the output-file will be triggered.

komodo-sass-compiler's People

Contributors

babobski avatar

Watchers

 avatar

komodo-sass-compiler's Issues

Can't add new scope

Hi,
I have been trying to create a new scope on Komodo IDE 10.2 and I keep getting the following message :

capture d ecran 2017-09-05 a 15 05 19

Regards.

Can't @import .sass Files

Komodo Edit, version 9.3.1, build 16424
Latest version of SASS Compiler

Cannot @import .sass files
"Error: File to import not found or unreadable"

Tried to compile bulma.sass without any modification from working build with no success.
https://github.com/jgthms/bulma

Gave read, write, and execute permissions to both user and group but no success.

Please advise.

@imports can't handle _ prefixd files

Currently the sass compiler can't handle with _ prefixed files.
It's only handeling imports as it is.
As the sass doc's state.

I can create a file _reset.scss and import it by using the file name without underscore:
@import 'reset'

Currently it will only look for the reset.scss and not for the _reset.scss file.

Issue with line breaks

I'm having great difficulty with this. It does not seem to like line breaks. Whenever I put in a bit of code like this for example:

body{
background:red;
}

I get a notification telling me it's invalid CSS and doesn't compile the file.

However, if I squidge it up like this:
body{ background:red;}
it works.

I've been playing with the line break settings in Komodo but nothing seems to work. The annoying this is that it compiles it closer to the first example which is what I want!

Compling comments in a weird way

Hiya,

I've got a strange issue when compiling my SCSS - it's rearranging the comments into strange places.

I've attached two screenshots to get across what I mean. One shows the uncompiled SCSS, which has the comments in logical places. The other shows the compiled CSS, which has rearranged all the comments to the top.

screen shot 2016-12-12 at 11 03 38

screen shot 2016-12-12 at 11 05 41

It only seems to occur when I nest this code inside something else, as can be seen here nested inside the breakpoint code.

Is there anything that can be done to prevent this from happening?

Doesn't like my code

Hi,

Must say, I've been having great difficulty getting this to work. I've tried it on Komodo Edit 8, 9 and 10. It won't open at all in 8, and says it's incompatible with 9 and 10, but what is it compatible with?

The issues I've been having:

  1. After I declare a variable like this for example:
    $main: #00aaee;

It doesn't let me use it, the autocomplete doesn't work. It won't even let me insert a dollar sign using my keyboard, but if I copy and paste $main in to use it, it works and compiles fine.

  1. It's telling me my code is invalid when it's actually fine. The CMS I use allows the following markup:

@breakpoint >=l{
css code here
}

as a way of doing media queries where the breakpoints are defined elsewhere. However, it won't compile if I do this. Is there a way I can tell it to ignore this?

I'm excited to use SCSS but it's proving very difficult so far!

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.