Less 代码通常是拿来讲某个 mixin 或 guard 的,这两样在图片上指着说,都比用文字描述容易。
Codeshot 会根据你粘贴的代码识别 Less,不存在选错语言的问题。下面是同一段代码在内置 30 款主题中的三款下的效果,由应用自身的样式表渲染。
Less
不必离开 Mac,就能把 Less 代码片段变成值得分享的图片。
Less 代码通常是拿来讲某个 mixin 或 guard 的,这两样在图片上指着说,都比用文字描述容易。
Codeshot 会根据你粘贴的代码识别 Less,不存在选错语言的问题。下面是同一段代码在内置 30 款主题中的三款下的效果,由应用自身的样式表渲染。
@ink: #0d0d10;
@radius: 14px;
.card(@shadow: 0 18px 40px rgba(23, 23, 32, 0.12)) {
border-radius: @radius;
box-shadow: @shadow;
color: @ink;
}
.snapshot { .card(); }
@ink: #0d0d10;
@radius: 14px;
.card(@shadow: 0 18px 40px rgba(23, 23, 32, 0.12)) {
border-radius: @radius;
box-shadow: @shadow;
color: @ink;
}
.snapshot { .card(); }
@ink: #0d0d10;
@radius: 14px;
.card(@shadow: 0 18px 40px rgba(23, 23, 32, 0.12)) {
border-radius: @radius;
box-shadow: @shadow;
color: @ink;
}
.snapshot { .card(); }
颜色值和变量才是有意思的部分。中性的主题能让它们保持清晰,而不是跟它们抢戏。
让图片随内容自适应,或锁定一个比例——1:1、4:3、3:2、16:9、9:16、2:3 或 3:4——然后以 1×、2× 或 3× 导出,在 Retina 屏上依然清晰。用 ⌘⇧C 直接复制到剪贴板,或用 ⌘S 保存。
查看全部 30 款主题对比,或阅读完整流程。
一切都在你的 Mac 上完成,代码不会外传。