Skip to content

Instantly share code, notes, and snippets.

@Efetivos
Created July 4, 2018 14:09
Show Gist options
  • Select an option

  • Save Efetivos/c88ca1eea4af73622fb59a8ed3235d22 to your computer and use it in GitHub Desktop.

Select an option

Save Efetivos/c88ca1eea4af73622fb59a8ed3235d22 to your computer and use it in GitHub Desktop.
Alias Mixins | Sass
$color: #BE8867
$colorStrong: #d5a293
//font-family: 'Cormorant', serif;
@mixin serif
font-family: 'nc_font', serif
@mixin sans
font-family: 'Source Sans Pro', sans-serif
@mixin mobile
@media only screen and (max-width: 960px)
@content
@mixin tablet
@media only screen and (min-width: 580px) and (max-width: 1024px)
@content
@mixin desk
@media only screen and (min-width: 1025px)
@content
@mixin hd
@media only screen and (min-width: 1800px)
@content
@mixin color-10
background-color: darken($color, 10%)
@mixin color-20
background-color: darken($color, 20%)
@mixin hw100p
width: 100%
height: 100%
@mixin hw100v
width: 100vw
height: 100vh
@mixin flex-center-col
display: flex
justify-content: center
align-items: center
flex-direction: column
@mixin flex-center
display: flex
justify-content: center
align-items: center
html
-webkit-tap-highlight-color: rgba(0,0,0,0)
@mixin resetbtn
background: none repeat scroll 0 0 transparent
border: medium none
border-spacing: 0
color: #26589F
outline: none
.e-white
background-color: #fff
.t-white
color: #fff
.e-black
background-color: #000
.t-black
color: #000
.e-color
background-color: $color
.fill-color
fill: $color
.t-color
color: $color
.t-color-strong
color: $colorStrong
.e-gray
background-color: #aaa
.t-gray
color: #aaa
.e-flex
@include flex-center
.e-flex-col
@include flex-center-col
.e-flex-wrap
display: flex
flex-wrap: wrap
justify-content: center
.e-rel
position: relative
.e-abs
position: absolute
.e-fixe
position: fixed
.e-wp
width: 100%
.e-hp
height: 100%
.e-85
width: 85vw
.e-wvw
width: 100vw
.e-hvh
height: 100vh
.e-dn
display: none
.e-img-fit
object-fit: cover
.e-serif
@include serif
.e-sans
@include sans
.e-hidde
overflow: hidden
.e-cur
cursor: pointer
h1
@include serif
font-size: 24px
@include desk
font-size: 36px
p
@include sans
font-weight: 300
margin-top: 45px
font-size: 14px
line-height: 22px
h2
@include sans
.e-upper
text-transform: uppercase
button
@include resetbtn
cursor: pointer
body
overflow-x: hidden
.t-light
font-family: SaolDisplay-Light
.t-italic
font-family: 'nc_font', serif
.t-bold
font-weight: 700
.t-stroke-color
-webkit-text-stroke: 2px $color
color: transparent
.t-stroke-white
-webkit-text-stroke: 2px white
color: transparent
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment