StylifyCSS.com - 更快地编写CSS

更快地编写CSS

Stylify使用类似CSS的选择器color:blue, width:640px, margin:0_auto连同变量、组件、自定义选择器以根据您编写的内容动态地生成优化的CSS。

零学习曲线。不要把时间浪费在研究CSS框架上
减少HTML/CSS文件之间的切换
自动和极度调谐的CSS优化。
简单的CSS 布局/页面的捆绑式分割。
轻松地可配置和可扩展
无缝的安装。
迁移指南来自其他框架和库的迁移指南
预备、复制和粘贴、无头组件等

<!--
Edit Me 😎!
Write selectors as CSS property:value
Use _ for a space and ^ for a quote
-->
<img src="/images/p1.jpg" class="
		height:120px
		width:auto
		border-radius:4px
		transition:.3s
		hover:scale:1.1
">

<!--
Edit Me 😎!
Write selectors as CSS property:value
Use _ for a space and ^ for a quote
-->
<img src="/images/p1.jpg" class="
		height:120px
		width:auto
		border-radius:4px
		transition:.3s
		hover:scale:1.1
">

.border-radius\:4px{
	border-radius: 4px
}
.height\:120px{
	height: 120px
}
.hover\:scale\:1\.1:hover{
	scale: 1.1
}
.transition\:\.3s{
	transition: .3s
}
.width\:auto{
	width: auto
}

.z{
	border-radius: 4px
}
.zp{
	height: 120px
}
.zo:hover{
	scale: 1.1
}
.dr{
	transition: .3s
}
.cw{
	width: auto
}

<!--
Edit Me 😎!
Write selectors as CSS property:value
Use _ for a space and ^ for a quote
-->
<img src="/images/p1.jpg" class="
		zp
		cw
		z
		dr
		zo
">

编辑开发CSS 生产CSS 生产HTML

<!--
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">

<!--
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{
	border-radius: 4px
}
.image{
	height: 100px
}
.image{
	margin: 0 8px
}
.image:hover{
	scale: 1.1
}
.image{
	transition: .3s
}
.image{
	width: auto
}

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

<!--
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="zq">
<img src="/images/p2.jpg" class="zq">

编辑开发CSS 生产CSS 生产HTML

<!--
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">

<!--
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{
	border-radius: 4px
}
img{
	height: 100px
}
.\[\&\+img\]\{margin-left\:8px\}+img{
	margin-left: 8px
}
img:hover{
	scale: 1.1
}
img{
	transition: .3s
}
img{
	width: auto
}

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

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

编辑开发CSS 生产CSS 生产HTML

<!--
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
">

<!--
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;
}
.border-radius\:\$radius{
	border-radius: var(--radius)
}
.height\:\$height{
	height: var(--height)
}
.hover\:scale\:\$scale:hover{
	scale: var(--scale)
}
.transition\:\.3s{
	transition: .3s
}
.width\:auto{
	width: auto
}

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

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

编辑开发CSS 生产CSS 生产HTML

<!--
	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
">

<!--
	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
">

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

@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
}
}

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

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

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

