deefaze / startless
Startless - 适用于任何项目的Less起始块
This package is not auto-updated.
Last update: 2024-09-29 23:24:52 UTC
README
目录
2.1 定位主Less文件
2.2 配置
2.3 压缩CSS / Sourcemap
2.4 LESS混入
2.5 CSS规则
什么是StartLess?
Startless是一个适用于任何Html/CSS Web应用的Less/Css起始块。Startless包含了CSS重置、规范化、字体和主题颜色的基础。
StartLess使用什么?
Startless使用LESS/CSS类型文件。
字体主题基于Google Fonts的一些字体,如Roboto、Lato、Ubuntu、Oswald...
1. 安装
1.1 Composer
在您的终端
中运行此composer
命令
composer require deefaze/startless dev-master
1.2 或下载
前往Deefaze/starless仓库,选择master
分支,点击Clone or download
> Download ZIP
或直接点击此处。
1.3 查看参考页面
无法直接从file:///
协议调用test/index.html
,请从您的服务器启动。
Starless提供了一个创建PHP服务器的脚本,在127.0.0.254:80上。
前往Startless根路径,打开一个终端(Windows上的CMD)并运行win-php-server.cmd
(注意:需要有效的PHP > v5.3安装),这将自动在浏览器中打开索引。如果没有,请访问http://127.0.0.254:80/test/index.html
在其他编辑器的终端中?您可以在当前终端中启动CMD(终端ception),像这样运行
dev@dev-PC MINGW64 /s/www/startless/ (master) $ cmd /k
接下来,从CMD运行win-php-server.cmd
Microsoft Windows [version 10] (c) 2017 Microsoft Corporation. All rights reserved. S:\www\startless\win-php-server.cmd
返回您的终端?在CMD中运行exit
↥ 返回目录
2. 开发环境使用
2.1 定位主LESS文件
主文件是src/scss/main.less
。但这个文件只包含@import
指令。src/scss/Public/
文件夹更有趣。
2.2 配置
config\
包含Startless的config.less
,您需要编辑此文件
// Theme [default, belle, onedark] @theme-selector : 'onedark'; // Font [default, raleway, ubuntu, roboto, laosov (lato, oswald, overpass), ibm] @font-selector : 'ibm';
2.3 压缩CSS / Sourcemap
这已本地化为scss/main.less
文件。
如果您使用的是支持第一行参数的less编译器
// out: ../css/styles.css, compress: false, sourcemap: false
您只需将compress
或sourcemap
设置为true/false
。
2.4 LESS混入
components/
包含Less混入、主题、字体,这里没有CSS规则...
components/themes/
包含所有颜色主题,您可以在此处添加自己的。
components/themes.less
是Startless主题核心文件。
components/fonts/
包含所有字体配置,您可以在此处添加自己的。
components/fonts.less
是Startless字体核心文件。
2.5 CSS规则
public\
包含所有CSS规则。将您的CSS规则放在这里。这已经包含了一个基本的重置和规范化,根(:root{}
)变量,文档参数...
↥ 返回目录
3. 生产环境使用
编译scss/main.less
并在您的项目中使用css/styles.css
,例如
<head> { ... } <link type="text/css" rel="stylesheet" href="vendor/deefaze/startless/src/css/styles.css"> { ... } </head>
注意:在标准生产环境中,不需要Startless,您可以将CSS部署在任何方式下
↥ 返回目录