CSS
Before you get into the code, here's a clip from the movie Wargames starring Mathew Broderick.
Sort
You can sort your CSS attributes.
;css sort
(use-package com-css-sort
:commands (com-css-sort com-css-sort-attributes-block com-css-sort-attributes-document)
:config
(setq com-css-sort-sort-type 'alphabetic-sort)
);end com-css-sort
CSS-Eldoc
You can see your css selector options in the mini-buffer
;css-eldoc
(use-package css-eldoc
:commands turn-on-css-eldoc
:config
(add-hook 'css-mode-hook 'turn-on-css-eldoc)
(add-hook 'scss-mode-hook 'turn-on-css-eldoc)
);end css-eldoc
Origami
Instead of Org-mode, you can use Origami
(use-package origami
:commands (origami-toggle-node origami-mode)
:config
(add-to-list 'origami-parser-alist '(scss-markers . ,(origami-markers-parser "/*/" "/*/")))
(add-hook 'scss-mode-hook
(lambda () (setq-local origami-fold-style 'scss-markers)))
:bind
("C-c i" . origami-toggle-node)
);end origami mode
(add-hook 'css-mode-hook
(lambda ()
(set (make-local-variable 'company-backends) '(company-capf company-css company-dabbrev-code company-dabbrev company-etags company-yasnippet))))
(add-hook 'css-mode-hook 'emmet-mode)
;sass
Origami
(use-package origami
:commands (origami-toggle-node origami-mode)
:config
(add-to-list 'origami-parser-alist '(scss-markers . ,(origami-markers-parser "/*/" "/*/")))
(add-hook 'scss-mode-hook
(lambda () (setq-local origami-fold-style 'scss-markers)))
:bind
("C-c i" . origami-toggle-node)
);end origami mode
(add-hook 'css-mode-hook
(lambda ()
(set (make-local-variable 'company-backends) '(company-capf company-css company-dabbrev-code company-dabbrev company-etags company-yasnippet))))
(add-hook 'css-mode-hook 'emmet-mode)
Scss-Mode
(use-package scss-mode
;:after(web-mode css-mode scss-mode)
:commands (scss-mode scss-compile css-mode web-mode)
:mode ("\\.scss" . scss-mode)
:init
(defun company-scss-mode-hook ()
(set (make-local-variable 'company-backends) '(company-capf company-css company-dabbrev-code company-dabbrev company-etags company-yasnippet)))
:config
(require 'scss-mode)
(setq scss-sass-command dart-p)
;(setq exec-path (cons (expand-file-name "C:/ProgramData/chocolatey/bin/sass") exec-path))
;(setq exec-path (cons (expand-file-name "C:/tools/dart-sass/") exec-path))
(setq scss-compile-at-save 'nil)
;(autoload 'scss-mode "scss-mode")
;require company-css
(require 'company-css)
;hook
(require 'flymake-sass)
:hook
(scss-mode . (lambda ()
(progn
(highlight-indent-guides-mode -1)
(emmet-mode 1)
(company-mode 1)
(company-scss-mode-hook)
(setq emmet-preview-default -1)
(flymake-sass-load)
)));end hook
);end scss-mode
;use scss-mode
Here's another clip, featuring Mathew Broderick.
CSS Hydra
;css-mode hydra
(defvar css-mode-title (with-octicon "globe" "Css Mode Control"))
;generate hydra
(pretty-hydra-define Css-Mode (:title css-mode-title :quit-key "q" :color blue )
("Mode"
(
("1" beginning-of-buffer "Go To Top Of Page")
("0" end-of-buffer "Go To Bottom Of Page")
("e" emmet-mode "Emmet Mode" :toggle t)
("S" scss-mode "Scss Mode" :toggle t)
("M" sass-meister "Sass Meister Validator")
("e" emmet-mode "Emmet Mode" :toggle t )
("E" emmet-cheat-sheet "Emmet Cheat Sheet")
("b" bezier-curves "Animation Bezier Curves")
("g" origami-mode "Origami Mode" :toggle t)
);end mode
"Action"
(
("s" com-css-sort-attributes-block "Alphabetic Sort Css In Block")
("D" com-css-sort-attributes-document "Alphabetic Sort Css Document")
("o" origami-toggle-node "Toggle Origami Fold")
("r" origami-recursively-toggle-node)
("p" origami-previous-fold)
("n" origami-next-fold)
("a" origami-open-all-nodes)
("c" origami-close-all-nodes)
; ("I" highlight-indent-guides-mode "Show Indent Guides" :toggle t )
);end action
"Other"
(
("i" yas-insert-snippet "Insert Snippet" )
("t" company-try-hard "Cycle Completion Backends")
; ( "V" code-validator "Code Validator")
("v" Web-Mode/body "Web Mode Interface" :color blue)
("j" Javascripts/body "Javascript Interface" :color blue)
("w" Web-Development/body "Web Dev Interface" :color blue)
("h" hydra-helm/body "Return To Helm" :color blue )
("<SPC>" nil "Quit" :color blue)
);end other
);end hydra body
);end pretty-hydra-css
(bind-key "<C-m> i" 'Css-Mode/body)
More Defaults
;first you set some margins to keep your code clean
(setq org-ascii-global-margin 0)
(setq org-ascii-inner-margin 0)
(setq org-ascii-indented-line-width 0)
;this one keeps your output from wrapping (which won't compile)
(setq org-ascii-text-width most-positive-fixnum)
Headings
;this comes from the org manual, it strips headings before export
(defun my-headline-removal (backend)
"Remove all headlines in the current buffer.
BACKEND is the export back-end being used, as a symbol."
(org-map-entries
(lambda () (delete-region (point) (line-beginning-position 2)))))
Export Org-To-Scss
You can use a custom function to export SCSS from org-mode, or you can use #+begin_src
#+end_src
; This one strips .org from your 'org-file.org', saves the name and adds '_org-file.scss'
; then it strips headings from your org file, exports to a buffer and writes that buffer to the new name
(defun export-org-to-scss ()
(interactive)
(let* (
(new-extension ".scss")
(new-file-name (concat (file-name-nondirectory (substring buffer-file-name 0 -4)) new-extension))
(sass-file-name (concat "_" new-file-name)))
(progn
(add-hook 'org-export-before-parsing-hook 'my-headline-removal)
(org-ascii-export-as-ascii)
(remove-hook 'org-export-before-parsing-hook 'my-headline-removal t)
(switch-to-buffer "*Org ASCII Export*")
(write-region (point-min) (point-max) sass-file-name)
(previous-buffer))))