├── .gitignore ├── README.org └── scss-mode.el /.gitignore: -------------------------------------------------------------------------------- 1 | *.elc -------------------------------------------------------------------------------- /README.org: -------------------------------------------------------------------------------- 1 | * SCSS Mode for Emacs 2 | Major mode for editing [[http://sass-lang.com/][SCSS]] files in Emacs. 3 | 4 | ** Features 5 | - Compilation of current file on save. (Disable by changing 6 | =scss-compile-at-save= to =nil=) 7 | - Flymake support, enable with =M-x flymake-mode= 8 | - Indentation and highlighting (Derived from CSS-mode) 9 | - Syntax highlighting for variables and inline comments. 10 | 11 | [[http://i.imgur.com/Wdokb.png]] 12 | 13 | [[http://i.imgur.com/9ed6X.png]] 14 | 15 | ** Installation 16 | Command line utility sass is required, [[http://sass-lang.com/]]. Make 17 | sure sass location is in emacs PATH, example: 18 | 19 | : (setq exec-path (cons (expand-file-name "~/.gem/ruby/1.8/bin") exec-path)) 20 | 21 | Or customize =scss-sass-command= to point directly to your sass 22 | executable. 23 | 24 | Add something like this to your emacs load file: 25 | 26 | : (add-to-list 'load-path (expand-file-name "~/.emacs.d/folder-where-you-put-scss-mode-el")) 27 | : (autoload 'scss-mode "scss-mode") 28 | : (add-to-list 'auto-mode-alist '("\\.scss\\'" . scss-mode)) 29 | 30 | ** Tips 31 | If you want to automatically hide the compilation buffer for every 32 | successful compilation have a look at [[https://github.com/antonj/.emacs.d/blob/master/aj-compilation.el][aj-compilation.el]] 33 | 34 | All successful compilations in other modes are also hidden, except 35 | for rgrep "compilations" where a successful compilation is what you 36 | are interested in... 37 | -------------------------------------------------------------------------------- /scss-mode.el: -------------------------------------------------------------------------------- 1 | ;;; scss-mode.el --- Major mode for editing SCSS files 2 | ;; 3 | ;; Author: Anton Johansson - http://antonj.se 4 | ;; URL: https://github.com/antonj/scss-mode 5 | ;; Created: Sep 1 23:11:26 2010 6 | ;; Version: 0.5.0 7 | ;; Keywords: scss css mode 8 | ;; 9 | ;; This program is free software; you can redistribute it and/or 10 | ;; modify it under the terms of the GNU General Public License as 11 | ;; published by the Free Software Foundation; either version 2 of 12 | ;; the License, or (at your option) any later version. 13 | ;; 14 | ;; This program is distributed in the hope that it will be 15 | ;; useful, but WITHOUT ANY WARRANTY; without even the implied 16 | ;; warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR 17 | ;; PURPOSE. See the GNU General Public License for more details. 18 | ;; 19 | ;;; Commentary: 20 | ;; 21 | ;; Command line utility sass is required, see http://sass-lang.com/ 22 | ;; To install sass: 23 | ;; gem install sass 24 | ;; 25 | ;; Also make sure sass location is in emacs PATH, example: 26 | ;; (setq exec-path (cons (expand-file-name "~/.gem/ruby/1.8/bin") exec-path)) 27 | ;; or customize `scss-sass-command' to point to your sass executable. 28 | ;; 29 | ;;; Code: 30 | 31 | (require 'derived) 32 | (require 'compile) 33 | (require 'flymake) 34 | 35 | (defgroup scss nil 36 | "Scss mode" 37 | :prefix "scss-" 38 | :group 'css) 39 | 40 | (defcustom scss-sass-command "sass" 41 | "Command used to compile SCSS files. 42 | Should be sass or the complete path to your sass runnable 43 | example: \"~/.gem/ruby/1.8/bin/sass\"" 44 | :type 'string 45 | :group 'scss) 46 | 47 | (defcustom scss-compile-at-save nil 48 | "If not nil the SCSS buffers will be compiled after each save." 49 | :type 'boolean 50 | :group 'scss) 51 | 52 | (defcustom scss-sass-options '() 53 | "Command line Options for sass executable, for example: 54 | '(\"--cache-location\" \"'/tmp/.sass-cache'\")" 55 | :type '(repeat string) 56 | :group 'scss) 57 | 58 | (defcustom scss-output-directory nil 59 | "Output directory for compiled files, for example: \"../css\". 60 | If nil, do not add any output directory option to `scss-sass-command'." 61 | :type '(choice (const :tag "Same dir" nil) 62 | (string :tag "Relative dir")) 63 | :group 'scss) 64 | 65 | (defcustom scss-compile-error-regex '("\\(Syntax error:\s*.*\\)\n\s*on line\s*\\([0-9]+\\) of \\([^, \n]+\\)" 3 2 nil nil 1) 66 | "Regex for finding line number file and error message in 67 | compilation buffers, syntax from 68 | `compilation-error-regexp-alist' (REGEXP FILE LINE COLUMN TYPE 69 | HYPERLINK HIGHLIGHT)" 70 | :type 'regexp 71 | :group 'scss) 72 | 73 | (defconst scss-font-lock-keywords 74 | ;; Variables 75 | '(("$[a-z_-][a-z-_0-9]*" . font-lock-constant-face))) 76 | 77 | (defun scss-compile-maybe() 78 | "Runs `scss-compile' on if `scss-compile-at-save' is t" 79 | (if scss-compile-at-save 80 | (scss-compile))) 81 | 82 | (defun scss-compile() 83 | "Compiles the directory belonging to the current buffer, using the --update option" 84 | (interactive) 85 | (compile (concat scss-sass-command " " (mapconcat 'identity scss-sass-options " ") " --update " 86 | (when (string-match ".*/" buffer-file-name) 87 | (concat "'" (match-string 0 buffer-file-name) "'")) 88 | (when scss-output-directory 89 | (concat ":'" scss-output-directory "'"))))) 90 | 91 | ;;;###autoload 92 | (define-derived-mode scss-mode css-mode "SCSS" 93 | "Major mode for editing SCSS files, http://sass-lang.com/ 94 | Special commands: 95 | \\{scss-mode-map}" 96 | (font-lock-add-keywords nil scss-font-lock-keywords) 97 | ;; Add the single-line comment syntax ('//', ends with newline) 98 | ;; as comment style 'b' (see "Syntax Flags" in elisp manual) 99 | (modify-syntax-entry ?/ ". 124" css-mode-syntax-table) 100 | (modify-syntax-entry ?* ". 23b" css-mode-syntax-table) 101 | (modify-syntax-entry ?\n ">" css-mode-syntax-table) 102 | (add-to-list 'compilation-error-regexp-alist scss-compile-error-regex) 103 | (add-hook 'after-save-hook 'scss-compile-maybe nil t)) 104 | 105 | (define-key scss-mode-map "\C-c\C-c" 'scss-compile) 106 | 107 | (defun flymake-scss-init () 108 | "Flymake support for SCSS files" 109 | (let* ((temp-file (flymake-init-create-temp-buffer-copy 110 | 'flymake-create-temp-inplace)) 111 | (local-file (file-relative-name 112 | temp-file 113 | (file-name-directory buffer-file-name)))) 114 | (list scss-sass-command (append scss-sass-options (list "--scss" "--check" local-file))))) 115 | 116 | (push '(".+\\.scss$" flymake-scss-init) flymake-allowed-file-name-masks) 117 | 118 | ;;;; TODO: Not possible to use multiline regexs flymake? flymake-err-[line]-patterns 119 | ;; '("Syntax error:\s*\\(.*\\)\n\s*on line\s*\\([0-9]+\\) of \\([^ ]+\\)$" 3 2 nil 1) 120 | (push '("on line \\([0-9]+\\) of \\([^ ]+\\)$" 2 1 nil 2) flymake-err-line-patterns) 121 | 122 | ;;;###autoload 123 | (add-to-list 'auto-mode-alist '("\\.scss\\'" . scss-mode)) 124 | 125 | (provide 'scss-mode) 126 | ;;; scss-mode.el ends here 127 | --------------------------------------------------------------------------------