deefaze/startless

此包最新版本(dev-master)没有提供许可证信息。

Startless - 适用于任何项目的Less起始块

安装: 16

依赖: 0

建议者: 0

安全: 0

星标: 1

关注者: 2

分支: 0

公开问题: 0

语言:Shell

dev-master 2018-04-03 17:10 UTC

This package is not auto-updated.

Last update: 2024-09-29 23:24:52 UTC


README

目录

1. 安装

1.1 Composer
1.2 或下载
1.3 查看参考页面

2. 开发环境使用

2.1 定位主Less文件
2.2 配置
2.3 压缩CSS / Sourcemap
2.4 LESS混入
2.5 CSS规则

3. 生产环境使用

什么是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

您只需将compresssourcemap设置为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部署在任何方式下

  1. css/styles.css文件复制到您的资产中...
  2. main.less中设置out参数以针对您的资产...
  3. 在终端中使用lessc(需要npm + less安装)并将其编译到您的资产中...

返回目录