# ﷽
## ❤️[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