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
+![FEARLASS](https://studio.tymoon.eu/api/studio/file?id=2017 "ufdfd")
+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