CSS

Before you get into the code, here's a clip from the movie Wargames starring Mathew Broderick.


A poster image from the Youtube player playlist, or an advertisement


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.


A poster image from the Youtube player playlist, or an advertisement


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))))