I use SCSS with the compass framework, and so need to pass the --compass option to the sass executable. I added a defcustom for scss-sass-options to my local file with a list of arguments like so:

(defcustom scss-sass-options '("--compass" "-v" "--cache-location '/tmp/.sass-cache'")
  "Options for SCSS"
  :group 'scss)

I had to change scss-compile to include (mapconcat 'identity scss-sass-options " ") and flymake-scss-init to include (append scss-sass-options (list "--scss" "--check" local-file)). This seems to work properly with the options I gave it.

It could be good to implement a variable parser to know what's the value of a given variable or even just go to the definition. If the variable is just a color, we could implement something similar to rainbow-mode that would colorize the variable according to its color.

scss-mode.el states that current version is:

;; Version: 0.5.0

but there is no tagged release.

scssc is C++ implement for scss.

-*- mode: compilation; default-directory: "~/LiWei/orderprocessing/app/javascript/" -*-
Compilation started at Sat Feb 24 21:13:39

/home/zw963/utils/scss/bin/sassc  --update '/home/zw963/LiWei/orderprocessing/app/javascript/'
sassc: unrecognized option '--update'
See 'sassc -h'

Compilation exited abnormally with code 64 at Sat Feb 24 21:13:39

It is an sass convention to not compile files that start with an underscore. Those files are partials and are included into another file that doesn't start with an underscore.

I believe when using sass watch, saving a .scss file that starts with an underscore the file it is included in is compiled.

I can't see my SCSS code as I see the example in readme or EmacWiki. That's what I see:
@import "compass/reset";

nav {

ul {
list-style: none;

a {
color: black;
font: {
weight: bold;
size: 2em;
style: Arial, sans;
}
&:hover {
color: red;
}
}
}
}

I think it may be a config issue, but I don't know how to do it.

Thanks

Hi, you don't really explain how to disable compiling at save can you be more explicit :) ?

edit: okay I found how, I edited .emacs like this:

(custom-set-variables
'(scss-compile-at-save nil)
)

See syl20bnr/spacemacs#7336

In short, highlighting works correctly for the first file opened, but subsequent buffers lose most of the highlighting.

Emacs 25.1 now provides it's own scss-mode derived from css-mode, I'm guessing there is a conflict there.

And how would I do it?

Thanks.

On windows, after installing sass npm version with:

npm install -g sass

As explained on the official page

When I try to to compile the file E:\scss-mode\style.scss

gives the error:

-*- mode: compilation; default-directory: "e:/scss-mode/" -*-
Compilation started at Mon Feb 28 23:55:47

sass  --update 'e:/scss-mode/'
Error reading 'e: no such file or directory.

Compilation exited abnormally with code 66 at Mon Feb 28 23:55:48

After testing the problem outside Emacs from the command line the problem appears to be the use of single quotes for the absolute path with the npm version of sass on windows. It seems that replacing on scss-mode.el the "'" for "\"" the problem disappears in windows ( and it doesn't give any problem on Linux but I haven't fully tested in other systems ).

After replacing the scss-compile() function with this code:

(defun scss-compile()
  "Compiles the directory belonging to the current buffer, using the --update option"
  (interactive)
  (compile (concat scss-sass-command " " (mapconcat 'identity scss-sass-options " ") " --update "
                   (when (string-match ".*/" buffer-file-name)
                     (concat "\"" (match-string 0 buffer-file-name) "\""))
                   (when scss-output-directory
                     (concat ":\"" scss-output-directory "\"")))))

Everything seems to work perfectly ( on windows ):

-*- mode: compilation; default-directory: "e:/scss-mode/" -*-
Compilation started at Tue Mar  1 00:03:29

sass  --update "e:/scss-mode/"
Compiled style.scss to style.css.

Compilation finished at Tue Mar  1 00:03:30

Does this really solves the problem or will this create any other problem in the future?.

I'd like to automatically turn flymake mode on anytime I enter scss-mode, but I can't see how to do this. Parallel to other modes, I'd expect an scss-mode-hook or similar where I could set flymake-mode t, but I don't see that hook.

Hi,

I get Randomly this bug:
bold fonts @include statements and comments

specially when I don't leave a line before the selector.

Any ideas why is that?

In my project's scss files, most work is done in underscore files (eg _landing.scss). These are included in such a way that variables are defined at compilation (eg $dark-blue) that aren't defined in the file itself. Is there a way to enable flymake support in such a way I can see linting errors but don't require those variables to be defined in the file itself? Defining an entrypoint file or similar, perhaps?

scss-mode indents parentheses like this:

a {
  background: linear-gradient(to bottom,
                              red,
                              blue
                             );
}

Which is very strange.

a {
  background: linear-gradient(to bottom,
    red,
    blue
  );
}

Is more inline with general SCSS style (and coding styles that I see in the wild).

In the SCSS Customize Group buffer, you cite the following example for the SCSS Sass Options variable:

'("--cache-location" "'/tmp/.sass-cache'")

Setting the variable to your example throws the following error:

scss-compile: Wrong type argument: sequencep, quote

Here's the backtrace:

Debugger entered--Lisp error: (wrong-type-argument sequencep quote)
  mapconcat(identity (quote ("--cache-location" "'/tmp/.sass-cache'")) " ")
  scss-compile()
  scss-compile-maybe()
  run-hooks(after-save-hook)
  basic-save-buffer()
  save-buffer(1)
  call-interactively(save-buffer nil nil)
  command-execute(save-buffer)

Running the full command through Emacs via M-!:

sass --cache-location '/tmp/.sass-cache' [input file] [output file]

Succeeds with no output.

Hi,

Just wanted to point out that scss-mode doesn't seem to correctly indent groups of related css properties. For example consider the following code with the correct indentation:

body {
    background: {
        image: url(images/bg.jpg);
        size: cover;
        attachment: fixed;
    }
}

Selecting it all and then applying the scss-mode indentation changes it to:

body {
    background: {
    image: url(images/bg.jpg);
    size: cover;
    attachment: fixed;
}
}

which you can see is not exactly desired.

The scss-mode on marmalade is version 0.5 but doesn't contain the merge of pull request #9, I guess the version number hasn't been changed in the original source file?

Can you please update the version number if that's the case and update the emacs package as well?

Thanks

If you're in normal css mode and have YASnippet and auto complete installed, it works.

Under scss-mode, auto complete appears not to work at all. Is there a way to make it so auto complete
works in scss mode with YASnippet?

I have created a new css indenter in es-css-mode, which correctly indents comments and multiline colon statements.

Have a look, and tell me if there are any issues. Later, I will add it to melpa, and you might want to inherit from that, instead of the built-in mode. If I'm not mistaken there is a way to specify dependencies, so they get downloaded automatically.

https://github.com/sabof/es-css-mode
https://github.com/sabof/es-lib

An example of current indentation behaviour...

.class-name {
    // comment
    @media #{$small} {
    display:inline;
}
}

Desired indentation...

.class-name {
    // comment
    @media #{$small} {
        display:inline;
    }
}

** Edit - I've updated the example. Seems it only happens when I use a set of {} like the above example.

It freezes when the following files are loaded.

$colors: (
  #d70206,
  #f05b4f,
  #f4c63d,
  #d17905,
  #453d3f,
  #59922b,
  #0544d3,
  #6b0392,
  #f05b4f,
  #dda458,
  #eacf7d,
  #86797d,
  #b2c326,
  #6188e2,
  #a748ca
) !default;

If I take out the newlines, there is no problem.

$colors: ( #d70206, #f05b4f, #f4c63d, #d17905, #453d3f, #59922b, #0544d3, #6b0392, #f05b4f, #dda458, #eacf7d, #86797d, #b2c326, #6188e2, #a748ca) !default;

Thanks for this great mode! I would love to see it added to the Emacs Lisp Package Archive (ELPA), so that users could more easily install it. It looks like the only change you would need to make is to add a ;; Version: x.x.x header to the file.

The Marmalade repo allows you to upload packages without needing manual approval, so you could upload scss-mode and any new versions right away.

Thanks again,

Daniel Hackney

Hi, on MELPA stable last release is v0.5.0 that was 8 years ago, since then a lot of features have been added to the project, such features are not available when downloading via MELPA stable which is a recommended distribution channel to use in most of the Emacs packages.

Please, with the new release, the errors are fixed.

Thanks.

Hi,

The '//' characters indicate that the rest of the line is commented out, however this behaviour is ignored if it is part of a url. The GitHub SCSS marking for example displays it correctly:

@import url(http://www.example.com/); // A comment

The above code in scss-mode would have everything after http: commented out. This has the additional side-effect of messing up indentation after this as it matches up with the opening parenthesis.

If double or single quotes are used within a "//"-style comment, the line is no longer recognized as a comment. If the quotes are matched, it's just visually incorrect:

// a body class of "two-col".

But if it's unmatched, it messes up the parsing on the next line:

// true means it's the last column in the row
@include column($content-columns, true); } }

In this example, the second line is "quoted".