scss.snippets

######################################################
#
# SCSS Snippets
# Author: Benjamin Charity
# https://github.com/benjamincharity/dot-files/blob/master/snippets/scss.snippets
#
######################################################
#
#
#
#
#
# Margin
#
snippet m
margin: ${1:0 auto};${2}
endsnippet
snippet mr
margin-right: ${1:0};
endsnippet
snippet ml
margin-left: ${1:0};
endsnippet
snippet mt
margin-top: ${1:0};
endsnippet
snippet mb
margin-bottom: ${1:0};
endsnippet
#
#
#
# Padding
#
snippet pr
padding-right: ${1:0};
endsnippet
snippet pl
padding-left: ${1:0};
endsnippet
snippet pt
padding-top: ${1};
endsnippet
snippet pb
padding-bottom: ${1:0};
endsnippet
snippet p
padding: ${1:0};
endsnippet
#
#
#
# Colors
#
snippet c
color: ${1:#bada55};
endsnippet
snippet cg
color: $color-gray;${1}
endsnippet
snippet cdg
color: $color-dark-gray;${1}
endsnippet
snippet clg
color: $color-light-gray;${1}
endsnippet
snippet cw
color: $color-white;${1}
endsnippet
snippet cb
color: $color-black;${1}
endsnippet
snippet cp
color: $color-primary;${1}
endsnippet
snippet cps
color: $color-primary-shade;${1}
endsnippet
snippet cs
color: $color-secondary;${1}
endsnippet
snippet css
color: $color-secondary-shade;${1}
endsnippet
snippet cts
color: $color-tertiary-shade;${1}
endsnippet
#
#
#
# Background
#
snippet bg
background: ${1:skyblue};${2}
endsnippet
snippet bgi
background-image: url('${1:/i/image.png}');${2}
endsnippet
snippet bgc
background-color: ${1:#bada55};${2}
endsnippet
snippet bgct
background-color: transparent;${1}
endsnippet
snippet bgp
background-position: ${1:center};
endsnippet
snippet bgs
background-size: ${1:cover};
endsnippet
snippet bgr
background-repeat: ${1:no-repeat};
endsnippet
snippet gradient
@include background-image(linear-gradient(${1:white}, #cccccc 30%, #bbbbbb 70%, #aaaaaa));
endsnippet
#
#
#
# Transition
#
snippet trans
@include single-transition;
endsnippet
snippet cust
@include custom_transition(${1});${2}
endsnippet
snippet custc
@include custom_transition(color);${1}
endsnippet
snippet custo
@include custom_transition(opacity);${1}
endsnippet
snippet transfull
-webkit-transition: all .2s ease-in-out;
-moz-transition   : all .2s ease-in-out;
-ms-transition    : all .2s ease-in-out;
-o-transition     : all .2s ease-in-out;
transition        : all .2s ease-in-out;${1}
endsnippet
#
#
#
# Border
#
snippet brad
border-radius: ${1:50%};${2}
endsnippet
snippet bradfull
border-radius: ${1:2px} ${2:2px} ${3:2px} ${4:2px};${5}
endsnippet
snippet brtl
border-top-left-radius: ${1:2px};${2}
endsnippet
snippet brtr
border-top-right-radius: ${1:2px};${2}
endsnippet
snippet brbr
border-bottom-right-radius: ${1:2px};${2}
endsnippet
snippet brbl
border-bottom-left-radius: ${1:2px};${2}
endsnippet
snippet bo
border: ${1:1}px solid ${2:red};${3}
endsnippet
snippet bon
border: 0;
endsnippet
snippet bb
border-bottom: ${1:1}px ${2:solid} ${3:red};
endsnippet
snippet bbn
border-bottom: 0;
endsnippet
snippet bl
border-left: ${1:1}px ${2:solid} ${3:red};
endsnippet
snippet bln
border-left: 0;
endsnippet
snippet br
border-right: ${1:1}px ${2:solid} ${3:red};
endsnippet
snippet brn
border-right: 0;
endsnippet
snippet bt
border-top: ${1:1}px ${2:solid} ${3:red};
endsnippet
snippet btn
border-top: 0;
endsnippet
snippet boc
border-color: ${1:red};${2}
endsnippet
snippet bocfull
border-color: ${1:red} ${2:red} ${3:red} ${4:red};
endsnippet
snippet bw
border-width: ${1:1px} ${2:1px} ${3:1px} ${4:1px};
endsnippet
#
#
#
# Height / Width
#
snippet h
height: ${1:100%};${2}
endsnippet
snippet w
width: ${1:100%};${2}
endsnippet
snippet mh
max-height: ${1:100%};${2}
endsnippet
snippet minh
min-height: ${1:50}${2:px};${3}
endsnippet
snippet mw
max-width: ${1:100%};${2}
endsnippet
snippet minw
min-width: ${1:100}${2:px};${3}
endsnippet
#
#
#
# Box Shadow
#
snippet bs
box-shadow: ${1:0} ${2:0} ${3:4px} ${4:0} ${5:rgba(0, 0, 0, .8)};${6}
endsnippet
snippet bsn
box-shadow: none;${1}
endsnippet
snippet bsfull
-webkit-box-shadow : 0 0 10px 0 rgb(51,51,51);
-moz-box-shadow    : 0 0 10px 0 rgb(51,51,51);
-ms-box-shadow     : 0 0 10px 0 rgb(51,51,51);
-o-box-shadow      : 0 0 10px 0 rgb(51,51,51);
box-shadow         : 0 0 10px 0 rgb(51,51,51);${1}
endsnippet
#
#
#
# Position
#
snippet pos
position: absolute;${1}
endsnippet
snippet posr
position: relative;${1}
endsnippet
snippet posf
position: fixed;${1}
endsnippet
snippet poss
position: static;${1}
endsnippet
snippet b
bottom: ${1:0};${2}
endsnippet
snippet l
left: ${1:0};${2}
endsnippet
snippet r
right: ${1:0};${2}
endsnippet
snippet t
top: ${1:0};${2}
endsnippet
#
#
#
# Display
#
snippet d
display: none;${1}
endsnippet
snippet dn
display: none;${1}
endsnippet
snippet db
display: block;${1}
endsnippet
snippet di
display: inline;${1}
endsnippet
snippet dib
display: inline-block;${1}
endsnippet
snippet dit
display: inline-table;${1}
endsnippet
snippet dt
display: table;${1}
endsnippet
snippet dtcol
display: table-column;${1}
endsnippet
snippet dtcolg
display: table-column-group;${1}
endsnippet
snippet dthg
display: table-header-group;${1}
endsnippet
snippet dtfg
display: table-footer-group;${1}
endsnippet
snippet dtc
display: table-cell;${1}
endsnippet
snippet dtr
display: table-row;${1}
endsnippet
snippet dtrg
display: table-row-group;${1}
endsnippet
#
#
#
# Fonts
#
snippet fw
font-weight: ${1:600};${2}
endsnippet
snippet fwn
font-weight: normal;${1}
endsnippet
snippet fwb
font-weight: bold;${1}
endsnippet
snippet fwl
font-weight: light;${1}
endsnippet
snippet fs
font-size: ${1:1em};${2}
endsnippet
snippet fst
font-style: italic;${1}
endsnippet
snippet ff
font-family: ${1:$family};${2}
endsnippet
snippet ffsans
font-family: Arial, Helvetica, Verdana, sans-serif;${1}
endsnippet
snippet ffserif
font-family: Georgia, Times New Roman, Times, serif;${1}
endsnippet
#
#
#
# Clear
#
snippet cl
clear: left;${1}
endsnippet
snippet cr
clear: right;${1}
endsnippet
snippet clb
clear: ${1:both};${2}
endsnippet
#
#
#
# Overflow
#
snippet o
overflow: hidden;${1}
endsnippet
snippet ov
overflow: visible;${1}
endsnippet
snippet oa
overflow: auto;${1}
endsnippet
snippet oi
overflow: inherit;${1}
endsnippet
#
#
#
# Float
#
snippet fl
float: left;${1}
endsnippet
snippet fr
float: right;${1}
endsnippet
snippet fn
float: none;${1}
endsnippet
#
#
#
# Text
#
snippet ta
text-align: ${1:center};${2}
endsnippet
snippet tac
text-align: center;${1}
endsnippet
snippet taj
text-align: justify;${1}
endsnippet
snippet tal
text-align: left;${1}
endsnippet
snippet tar
text-align: right;${1}
endsnippet
snippet td
text-decoration: none;${1}
endsnippet
snippet tdu
text-decoration: underline;${1}
endsnippet
snippet ts
text-shadow: ${1:1}px ${2:1}px ${3:0} ${4:rgb(0,0,0)};${5}
endsnippet
snippet tt
text-transform: ${1:uppercase};${2}
endsnippet
snippet ttu
text-transform: uppercase;${1}
endsnippet
snippet ttl
text-transform: lowercase;${1}
endsnippet
snippet ttn
text-transform: none;${1}
endsnippet
snippet ttc
text-transform: capitalize;${1}
endsnippet
snippet ti
text-indent: 100%;${1}
endsnippet
snippet tin
text-indent: ${1:0};${2}
endsnippet
snippet to
text-overflow: ${1:ellipsis};${2}
endsnippet
snippet toe
text-overflow: ellipses;${1}
endsnippet
snippet toc
text-overflow: clip;${1}
endsnippet
snippet tos
text-overflow: string;${1}
endsnippet
#
#
#
# Cursor
#
snippet cu
cursor: ${1:pointer};${2}
endsnippet
snippet cd
cursor: ${1:default};${2}
endsnippet
#
#
#
# Visibility
#
snippet v
visibility: ${1:hidden};${2}
endsnippet
snippet vv
visibility: visible;${1}
endsnippet
#
#
#
# Pointer Events
#
snippet point
pointer-events: ${1:none};${2}
endsnippet
snippet pointn
pointer-events: none;${1}
endsnippet
snippet pointa
pointer-events: auto;${1}
endsnippet
snippet pointi
pointer-events: inherit;${1}
endsnippet
#
#
#
# Content
#
snippet cont
content: '';${1}
endsnippet
#
#
#
# White Space
#
snippet ws
white-space: ${1:nowrap};${2}
endsnippet
snippet wsnw
white-space: nowrap;${1}
endsnippet
snippet wsw
white-space: wrap;${1}
endsnippet
snippet wsn
white-space: normal;${1}
endsnippet
#
#
#
# Word Break
#
snippet wb
word-break: ${1:break-word};${2}
endsnippet
snippet wbb
word-break: break-word;${1}
endsnippet
snippet wbn
word-break: normal;${1}
endsnippet
#
#
#
# Hover
#
snippet hover
&:focus,
&:hover {
	${1}
}
endsnippet
#
#
#
# Em Calc
#
snippet em
emCalc(${1:12}px)${2}
endsnippet
#
#
#
# REM
#
snippet rem
@include rem('${1:font-size}',${2:12}px);${3}
endsnippet
snippet remfs
@include rem('font-size',${1:12}px);${2}
endsnippet
snippet remlh
@include rem('line-height',${1:12}px);${2}
snippet remp
@include rem('padding',${1:12}px);${2}
endsnippet
snippet rempt
@include rem('padding-top',${1:12}px);${2}
endsnippet
snippet rempb
@include rem('padding-bottom',${1:12}px);${2}
endsnippet
snippet rempl
@include rem('padding-left',${1:12}px);${2}
endsnippet
snippet rempr
@include rem('padding-right',${1:12}px);${2}
endsnippet
snippet remm
@include rem('margin',${1:12}px);${2}
endsnippet
snippet remmt
@include rem('margin-top',${1:12}px);${2}
endsnippet
snippet remmb
@include rem('margin-bottom',${1:12}px);${2}
endsnippet
snippet remml
@include rem('margin-left',${1:12}px);${2}
endsnippet
snippet remmr
@include rem('margin-right',${1:12}px);${2}
endsnippet
snippet remti
@include rem('text-indent',${1:12}px);${2}
endsnippet
snippet remt
@include rem('top',${1:12}px);${2}
endsnippet
snippet remb
@include rem('bottom',${1:12}px);${2}
endsnippet
snippet reml
@include rem('left',${1:12}px);${2}
endsnippet
snippet remr
@include rem('right',${1:12}px);${2}
endsnippet
snippet remh
@include rem('height',${1:100}${2:px});${3}
endsnippet
snippet remmh
@include rem('max-height',${1:100}px);${2}
endsnippet
snippet remw
@include rem('width',${1:500}px);${2}
endsnippet
snippet remmw
@include rem('max-width',${1:100}${2:px});${3}
endsnippet
#
#
#
# Clear
#
snippet clear
@include clear;${1}
endsnippet
snippet clearie
@include clear-ie;${1}
endsnippet
#
#
#
# Vertical Align
#
snippet va
vertical-align: ${1:bottom};${2}
endsnippet
snippet vab
vertical-align: bottom;${1}
endsnippet
snippet vat
vertical-align: top;${1}
endsnippet
snippet vam
vertical-align: middle;${1}
endsnippet
snippet vaa
vertical-align: auto;${1}
endsnippet
#
#
#
# Pseudo Elements
#
snippet before
&::before {
	${1}
}
endsnippet
snippet beforeie
&:before {
	${1}
}
endsnippet
snippet after
&::after {
	${1}
}
endsnippet
snippet afterie
&:after {
	${1}
}
endsnippet
snippet active
&:active {
	${1}
}
endsnippet
snippet focus
&:focus {
	${1}
}
endsnippet
#
#
#
# Pseudo Selectors
#
snippet first
&:first-of-type {
	${1}
}
endsnippet
snippet last
&:last-of-type {
	${1}
}
endsnippet
snippet firstc
&:first-child {
	${1}
}
endsnippet
snippet lastc
&:last-child {
	${1}
}
endsnippet
snippet nth
&:nth-of-type(${1:n+2}) {
	${2}
}
endsnippet
#
#
#
# State classes
#
snippet isactive
&.is--active {
	${1}
}
endsnippet
snippet isopen
&.is--open {
	${1}
}
endsnippet
snippet ishidden
&.is--hidden {
	${1}
}
endsnippet
snippet isdisabled
&.is--disabled {
	${1}
}
endsnippet
snippet isvisible
&.is--visible {
	${1}
}
endsnippet
snippet isselected
&.is--selected {
	${1}
}
endsnippet
#
#
#
# Lists
#
snippet lst
list-style-type: ${1:none};${2}
endsnippet
snippet lstn
list-style-type: none;${1}
endsnippet
snippet lstd
list-style-type: disc;${1}
endsnippet
snippet lstc
list-style-type: circle;${1}
endsnippet
snippet lsts
list-style-type: square;${1}
endsnippet
#
#
#
# Angular
#
snippet nganimate
.${1:pageEnter}-enter {

}

.${2:pageEnter}-enter-active {

}

.${3:pageEnter}-leave {

}

.${4:pageEnter}-leave-active {

}
endsnippet
#
#
#
# Grid
#
snippet rowc
@include row-container();${1}
endsnippet
snippet row
@include row();${1}
endsnippet
snippet col
@include col();${1}
endsnippet
snippet col1
@include col(1);${1}
endsnippet
snippet col2
@include col(2);${1}
endsnippet
snippet col3
@include col(3);${1}
endsnippet
snippet col4
@include col(4);${1}
endsnippet
snippet col5
@include col(5);${1}
endsnippet
snippet col6
@include col(6);${1}
endsnippet
snippet col7
@include col(7);${1}
endsnippet
snippet col8
@include col(8);${1}
endsnippet
snippet col9
@include col(9);${1}
endsnippet
snippet col10
@include col(10);${1}
endsnippet
snippet col11
@include col(11);${1}
endsnippet
snippet col12
@include col(12);${1}
endsnippet
snippet colf
@include first();${1}
endsnippet
snippet colr
@include resetFirst();${1}
endsnippet
snippet prepend
@include prepend(${1:1});${2}
endsnippet
snippet append
@include append(${1:1});${2}
endsnippet
#
#
#
# Mixins / Functions
#
snippet ext
@extend %${1:myStyle};
endsnippet
snippet inc
@include ${1:mixin};
endsnippet
snippet func
@function ${1:myFunction}(${2}) {
	@return ${3:myValue};
}${4}
endsnippet
snippet back
@include backface-flicker-fix();${1}
endsnippet
snippet vendor
@include vendor_prefix(
	${1:transform},
	${2:arguments}
);
endsnippet
#
#
#
# Documentation
#
snippet doc
//
//
//
// $${1:APP_BASE}
//
//
// @doc
//  ${2:__documentation__}
// @end
endsnippet
snippet section
///////////////////////////////////////////////////////
//
// ${1:sectionName}
//
///////////////////////////////////////////////////////${2}
endsnippet
snippet component
/////////////////////////////////////////////
//
// ${1:Component Name}
//
// Structure:
//   ${2:<div>}
endsnippet
#
#
#
# Breakpoint
#
snippet bp "Use a breakpoint mixin" m
@include bp(${1:5}) {
	${2}
}
endsnippet
#snippet bpm
#	@include breakpoint(mobile) {
#		${1}
#	}
#snippet bpmh
#	@include breakpoint(mobile-horizontal) {
#		${1}
#	}
#snippet bpt
#	@include breakpoint(horizontal) {
#		${1}
#	}
#snippet bpth
#	@include breakpoint(tablet-horizontal) {
#		${1}
#	}
#snippet bpd
#	@include breakpoint(desktop) {
#		${1}
#	}
#snippet bpdl
#	@include breakpoint(desktop-large) {
#		${1}
#	}
#snippet bpb
#	@include between-breakpoint(${1:min}, ${2:max}) {
#		${3}
#	}
#
#
#
# Breakpoints
#
snippet bkll
@include breakpoint(breakpoint-very-large) {
	${1}
}
endsnippet
snippet bkl
@include breakpoint(breakpoint-large) {
	${1}
}
endsnippet
snippet bkml
@include breakpoint(breakpoint-medium-large) {
	${1}
}
endsnippet
snippet bkm
@include breakpoint(breakpoint-medium) {
	${1}
}
endsnippet
snippet bks
@include breakpoint(breakpoint-only-small) {
	${1}
}
endsnippet
snippet break
@include breakpoint(${1:medium}) {
	${2}
}
endsnippet
snippet breakvl
@include breakpoint(verylarge) {
	${1}
}
endsnippet
snippet breakl
@include breakpoint(large) {
	${1}
}
endsnippet
snippet breakmid
@include breakpoint(mid) {
	${1}
}
endsnippet
snippet breakm
@include breakpoint(medium) {
	${1}
}
endsnippet
snippet breaks
@include breakpoint(small) {
	${1}
}
endsnippet

#
#
#
# Flex Box
#
snippet flexx "Layout as flex and set direction. row|row-reverse|column|column-reverse nowrap|wrap|wrap-reverse"
display: flex;
flex-flow: ${1:row} ${2:nowrap};${3}
endsnippet
snippet flexc "Define a flex component: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]"
flex: ${1:1} ${2:1} ${3:auto};${4}
endsnippet
snippet flex "Layout as flexbox"
display: flex;
endsnippet
snippet fd "Set layout direction: row|row-reverse|column|column-reverse"
flex-direction: column;
endsnippet
snippet flexf "Flex shorthand: row|row-reverse|column|column-reverse nowrap|wrap|wrap-reverse"
flex-flow: ${1:row} ${2:nowrap};${3}
endsnippet
### Justify Content
snippet jc "Justify flex content: flex-start|flex-end|center|space-between|space-around"
justify-content: ${1:center};${2}
endsnippet
snippet jcc
justify-content: center;${1}
endsnippet
snippet jcs
justify-content: flex-start;${1}
endsnippet
snippet jce
justify-content: flex-end;${1}
endsnippet
snippet jci
justify-content: inherit;${1}
endsnippet
snippet jcsa
justify-content: space-around;${1}
endsnippet
snippet jcsb
justify-content: space-between;${1}
endsnippet
### Align Items
snippet Flexa
@include flex_align(${1:center});${2}
endsnippet
snippet ai "Align flex items: flex-start|flex-end|center|baseline|stretch"
align-items: ${1:center};${2}
endsnippet
snippet aib
align-items: baseline;${1}
endsnippet
snippet aic
align-items: center;${1}
endsnippet
snippet aifs
align-items: flex-start;${1}
endsnippet
snippet aife
align-items: flex-end;${1}
endsnippet
snippet ais
align-items: stretch;${1}
endsnippet
snippet aii
align-items: initial;${1}
endsnippet
snippet shrink
flex-shrink: ${1:0};${2}
endsnippet
snippet grow
flex-grow: ${1:1};${2}
endsnippet
snippet flexw "Flex wrap: nowrap|wrap|wrap-reverse"
flex-wrap: ${1:wrap};${2}
endsnippet

# MIXINS
snippet Flex
@include flex_container(${1:vertical});${2}
endsnippet
snippet Flexv
@include flex_container(vertical);${1}
endsnippet
snippet Flexh
@include flex_container(horizontal);${1}
endsnippet
snippet Flexc
@include flex_component(${1});${2}
endsnippet
snippet Flexc0
@include flex_component(0);${1}
endsnippet
snippet Flexc1
@include flex_component(1);${1}
endsnippet
snippet Flexc2
@include flex_component(2);${1}
endsnippet
snippet Flexc3
@include flex_component(3);${1}
endsnippet
snippet Flexc4
@include flex_component(4);${1}
endsnippet
snippet Flexc5
@include flex_component(5);${1}
endsnippet
snippet Flexc6
@include flex_component(6);${1}
endsnippet
snippet Flexp
@include flex_pack(${1:center});${2}
endsnippet
#
#
#
# Various
#
snippet lh
line-height: ${1:1em};${2}
endsnippet
snippet ls
letter-spacing: ${1:1px};${2}
endsnippet
snippet out
outline: ${1:0};${2}
endsnippet
snippet breakword
@extend %breakWord;${1}
endsnippet
snippet hide
@include hideText;${1}
endsnippet
snippet op
opacity: ${1:1};
endsnippet
snippet z
z-index: ${1:1};
endsnippet
snippet im
!important${1}
endsnippet
snippet place
@include placeholders {
	${1}
}${2}
endsnippet
#
#
#
# IE
#
snippet pie
@include pie;${1}
endsnippet
snippet ie
@if $ie {
	${1:do ie thing}
} @else {
	${2:do non-ie thing}
}
endsnippet
#
#
#
# Functions
#
snippet pal "palette() function" m
palette(${1:white}${2})
endsnippet
snippet font "font() function" m
font(${1:avenir}${2})
endsnippet
snippet for "Sass for loop" m
@for $i from 1 through 8 {
	.col-#{$i} {
	}
}
endsnippet
snippet while "Sass while loop" m
@while ${1:$num} > ${2:0} {
	.module-#{$num} {
	}
}
endsnippet
snippet each "Sass each loop" m
@each ${1:$color} in ${2:$list} {
	.${3:photo-#{$color}} {
		background-color: #{$color};
	}
}
endsnippet
#
#
#
# Columns
#
snippet columns
@include columns(${1});${2}
endsnippet
snippet columnspan
@include column-span(${1:all});${2}
endsnippet
#
#
#
#
# Animations
#
snippet animate
@include animate(
	$name: ${1:AnimationName},
	$duration: ${2:300ms},
	$count: ${3:infinite},
	$delay: ${4:0}
);
endsnippet
#
#
#
#
# SCSS Lint
#
#snippet disable
#// sass-lint:disable ${1:IdSelector}
#// sass-lint:enable $1
#endsnippet
#snippet enable
#// sass-lint:enable ${1:IdSelector}
#endsnippet
#
#
#
#
# StyleLint
#
snippet disable "Disable a specific SCSS lint rule"
// stylelint-disable ${1:unit-no-unknown}
// stylelint-enable $1
endsnippet
snippet disableim "Disable SCSS no-important rule"
// stylelint-disable declaration-no-important
// stylelint-enable declaration-no-important
endsnippet
snippet disableline "Disable a rule for the next line"
// stylelint-disable-next-line ${1}
endsnippet
#
#
#
#
# File management
#
snippet import
@import '${1:./../scss/foo}';${2}
endsnippet
#
#
#
#
# Comments
#
# A standard nucleus comment
snippet com "Add a Nucleus comment" m
/**
 * ${1:The base font family}
 *
 * @nuclide ${2:Font Family}
 * @section ${3:Config > Typography}
 */${4}
endsnippet
# A mixin comment
snippet mixcom "Add a Nucleus mixin comment" m
/**
 * ${1:Put rounded borders around the element}
 *
 * @section ${2:Style Mixins}
 * @param ${3:$radius}
 *  ${4:This could be single line}
 * @example
 *  ${5:@include brc(3px);}
 */${6}
endsnippet