[Hide]

sass
#define sass: \
I----------------------------\
I  _____  ___   _____ _____  \
I /  ___|/ _ \ /  ___/  ___| \
I \ `--./ /_\ \\ `--.\ `--.  \
I  `--. \  _  | `--. \`--. \ \
I /\__/ / | | |/\__/ /\__/ / \
I \____/\_| |_/\____/\____/  \
I----------------------------I
    • "Syntactically Awesome Stylesheets"
    • a language which transpiles to CSS
    • intended to be a better CSS (and it delivers)
    • browsers do not support it natively
    — has two syntaxes:
        • SASS - which is pythong like
        • SCSS - which looks like C
    •  BELOW only SCSS will be discussed,
            because its the better syntax
    •  you are advised to use SASS if your environment allows for a transpile step

    Comments:
        • C++ comments are allowed (in addition to CSS's C style comments)

    Variables:
        $NAME: VALUE;   : declares NAME
        $NAME           : expands NAME
        • does not create CSS variables
        • compile-time evaluated

    Nesting:
        <selector> {
            (<operator> <selector> {
                // ...
            })*
        }
        •  the lack of an operator marks the "in operator"
        <style>
    .content {
        > h1 {
            font-size: 2rem;
        }

        p {
            color: gray;
        }
    }
</style>


    Imports:
        @import "<file-name>";
        • process the contents of the provided file inline

    Extend:
        <selector-2> {
            @extend <selector-1>;
        }
        • introduces inheritence
        • all properties from the provided selector will be added to the current context