Mercurial Hosting > lass_css
diff README.md @ 1:3c7d95d21f9d css5
Allahu'Akhbar! Allahu'Akhbar! Allahu'Akhbar! http://bluegriffon.org/#download
| author | Jane Doe <fork_goggles_198230918230974192830192830123@use.startmail.com> |
|---|---|
| date | Tue, 22 Nov 2022 07:42:33 -0700 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/README.md Tue Nov 22 07:42:33 2022 -0700 @@ -0,0 +1,174 @@ +# ﷽ +## ❤️[Announcement!](https://reader.tymoon.eu/article/417 "ufdfd")❤️ +###lass_css + +LASS Writing CSS fails + +://?.com/Shinmera/LASS/blame/master/README.md +Examples +----------------- +LASS supports two modes, one being directly in your lisp code, the other in pure LASS files. Adding LASS into your code is easy: + + (lass:compile-and-write + '(div + :background black)) + +~~~ + "div{ + background: black; + }" +~~~ +LASS works on the following simple principles: A list is a block. The first argument in the list is a selector. The body of the list makes up the properties and sub-blocks. A property is started with a keyword that is used as the property name. Following is a bunch of property arguments until a new keyword, list, or the end is reached. A list inside a block is, again, a block with the twist that the parent block's selector is prepended to the sub-block's selector. + + (lass:compile-and-write + '(nav + (ul + :list-style none + (li + :margin 0 :padding 0 + :display inline-block))))) + +~~~ + nav ul{ + list-style: none; + } + + nav ul li{ + margin: 0; + padding: 0; + display: inline-block; + } +~~~ +Since LASS' `COMPILE-SHEET` simply takes a bunch of lists as its argument, you can use the backquote and comma to integrate variables from your lisp environment: + + (let ((color "HWB(205.7 0% 6.7%)")) + (lass:compile-and-write + `(art + :background ,color)))) + +~~~css + art{ + background: HWB(205.7 0% 6.7%); + } +~~~ +Alternatively however, and this is especially useful in pure LASS files, you can use the `LET` block to create LASS-specific bindings: + + (lass:compile-and-write + '(:let ((color "RGB(0, 136, 238)")) + (art + :background #(color)))) + +~~~css + art{ + background: RGB(0, 136, 238); + } +~~~ +LASS' selector mechanism is very flexible and allows for some complex logic to reduce duplication: +``` + (lass:compile-and-write + '(article + ((:or p blockquote) + :margin 0 :padding 0 + + (a + :color black) + + ((:and a :hover) + :color darkred)))) +``` +~~~ + article p, article blockquote{ + margin: 0; + padding: 0; + } + + article p a, article blockquote a{ + color: black; + } + + article p a:hover, article blockquote a:hover{ + color: darkred; + } +~~~ +But it can go even further: +```lisp + (lass:compile-and-write + '((:and + (:or article section) + (:= data-author (:or yukari ran chen)) + (:nth-child (:or 1 2 3))) + :display none)) +``` +~~~css + "article[data-author=\"yukari\"]:nth-child(1), + article[data-author=\"yukari\"]:nth-child(2), + article[data-author=\"yukari\"]:nth-child(3), + article[data-author=\"ran\"]:nth-child(1), + article[data-author=\"ran\"]:nth-child(2), + article[data-author=\"ran\"]:nth-child(3), + article[data-author=\"chen\"]:nth-child(1), + article[data-author=\"chen\"]:nth-child(2), + article[data-author=\"chen\"]:nth-child(3), + section[data-author=\"yukari\"]:nth-child(1), + section[data-author=\"yukari\"]:nth-child(2), + section[data-author=\"yukari\"]:nth-child(3), + section[data-author=\"ran\"]:nth-child(1), + section[data-author=\"ran\"]:nth-child(2), + section[data-author=\"ran\"]:nth-child(3), + section[data-author=\"chen\"]:nth-child(1), + section[data-author=\"chen\"]:nth-child(2), + section[data-author=\"chen\"]:nth-child(3){ + display: none; + }" +~~~ +Whoa nelly! + +Some CSS properties are not fully specified yet and require browser-specific prefixes. LASS can help you with that, too: +```lisp + (lass:compile-and-write + '(.fun + :linear-gradient "deg(45)" black 0% darkgray 100% + :transform rotate -45deg)) +``` +~~~css + .fun{ + background: -moz-linear-gradient(deg(45), black 0%, darkgray 100%); + background: -o-linear-gradient(deg(45), black 0%, darkgray 100%); + background: -webkit-linear-gradient(deg(45), black 0%, darkgray 100%); + background: -ms-linear-gradient(deg(45), black 0%, darkgray 100%); + background: linear-gradient(deg(45), black 0%, darkgray 100%); + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + } +~~~ +LASS also supports the various `@QUERY` operator blocks: + + (lass:compile-and-write + '(:media "(max-width: 800px)" + (art + :margin 0))) + +~~~css + @media (max-width: 800px){ + art{ + margin: 0; + } + } +~~~ +By default LASS activates pretty-printing and inserts newlines and spaces where appropriate in order to make the result readable and easy to debug. However, you can also deactivate that and directly produce minified CSS: + + (let ((lass:*pretty* NIL)) + (lass:compile-and-write + '(:media "(max-width: 800px)" + (div + :margin 0)))) + +~~~ + @media (max-width: 800px){div{margin:0;}} +~~~ +As mentioned above you can write pure LASS files to compile down to a CSS file. To do that, simply M-x [xah-fly-save-buffer-if-file](/breakr/) + +://?.com/Shinmera/LASS/blame/master/README.md
