Sass-lax NPM | npm.io

Sass Lax by Quelchlax

About :

Made by Quelchlax : Web Development Student @ Fanshawe College, London Ontario, Canada
Mini Example Showcasing Sass - Pair with Visual Studio Codes Live Sass Compiler

    @import 'sass/sass-lax'
    
    *
        +asterisk

    .parent
        +holy-grail(auto, 1fr, auto)
        +darker
    
    .header
        +holy-header
        +back($blue)
    
        padding: 32px
    
    .left-side
        +holy-left
        +back($orange)
    
    .main
        +middle
        +holy-center
        +back($blue)

        div
            +flex
    
    .right-side
        +holy-right
        +back($green)

    .footer
        +holy-footer
        +back($red)

Simple SASS/SCSS for Simple Vanilla CSS
SASS/SCSS @mixin "library" is a work in progress
Documentation is a work in progress as @mixins are added
These @mixins are good for quicker deployment
Saves on keystrokes with easy @mixin naming
Sass @mixins are excellent for testing various CSS components
Enjoy. Made by a learning developer, for other developer
Made for school purposes as we design a lot of material without the use of CSS Frameworks and Libraries like Bootstrap or Tailwind CSS so this speeds up work for the future!

For more information on how to use Sass visit: https://sass-lang.com/
Cheers!

Get this SASS/SCSS @mixin library

This repository is mainly used for personal use but built with others in mind for ease of use.
- Others are free to clone or include into your own projects.
To clone this repo: git clone https://github.com/quelchlax/sass-lax
NPM Package :

    npm i sass-lax

Road Map : Sass Lax

Documentation
Improved Sass Constructors
More Sass Mixins
Improved Sass Mixin Presets
More Sass Mixin Presets

Work is done on a regular basis to this repository

Visual Studio Code Plugins I Recommend For Sass:

Sass
Sass Lint
Sass Live Compile

To include Sass Lax into your Sass file:

Check file path to ensure this is properly working
To link Sass Lax

    // inside new sass file such ass style.sass
    @import 'sass/sass-lax'
    *
        +asterisk

Sass Live Compiler to CSS should compile this if Sass Lax is linked correctly

    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }

Example inside HTML Document:

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>

Simple Mixins:

All @includes can be replaced with +
- Example : instead of @include no-deco we write +no-deco to add mixins while using sass
- Below are examples showing Sass included mixins within this library as well as what the mixin does in terms of CSS. For more information on how to use Sass check the Sass documentation at this link: https://sass-lang.com/

Simple Documentation:

Preset Mixins:

    +nodeco         // text-decoration: none
    +underline      // text-decoration: underline

    +uppercase      // text-transform: uppercase
    +lowercase      // text-transform: lowercase

    +nolist         // list-style: none
    +noout          // outline: none

    +full           // margin: 0 , padding: 0

    +wide           // width: 100%
    +high           // height: 100%
    +maxed          // height: 100%, width: 100%
    
    +nodisplay      // display: none
    +block          // display: block
    +flex           // display: flex
    +inline         // display: inline-block
    +grid           // display: grid
    
    +absolute       // position: absolute
    +relative       // position: relative
    +fixed          // position: fixed
    
    +middle         // text-align: center
    +lefty          // text-align: left
    +righty         // text-align: right
    
    +rows           // display: flex, flex-flow: row wrap
    +columns        // display: flex, flex-flow: column +wrap       // flex-wrap: wrap

    +asterisk       // margin: 0, padding: 0, 
                    // list-style: none, text-decoration: none

    +smfont         // font-size: 8px
    +regfont        // font-size: 14px
    +medfont        // font-size: 24px
    +lgfont         // font-size: 36px
    +bigfont        // font-size: 48px
    +hugefont       // font-size: 60px

    +pointer        // cursor: pointer

    +visible        // content-visibility: auto
    +invisible      // content-visibility: hidden

    +darker         // background-color: #1a1a1a
    +lighter        // background-color: #f2f2f2

    +holy-header    // grid-column: 1 / 4
    +holy-left      // grid-column: 1 / 2
    +holy-content   // grid-column: 2 / 3
    +holy-right     // grid-column: 3 / 4
    +holy-footer    // grid-columnL 1 / 4

Full @mixin Presets Sass Code :

For a clear indication of what above showcase examples are doing when being called

    @import 'colors'

    @mixin nodeco
        text-decoration: none

    @mixin nolist
        list-style: none

    @mixin noout
        outline: none

    @mixin full 
        margin: 0
        padding: 0

    @mixin wide
        width: 100%

    @mixin high
        height: 100%

    @mixin maxed
        +high
        +wide

    @mixin nodisplay
        display: none

    @mixin block
        display: block

    @mixin inline
        display: inline-block

    @mixin grid
        display: grid

    @mixin absolute
        position: absolute

    @mixin relative
        position: relative

    @mixin fixed
        position: fixed

    @mixin middle
        text-align: center

    @mixin lefty
        text-align: left

    @mixin righty
        text-align: right

    @mixin flex
        display: flex

    @mixin rows
        +flex
        flex-flow: row wrap

    @mixin columns
        +flex
        flex-flow: column wrap

    @mixin asterisk
        +nodeco
        +nolist
        +full

    @mixin smfont
        font-size: 8px

    @mixin regfont
        font-size: 14px

    @mixin medfont
        font-size: 24px

    @mixin lgfont
        font-size: 36px

    @mixin bigfont
        font-size: 48px

    @mixin hugefont
        font-size: 60px

    @mixin pointer
        cursor: pointer

    @mixin underline
        text-decoration: underline

    @mixin uppercase
        text-transform: uppercase

    @mixin lowercase
        text-transform: lowercase

    // https://web.dev/content-visibility/

    @mixin visible
        content-visibility: auto

    @mixin invisible
        content-visibility: hidden

    @mixin darker
        background-color: $dark

    @mixin lighter
        background-color: $light

    @mixin holy-header 
        grid-column: 1 / 4

    @mixin holy-left
        grid-column: 1 / 2

    @mixin holy-right 
        grid-column: 3 / 4

    @mixin holy-content
        grid-column: 2 / 3

    @mixin holy-footer 
        grid-column: 1 / 4

