StylifyCSS.com - Write CSS faster

<!--
stylify-components
	'image': `
		height:100px
		width:auto
		border-radius:4px
		transition:.3s
		margin:0_8px
		hover:scale:1.1
	`
/stylify-components
-->
<img src="/images/p1.jpg" class="image">
<img src="/images/p2.jpg" class="image">

.image:hover{
	scale: 1.1
}
.image{
	height: 100px
}
.image{
	width: auto
}
.image{
	border-radius: 4px
}
.image{
	transition: .3s
}
.image{
	margin: 0 8px
}

.vq:hover{
	scale: 1.1
}
.vq{
	height: 100px
}
.vq{
	width: auto
}
.vq{
	border-radius: 4px
}
.vq{
	transition: .3s
}
.vq{
	margin: 0 8px
}

<!--
stylify-components
	'image': `
		height:100px
		width:auto
		border-radius:4px
		transition:.3s
		margin:0_8px
		hover:scale:1.1
	`
/stylify-components
-->
<img src="/images/p1.jpg" class="vq">
<img src="/images/p2.jpg" class="vq">

<!--
stylify-customSelectors
	img: `
		height:100px
		width:auto
		border-radius:4px
		transition:.3s
		hover:scale:1.1
	`
/stylify-customSelectors
-->
<img src="/images/p3.jpg" class="[&+img]{margin-left:8px}">
<img src="/images/p4.jpg">

img:hover{
	scale: 1.1
}
img{
	height: 100px
}
img{
	width: auto
}
img{
	border-radius: 4px
}
img{
	transition: .3s
}
.\[\&\+img\]\{margin-left\:8px\}+img{
	margin-left: 8px
}

img:hover{
	scale: 1.1
}
img{
	height: 100px
}
img{
	width: auto
}
img{
	border-radius: 4px
}
img{
	transition: .3s
}
.vs+img{
	margin-left: 8px
}

<!--
stylify-customSelectors
	img: `
		height:100px
		width:auto
		border-radius:4px
		transition:.3s
		hover:scale:1.1
	`
/stylify-customSelectors
-->
<img src="/images/p3.jpg" class="vs">
<img src="/images/p4.jpg">

<!--
stylify-variables
	height: '120px',
	radius: '4px',
	scale: '1.1'
/stylify-variables
-->
<img src="/images/p3.jpg" class="
	width:auto
	transition:.3s
	height:$height
	border-radius:$radius
	hover:scale:$scale
">

:root {
	--height: 120px;
	--radius: 4px;
	--scale: 1.1;
}
.hover\:scale\:\$scale:hover{
	scale: var(--scale)
}
.width\:auto{
	width: auto
}
.transition\:\.3s{
	transition: .3s
}
.height\:\$height{
	height: var(--height)
}
.border-radius\:\$radius{
	border-radius: var(--radius)
}

:root {
	--height: 120px;
	--radius: 4px;
	--scale: 1.1;
}
.vt:hover{
	scale: var(--scale)
}
.cw{
	width: auto
}
.dr{
	transition: .3s
}
.vu{
	height: var(--height)
}
.vv{
	border-radius: var(--radius)
}

<!--
stylify-variables
	height: '120px',
	radius: '4px',
	scale: '1.1'
/stylify-variables
-->
<img src="/images/p3.jpg" class="
	cw
	dr
	vu
	vv
	vt
">

<!--
	Screens can be static: sm, lg, md
	Dynamic: miw640px, rng400px-800px
	Combined using logical operands
	- lg&&landscape
	- sm||lg
-->

<img src="/images/p2.jpg" width="120" height="120" class="
	object-fit:cover

	border-radius:4px
	sm:border-radius:12px
	minw600px:border-radius:24px
	lg||landscape:border-radius:120px
">

.object-fit\:cover{
	object-fit: cover
}
.border-radius\:4px{
	border-radius: 4px
}

@media (min-width: 600px) {
.minw600px\:border-radius\:24px{
	border-radius: 24px
}
}

@media (min-width: 640px) {
.sm\:border-radius\:12px{
	border-radius: 12px
}
}

@media (min-width: 1024px), (orientation: landscape) {
.lg\|\|landscape\:border-radius\:120px{
	border-radius: 120px
}
}

.ch{
	object-fit: cover
}
.z{
	border-radius: 4px
}

@media (min-width: 600px) {
.vx{
	border-radius: 24px
}
}

@media (min-width: 640px) {
.vw{
	border-radius: 12px
}
}

@media (min-width: 1024px), (orientation: landscape) {
.vy{
	border-radius: 120px
}
}

<!--
	Screens can be static: sm, lg, md
	Dynamic: miw640px, rng400px-800px
	Combined using logical operands
	- lg&&landscape
	- sm||lg
-->

<img src="/images/p2.jpg" width="120" height="120" class="
	ch

	z
	vw
	vx
	vy
">