This extension provide you shorthand CSS snippets for VS Code. It's support CSS/SCSS/LESS currently.
If the extension does not working normally. Please check the Snippet Suggestions value in VS Code setting. inline/top value are recommended, otherwise the snippets will be hidden or at the bottom of the suggestion box.
You can check the list for detail info.
| Prefix | CSS Snippet Content |
|---|---|
ai |
align-items : flex-start; |
aib |
align-items : baseline; |
aic |
align-items : center; |
aifs |
align-items : flex-start; |
aife |
align-items : flex-end; |
ais |
align-items : stretch; |
as |
align-self : flex-start; |
ani |
animation : name 1s linear; |
anide |
animation-delay : 1s; |
anidi |
animation-direction : alternate; |
anidu |
animation-duratuion : 1s; |
anifm |
animation-fill-mode : forwards; |
aniic |
animation-iteration-count: infinite; |
anin |
animation-name : name; |
anips |
animation-play-state : paused; |
anitf |
animation-timing-function: linear; |
bg |
background : #fff; |
bga |
background-attachment : fixed; |
bgc |
background-color : #fff; |
bgcl |
background-clip : border-box; |
bgi |
background-image : url("background.jpg"); |
bgo |
background-origin : border-box; |
bgp |
background-position : left top; |
bgr |
background-repeat : no-repeat; |
bgrr |
background-repeat : repeat; |
bgrx |
background-repeat : repeat-x; |
bgry |
background-repeat : repeat-y; |
bgrn |
background-repeat : no-repeat; |
bgs |
background-size : cover; |
bor |
border : 1px solid #eee; |
born |
border : none; |
borc |
border-color : #eee; |
bors |
border-style : solid; |
borw |
border-width : 1px; |
borb |
border-bottom : 1px solid #eee; |
borl |
border-left : 1px solid #eee; |
borr |
border-right : 1px solid #eee; |
bort |
border-top : 1px solid #eee; |
br |
border-radius : 2px; |
bot |
bottom : 0; |
bos |
box-shadow : 1px 1px 1px 1px rgba(0, 0, 0, .5); |
boz |
box-sizing : border-box; |
clr |
clear : both; |
col |
color : #333333; |
con |
content : ''; |
cur |
cursor : auto; |
curp |
cursor : pointer; |
curd |
cursor : default; |
dis |
display : none; |
disb |
display : block; |
disi |
display : inline-block; |
disn |
display : none; |
disf |
display : flex; |
disif |
display : inline-flex; |
disg |
display : grid; |
disig |
display : inline-grid; |
flex |
flex : 1 1 auto; |
fle |
flex : 1 1 auto; |
fld |
flex-direction : row; |
fldr |
flex-direction : row; |
fldc |
flex-direction : column; |
flf |
flex-flow : row, wrap; |
flw |
flex-wrap : wrap; |
fl |
float : left; |
fll |
float : left; |
flr |
float : right; |
fln |
float : none; |
ff |
font-family : arial; |
fz |
font-size : 12px; |
fst |
font-style : italic; |
fsti |
font-style : italic; |
fstn |
font-style : normal; |
fsto |
font-style : oblique; |
fw |
font-weight : bold; |
fwb |
font-weight : bold; |
fwl |
font-weight : light; |
fwn |
font-weight : normal; |
ft |
font : 12px/1.5; |
ga |
grid-area : some-grid-area; |
gc |
grid-columns : 1; |
gr |
grid-rows : 1; |
gta |
grid-template-area : some-grid-area; |
gtc |
grid-template-columns : 1fr; |
gtcre |
grid-template-columns : repeat(auto-fill, minmax(${0:300px}, 1fr)); |
gtr |
grid-template-rows : 1fr; |
hei |
height : 1px; |
jc |
justify-content : flex-start; |
jcfe |
justify-content : flex-end; |
jcfs |
justify-content : flex-start; |
jcc |
justify-content : center; |
jcsa |
justify-content : space-around; |
jcsb |
justify-content : space-between; |
lis |
list-style : disc outside; |
lisp |
list-style-position : outside; |
list |
list-style-type : disc; |
listc |
list-style-type : circle; |
listd |
list-style-type : disc; |
listlr |
list-style-type : lower-roman; |
listn |
list-style-type : none; |
lists |
list-style-type : square; |
listur |
list-style-type : upper-roman; |
lef |
left : 0; |
lh |
line-height : 1.5; |
ls |
letter-spacing : 2px; |
lsn |
letter-spacing : normal; |
mar |
margin : 0; |
marb |
margin-bottom : 0; |
marl |
margin-left : 0; |
marr |
margin-right : 0; |
mart |
margin-top : 0; |
mara |
margin : 0 auto; |
mih |
min-height : 1px; |
miw |
min-width : 1px; |
mah |
max-height : 1px; |
maw |
max-width : 1px; |
opa |
opacity : 0; |
ov |
overflow : visible; |
ova |
overflow : auto; |
ovh |
overflow : hidden; |
ovs |
overflow : scroll; |
ovv |
overflow : visible; |
pad |
padding : 0; |
padb |
padding-bottom : 0; |
padl |
padding-left : 0; |
padr |
padding-right : 0; |
padt |
padding-top : 0; |
pos |
position : relative; |
posa |
position : absolute; |
posf |
position : fixed; |
posr |
position : relative; |
poss |
position : sticky; |
rig |
right : 0; |
ta |
text-align : center; |
tac |
text-align : center; |
tal |
text-align : left; |
tar |
text-align : right; |
td |
text-decoration : none; |
tdu |
text-decoration : underline; |
tdn |
text-decoration : none; |
tdl |
text-decoration : line-through; |
ti |
text-indent : 2em; |
ts |
text-shadow : 1px 1px 1px 1px rgba(0, 0, 0, .5); |
tt |
text-transform : capitalize; |
top |
top : 0; |
va |
vertical-align : baseline; |
vab |
vertical-align : bottom; |
vam |
vertical-align : middle; |
vat |
vertical-align : top; |
vis |
visibility : visible; |
visv |
visibility : visible; |
vish |
visibility : hidden; |
wb |
word-break : break-all; |
wid |
width : 0; |
wida |
width : auto; |
ws |
white-space : nowrap; |
wsn |
white-space : nowrap; |
wsp |
white-space : pre; |
ww |
word-wrap : break-word; |
zi |
z-index : -1; |
imp |
@import 'filename'; |
inc |
@include mixin; |
key |
@keyframes name {}; |
med |
@media screen and (max-width: 300px) {} |
mix |
@mixin name {} |
! |
!important |
i |
!important |