🚀 使用Stylify CSS为您的Nette Framework网站更快速地设计风格
用Stylify更快、更直观地给你的Nette框架网站设计风格。
用Stylify更快地为你的Nette Framework网站设计风格。不要研究选择器和语法。使用纯粹的CSS语法，获得生成的CSS，并对生产进行高级优化。
对于下面的例子，你可以查看一下Nette Framework集成实例。
🚀 Nette简介
Nette是一个由David Grudl制作的PHP框架，它是Symfony和Laravel的一个很好的替代品。它有一个惊人的模板系统，叫做Latte，使用与PHP类似的语法，并且默认有上下文敏感的转义（这是其他框架所没有的）。在我看来，它更容易学习，因为它默认有一个简单的结构，它没有依赖性，需要学习的模式更少。
💎 Stylify CSS简介
Stylify是一个库，它使用类似于CSS的选择器，根据你写的内容生成优化的实用优先的CSS。
- ✅ 类似CSS的选择器
- ✅ 不需要研究框架
- ✅ 花在文档上的时间更少
- ✅ 纠结&极小的CSS
- ✅ 不需要清除CSS
- ✅ 组件、变量、自定义选择器
- ✅ 它可以生成多个CSS捆绑包
我们也有一个关于Stylify CSS解决了哪些问题，以及为什么你应该尝试一下！
Nette安装
开始使用Nette的最简单方法是按照本指南使用Composer：
- 运行
composer create-project nette/web-project nette-blog。 - 进入项目目录
cd nette-log。 - 运行
php -S 0.0.0.0:80 -t www来启动网络。 - 网站应该可以在
http://localhost。
Stylify CSS设置
因为Nette默认没有任何捆绑程序，也没有任何javascript包，我们将使用Stylify CSS捆绑程序。
安装捆绑器 yarn add -D @stylify/bundler。
在项目根目录下创建bundles.js文件，内容如下：
const { nativePreset } = require('@stylify/stylify');
const { Bundler } = require('@stylify/bundler');
// 检测观察模式
const watchFiles = process.argv[process.argv.length - 1] === '--w';
const bundler = new Bundler({
compiler: {
// 用于生产的Mangle选择器
mangleSelectors: !watchFiles,
// 匹配n:class属性
selectorsAreas: [
'(?:^|\\s+)n:class="([^"]+)"',
'(?:^|\\s+)n:class=\'([^\']+)\''
]
},
watchFiles: watchFiles
});
bundler.bundle([
{
files: ['./app/Presenters/templates/@layout.latte'],
outputFile: './www/static/css/layout.css')
},
{
files: ['./app/Presenters/templates/Homepage/default.latte'],
outputFile: './www/static/css/homepage.css'.
}
]);上面的配置将产生两个包：
Layout- 全局使用Homepage- 只用于主页
当然，我们可以把整个项目的CSS生成一个文件。但这将使CSS变得不必要的大。
现在打开package.json文件，添加以下脚本：
"scripts": {
"build": "node bundles.js",
"watch": "node bundles.js --w"
}最后一步是编辑模板。打开App/Presenters/Templates/@layout.latte，添加布局CSS文件的链接：
<link rel="stylesheet" href="/static/css/layout.css">在App/Presenters/Templates/Homepage/default.latte中添加以下内容：
{block content}
<link rel="stylesheet" href="/static/css/homepage.css">
<div class="font-size:48px text-align:center">
你好，世界！🎉
</div>如果你运行yarn watch，Stylify CSS会生成CSS，并且会观察任何文件的变化。
组件
为了避免实用程序带来的臃肿模板，你可以在文件中直接配置 组件，在文件中使用content options(期望有javascript对象，没有括号)或在compiler config中使用。
首先，让我们添加全局的container组件。打开bundles.js，以及下面的内容：
const compilerConfig = {
components: {
container: 'max-width:1024px margin:0_auto'
}
}
const bundler = new Bundler({ /*...*/ });现在我们可以在整个项目中使用它。在我们的例子中，我们把它添加到布局中：
<main class="container">{include content}</main>在主页上，我们可以使用内容选项为标题添加一个本地组件：
{*
stylify-components
title: 'font-size:48px text-align:center'
/stylify-components
*}
{block content}
<link rel="stylesheet" href="/static/css/homepage.css">
<div class="title">你好，世界! 🎉</div>###变量 拥有干净灵活的代码，没有硬编码的值，总是一个好主意。变量可以用与组件相同的方式定义。让我们修改一下标题组件：
{*
stylify-variables
titleFontSize: '48px'
/stylify-variables
stylify-components
title: 'font-size:$titleFontSize text-align:center'
/stylify-components
*}
{block content}
{* ... *}映射文件
当一个模板包括一个组件或一个嵌套的模板部分时，我们可以使用stylify-files选项将其添加到包中。
让我们在default.latte旁边创建_content.latte模板部分，内容如下：
{*
stylify-components
title: 'font-size:$titleFontSize text-align:center'
/stylify-components
*}
<div class="title">你好，世界! 🎉</div>然后Homepage/default.latte使用stylify-files选项通知捆绑器关于外部路径，该选项希望路径由空格或新行分隔：
{*
...
stylify-files
./_content.latte
/stylify-files
*}
{block content}
{include './_content.latte'}./_content.latte中的内容会被捆绑器自动处理。
🔥 生产构建：
如果你运行yarn build，选择器会被缩小，CSS也会被最小化：
@layout.latte：
<main class="a">{include content}</main>_content.latte：
<div class="d">你好，世界! 🎉</div>“layout.css`：
.b,.a{max-width:1024px}
.c,.a{margin:0 auto}homepage.css：
:root {--titleFontSize: 48px;}
.e,.d{font-size:48px}
.f,.d{text-align:center}配置任何你需要的东西
上面的例子并不包括Stylify CSS能做的一切：
请随时查看文档以了解更多信息 💎。