Examples are shown below with mixin constructors showcasing what CSS objects are passed in

Proper Examples:

+scale(100%, 300px)
+squeeze(12px, 10px)
+items(center)
+topleft(0,10px)

Mixin Constructors

    +theme(color, background-color)
    +scale(height, width)               
    +squeeze(margin, padding)           
    +flow(flex-direction, flex-wrap)
    +topleft(top, left)
    +topright(top, right)
    +botleft(bottom, left)
    +botright(bottom, right)
    +border(color)
    +wrap(flex-wrap)
    +justify(justify-content)
    +content(align-content)
    +items(align-items)
    +back(background-color)
    +origin(transform-origin)
    +style(transform-style)
    +delay(transition-delay)
    +colors(red,green,blue,opacity)
    +over(overflow)
    +over-x(overflow-x)
    +over-y(overflow-y)
    +stretch-stack(flex: 1 1 width)
    +stack(flex: 0 1 width)
    +sidebar(min, max, fraction)
    +pancake-stack(amount, amount, amount)
    +holy-grail(amount, amount, amount)
    +aspect(ratio)

Full @mixin Constructor Sass Code :

For a clear indication of what above showcase examples are doing when passing in arguements to constructors

    @import 'presets'

    @mixin scale ($height, $width)
        height: $height
        width: $width

    @mixin squeeze ($margin, $padding)
        margin: $margin
        padding: $padding

    @mixin flow ($direction, $wrapper)
        +flex
        flex-flow: $direction, $wrapper

    @mixin topleft ($top, $left)
        top: $top
        left: $left

    @mixin topright ($top, $right)
        top: $top
        right: $right

    @mixin botleft ($bot, $left)
        bottom: $bot
        left: $left

    @mixin botright ($bot, $right)
        bottom: $bot
        right: $right

    @mixin border ($color)
        border: 1px solid $color

    @mixin wrap ($wrap)
        flex-wrap: $wrap

    @mixin justify ($content)
        justify-content: $content

    @mixin content ($align)
        align-content: $align

    @mixin items ($items)
        align-items: $items

    @mixin self ($self)
        align-self: $self

    @mixin back ($color)
        background-color: $color

    @mixin origin ($origin)
        transform-origin: ($origin)

    @mixin style ($style)
        transform-style: $style

    @mixin delay ($delay)
        transition-delay: $delay

    @mixin theme ($color, $back)
        color: $color
        background-color: $back

    @mixin colors ($red, $green, $blue, $opacity)
        color: rgba($red, $green, $blue, $opacity)

    @mixin over ($overflow)
        overflow: $overflow

    @mixin over-y ($overflow)
        overflow-y: $overflow

    @mixin over-x ($overflow)
        overflow-x: $overflow

    @mixin stretch-stack ($width)
        flex: 1 1 $width

    @mixin stack ($width)
        flex: 0 1 $width

    @mixin sidebar ($min, $max, $fraction)
        +grid
        grid-template-columns: minmax($min, $max) $fraction

    @mixin pancake-stack ($one, $two, $three)
        +grid
        height: 100vh
        grid-template-rows: $one $two $three

    @mixin holy-grail ($one, $two, $three)
        +grid
        height: 100vh
        grid-template: $one $two $three / $one $two $three

    @mixin aspect ($ratio)
        aspect-ratio: $ratio

Mixin Colors
To include colors simply add the color like so:
Examples:
color: $dark
+back($blue)
+theme($dark, $light)
    $dark: #1a1a1a
    $light: #f2f2f2
    $blue: #1a1aff
    $green: #00cc00
    $red: #e60000
    $orange: #ffa500
    $yellow: #e6e600
    $purple: #800080
    $pink: #ff8095
    $brown: #651a1a
    $grey: #808080
    $olive: #808000
    $gold: #ffd700
    $silver: #c0c0c0
    $cyan: #33ffff
    $teal: #008080
    $lavender: #bfbff2
    $beige: #f5f5dc
    $maroon: #660000
    $sand: #ffdf80
    $lime: #1aff1a
    $lemon: #cccc00
    $violet: #ee82ee
    $seaweed: #66ffcc
    $wood: #999966
    $leaf: #009933
    $steel: #669999
    $iron: #663300
    $forest: #003300
    $ocean: #0099cc
    $fusion: #cc0066
    $pumpkin: #ff6600
    $sky: #b3d9ff
    $retro: #cc00ff
    $grass: #ccff99
More documentation will be added as this repository grows
Source code is meant for Vanilla CSS Styling using Sass and Sass Live Compiler to quickly write clean code with less keystrokes
Please feel free to download and modify to your liking
Made by quelchlax https://github.com/quelchlax/sass-lax