Various css (sass) examples

examples.sass

/*------------------------------------*\
  #RESPONSIVE STICKY FOOTER
/*------------------------------------*/

html,
body
    display: table
    height: 100%
    width: 100%

footer
    display: table-row
    height: 1px
    
/*------------------------------------*\
  #SIDE MENU
/*------------------------------------*/

.page-nav
    position: fixed
    background-color: gray
    transition: transform .3s
    width: 300px
    height: 100vh
    overflow-x: hidden
    overflow-y: auto
    z-index: 2
    transform: translateX(-300px)

.mask
    position: fixed
    top: 0
    left: 0
    overflow: hidden
    width: 0
    height: 0
    background-color: #000
    opacity: 0
    transition: opacity .3s, width 0s .3s, height 0s .3s
    z-index: 1

body
    transition: transform .3s
    &.menu-active
        transform: translateX(300px)
        overflow: hidden
        .mask
            width: 100%
            height: 100%
            opacity: 0.7
            transition: opacity .3s
            
/*------------------------------------*\
  #GALLERY IMG COVER
/*------------------------------------*/

.gallery
    margin-left: -15px
    margin-right: -15px
    text-align: center
    font-size: 0
    .item
        width: calc(33.3% - 30px)
        margin: 0 15px 15px
        display: inline-block
        overflow: hidden
        position: relative
        &:before
            content: ''
            display: block
            padding-top: 100%
    img
        max-width: none
        width: auto
        height: 100%
        min-height: 100%
        position: absolute
        top: 50%
        left: 50%
        transform: translate(-50%, -50%)
        
/*------------------------------------*\
  #SELECTOR EXAMPLES
/*------------------------------------*/

// "default" link styling example
// :not, currentColor examples

a[href]:not([class])
    text-decoration: none
    position: relative
    &:after
        transition: all .2s ease-in-out
        background-color: currentColor
        content: ''
        width: 0
        height: 1px
        position: absolute
        bottom: 0
        left: 0
        right: 0
        margin: 0 auto
    &:hover &:after
        width: 100%

// attribute value selector example

a[href*="facebook"]
    background-color: blue
    color: white

/*------------------------------------*\
  #RESPONSIVE TABLE
/*------------------------------------*/

// more info: http://allthingssmitty.com/2016/10/03/responsive-table-layout/

@media(max-width: 768px)

    table
        border: 0

        thead
            border: 0
            clip: rect(0 0 0 0)
            height: 1px
            margin: -1px
            overflow: hidden
            position: absolute
            padding: 0
            width: 1px
        tr
            display: block
            border-bottom: 3px solid blue
            margin-bottom: 10px
        td
            display: block
            text-align: right
            border-bottom: 1px solid blue
            &:before
                content: attr(data-label)
                float: left
                font-weight: bold
                text-transform: uppercase
            &:last-child
                border-bottom: 0