@media (min-width: 1024px), (orientation: landscape) {
.zy{
	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
	zw
	zx
	zy
">

/*
https://stylifycss.com/en/docs/stylify/compiler#helpers

Helpers can be used within selectors or macros.
For example color:lighten(#000,10) is helper
for lightening color.

You can define your own easily within helpers option.
*/
new Compiler({
	helpers: {
		textPropertyType(value) {
			if (value === 'bold') {
				return 'font-weight';
			} else if (value === 'italic') {
				return 'font-style'
			} else if (value.includes('$')) {
				return 'color';
			}
		},
	},
	macros: {
		'text:(\\S+)'(match) {
			const property = this.helpers.textPropertyType(
				match.getCapture(0)
			);

			return {[property]: match.getCapture(0)}
		}
	}
});

50% discount on .EU, .ONLINE, .STORE, .TECH, .SITE, .WEBSITE, .SPACE, .FUN domains.
Code DM241ERDTF

在一分钟内开始使用Stylify CSS和您最喜欢的工具

查看集成项目

从其他CSS框架和CSS-in-JS库轻松迁移到Stylify上

了解更多

预备的无头组件

复制&粘贴，无风格的组件，灵感来自于Material Design V3。

按钮

移动导航

开关

文本字段

分页

文章列表--类型1

对话框

信息

表格

查看组件

零学习曲线和更快的编码

使用类似于CSS的选择器，而不是编写CSS并在HTML和CSS文件之间切换。语法与CSS相似。使用_ 代替空格，使用^ 代替引用。

<h1 class="font-size:24px color:blue hover:color:lightblue lg:font-size:32px">
	Hello World!🎉
</h1>

自动和极度调整的CSS和HTML优化

CSS被动态地生成到CSS文件中，它被优化，HTML被处理。没有未使用的CSS被生成。不需要清除CSS。不需要创建CSS文件。由于连接选择器的内部算法，几乎没有重复的生成。

<!-- Production HTML -->
<h1 class="a b c d">
	Hello World!🎉
</h1>

/* Production CSS */
.a {font-size:24px}
.b {color:blue}
.c:hover {color:lightblue}

@media (min-width: 1024px) {
  .d{ font-size: 32px }
}

简单的CSS捆绑拆分

CSS捆绑可以被分割成多个文件。这比手动组合CSS更有效，而且还能使CSS输出更小。

const bundles = [
	// Use Glob syntax to map files
	{ files: [ 'templates/**/*.html' ], outputFile: 'global.css },
	// Split CSS for layouts
	{ files: [ 'layout.html' ], outputFile: 'layout.css' },
	// And for pages
	{ files: [ 'index.html' ], outputFile: 'index.css' }
];

直观的配置

定义可重复使用的变量、组件和自定义选择器来简化开发。变量值在每个屏幕上都可以是不同的。这允许你在黑暗模式/光明模式和桌面/移动模式下改变它。

const config = {
	variables: {
		primary: '#01befe',
		titleFontSize: '24px',
		// Variables based on color scheme dark/light
		dark: {
			primary: '#fff'
		},
		// Variables based on screen size
		'minw640px': {
			titleFontSize: 38px
		}
	},
	components: {
		'section': 'max-width:1240px margin:0_auto_24px_auto',
		// Dynamic components
		'title(?:--(\\S+))?': ({ matches, variables, helpers, dev }) => {
			const color = matches[1] ?? '#000';
			return `font-size:24px${color ? ` color:${color}` : ''}`;
		},
	},
	customSelectors: {
		'*': 'box-sizing:border-box',
		'h1,h2': 'margin-top:0 margin-bottom:12px md:margin-bottom:24px'
	},
	macros: {
		'ml:(\S+?)': (match) => {
			// ml:24px => will create => margin-left: 24px
			return {'margin-left': match.getCapture(0)}
		}
	},
}

在文件中配置变量、组件和全局选择器，在它们被使用的地方进行配置

组件、变量和全局选择器可以被定义在一个文件中，在那里它们被使用。这将组件的CSS和HTML封装到一个文件中。

<!--
stylify-variables
	blue: '#01befe'
/stylify-variables

stylify-components
	subtitle: 'font-size:24px margin-bottom:12px color:$blue'
/stylify-components
-->
<h2 class="subtitle">Subtitle 1</h2>
<h2 class="subtitle">Subtitle 2</h2>

用钩子扩展功能

钩子可以用来扩展功能并在编译过程中修改输出。在编译器、捆绑器和浏览器中的运行时都有挂钩。

// This hook example converts px font size
// to REM and automatically calculates line height.
import {hooks} from '@stylify/stylify';

hooks.addListener('compiler:newMacroMatch', ({selectorProperties}) => {
	const pixelUnit = selectorProperties['font-size'];

	if (typeof pixelUnit === 'undefined' || !pixelUnit.endsWith('px')) {
		return;
	}

	const pixelFontSize = Number(pixelUnit.slice(0,-2));
	const remFontSize = pixelFontSize / 10;

	selectorProperties['font-size'] = `${remFontSize}rem`;
	selectorProperties['line-height'] = `${remFontSize * (pixelFontSize >= 28 ? 1.2 : 1.7)}rem`;
});