This post covers the following sections from my init.
Css and Scss Modes
Emacs is old school. You're either new to it - which means you wouldn't be here unless it was your type of thing - or you know what you're looking for. In either case, search 'Emacs' in tags or search on this site. Then read the posts y date from oldest to newest.
In the last emacs post I covered lines 3626 - 3796. This post covers lines 3995 - 4098. The lines don't always match up because I take stuff out when I'm in the init, and the init is literal. The lines then cover also notes that are not tangled.
There's not a lot of syntax in css, you just need to know how to use it. In most coding environments, autocompletion backends play the primary role in css and scss coding, as they provide dropdowns with completion hints. In Emacs, you set that up with company or autocomplete covered earlier.
Oh, before I continue, here's a clip from the movie Wargames starring Mathew Broderick.
When coding css and scss, a lot of people use also snippets or emmet mode completion. I tend to write css and scss with eldoc mode on by default (eldoc shows css completion options in the minibuffer). In some cases, I will turn on company mode, and often I use shortcuts to cheatsheets for rapid review, especially when mixing flex and css grid aligment properties.
Anyway, here's sort and eldoc:
(use-packagecss-eldoc:commandsturn-on-css-eldoc;add a hook if you want always to see the selector options in the minibuffer:config
Sort arranges selected selectors, to clean up your code. Eldoc shows completion options in the minibuffer
In any file, unless you have minimap enabled on side bar, folding code blocks is a priority. Otherwise you end up searching the filing looking for landmarks. I prefer folding to minimap (though I do like org-sidebar). The following code uses origami-mode to enable folding css blocks. It would be better to just use org-babel and literally program your sass files...
Sass is scss without the brackets. I use scss. My scss mode is identical to my css mode, which is configured only with origami, company completion, yasnippets, and css-eldoc. Scss mode offers the option to use emacs as a wrapper for the command line so you can process your scss at the push of a buttton. I don't use the following code, but here it is. Instead, I use a package.json file in the working directory with node packages watching the sass files to compile them on change. Hugo comes with sass compilation baked in. For other sites (custom Wordpress theme/child-theme), autoprefixer, html-minifier, uglify-js, postcss-cli, and maybe purgecss would be enough.
So that's it for my css and scss configuration. Next, is the hyrda. But before that, here's another clip from Mathew Broderick's 1983 movie Wargames. 💾 Simulation code is cool, however, I can't for the life of me figure war logic. Every calculation grostly distorts the value of human suffering. 😄
(defvarcss-mode-title (with-octicon"globe""Css Mode Control"))
(pretty-hydra-defineCss-Mode (:titlecss-mode-title:quit-key"q":colorblue )
("1"beginning-of-buffer"Go To Top Of Page")
("0"end-of-buffer"Go To Bottom Of Page")
("M"sass-meister"Sass Meister Validator")
("e"emmet-mode"Emmet Mode":togglet )
("E"emmet-cheat-sheet"Emmet Cheat Sheet")
("b"bezier-curves"Animation Bezier Curves")
("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")
; ("I" highlight-indent-guides-mode "Show Indent Guides" :toggle t )
("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":colorblue)
("w"Web-Development/body"Web Dev Interface":colorblue)
("h"hydra-helm/body"Return To Helm":colorblue )
);end hydra body
Update: <2021-02-08> Added literal files for Scss
Css files get huge and complex. Sass (or Scss) enables file includes to better organize code, as well as other programming options, like nesting. I use nesting to mirror html structure, which is intuitive and fast. Then headers and folding are even more helpful.
Moreover, with 10 or so sass files (5 to overwrite the cascade), you end up jumping between files again.
With code folding you can combine those 5 files and whip through the document easily. It's essential. Only Origami doesn't come close to org-mode. Org is just so versatile. So here's what I've done to make it work.
Recycled a function to strip org-mode headings from documents before export. Written a function to export to .scss files. And configured a few org-export-to-ascii parameters to get org to export scss to an scss file. There's nothing brilliant about the elisp code, but what it does is gorgeous 😏
;first you set some margins to keep your code clean
;this one keeps your output from wrapping (which won't compile)
;this comes from the org manual, it strips headings before export
"Remove all headlines in the current buffer.
BACKEND is the export back-end being used, as a symbol."
(lambda () (delete-region (point) (line-beginning-position2)))))
; 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
(new-file-name (concat (file-name-nondirectory (substringbuffer-file-name0-4)) new-extension))
(switch-to-buffer"*Org ASCII Export*")
(write-region (point-min) (point-max) sass-file-name)
I added 'export-org-to-scss' to the scss hydra. Now you can organize your scss files like org documents and easily compile them to your watched directory. Works great with Hugo's integrated server.
This kind man didn't invent the term scientist so you could make a mockery of earthly geometrics! He did it because science is badass, just like him. Taking science seriously is the first step to better health and a better world for all. You can take that first step here.
"We need very much a name to describe a cultivator of science in general. I should incline to call him a Scientist." ~ William Whewell.
Seriously though, most of our sciency posts are really about computer science, namely Emacs - but don't be swayed by the Old-Skoolers. If you're choosing a text editor for the first time, Emacs is dead.
Having said all that, we use Emacs, and around here, the Earth is round.