bozboz/luigi

该软件包已被废弃，不再维护。未建议替代软件包。

Luigi 是由 Bozboz 开发者和世界各地的开发者开发的 Scss 库。它受到了最受欢迎的库的影响，包括大多数流行的混入（mixins），以及一些 Bozboz 定制的额外混入。

维护者

详细信息

github.com/bozboz/luigi

主页

源代码

问题

安装: 61

依赖关系: 0

建议者: 0

安全性: 0

星星: 32

关注者: 23

分支: 6

开放问题: 0

语言：SCSS

v2.7.3 2022-01-12 11:05 UTC

GPL-2.0 4278db738868bc30765dcccb853c197aa38dd91c

  • Mike Street
  • Joao Augusto
  • Hugo Darby-Brown
  • Jim Hollington

CSS3typographylayoutresponsivegridsticky footer

This package is auto-updated.

Last update: 2022-01-12 11:06:07 UTC

README

#Luigi (v2.2.0)

跳转到索引，查看所有包含的内容。

Luigi 是由 Bozboz 开发者和世界各地的开发者开发的 Scss 库。它受到了最受欢迎的库的影响，包括大多数流行的混入（mixins），以及一些 Bozboz 定制的额外混入。完整的库和致谢列表可以在附录中找到。

所有混入都被包含在主文件 _luigi.scss 中。因此，在您的 app.scss 或 style.scss 文件中，您只需包含 _luigi.scss 即可受益于所有功能。

当向现有或新文件添加混入时，请确保它们在文件内按字母顺序排列。

Luigi 按类别组织库文件夹

或者，查看完整 Luigi 索引，了解所有包含的内容。

##助手

助手文件夹包括以下文件：

###基本变量

helpers/_base-vars.scss

此文件定义了 Luigi 中可以覆盖的所有变量。默认值在此设置

$base-font: Arial,sans-serif !default;

此设置将 body 和所有输入设置为声明的字体

$base-font-size: 12px !default;

网站默认字体大小

$base-gutter: 15px !default;

或

$gutter: $base-gutter !default;

默认间距 - 这用于 <p> 和标题等元素的底部边距

$gap: $gutter*2 !default

通用填充空间

$grid-gap: $gutter !default

包含 Luigi 网格以适应旧版本

$luigi-grid: false !default;

用作网格项的边距

$debug-mode: false !default;

是否启用调试模式（有关调试的信息，请参阅 调试）。

$image-fallback-extension: 'png' !default;

与 背景图像 和 图像-2x 一起使用，将 'png' 扩展名附加到文件名。

$image-path: '/images' !default;

此设置默认图像文件夹，用于 mixins/_images.scss 中的混入。

$image-retina-suffix: '@2x' !default;

这是视网膜图像的视网膜后缀。

$global-box-sizing: true !default;

此确定网站是否使用全局 border-box 作为其盒模型（请参阅 盒模型 文件）。

$sprite: false !default;

与 sprite 混入一起使用，以设置图像精灵的基础路径。

$sprite-size: 0 0 !default;

与 图像-2x 混入一起使用，在图像文件中设置原始精灵大小（72ppi）。

$sticky-footer-height: false !default;
$sticky-footer-margin: $sticky-footer-height !default;

这些用于预定义的粘性页脚文件 - 有关 粘性页脚 的信息。

###调试

helpers/_debug.scss

此文件概述了您可能在 html 中遇到的基本问题。使用一些高级选择器，它概述了具有诸如缺少 alt 标签或 ul 的直接后代不是 li 等问题的元素。

此功能可以通过以下方式启用：

$debug-mode: true;

这源自因纽特人（参见附录2.1）

###打印

helpers/_print.scss

这是一个基本的打印样式表 - 来自Stu Robson的sassifaction（参见附录2.3）。当打印时，它应用了一些非常基本的布局修改

##布局

layout/_grid.scss

这包括Foundation网格和可选的Luigi网格。

##混入

混入文件夹包含以下内容

###图像

mixins/_image.scss

图像混入文件包含以下内容

####背景图像

背景图像是一个混入，它使用SVG背景图像以及PNG和视网膜备用图像。这个混入需要Modernizr。

混入

background-image($name, $size:false)

$name：文件名

$size：背景大小

用法

.class {
	@include background-image(sprite, 50px 100px);
}

输出

.class {
	background-image: url(/images/sprite.svg);
	background-size: 50px 100px;
}

.no-svg .class {
	background-image: url(/images/sprite.png);
}

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
	.no-svg .class {
	background-image: url(/images/sprite@2x.png);
	}
}

####image-2x

这个混入将获取视网膜显示屏的高分辨率图像。视网膜图像是原始精灵大小的两倍，并在名称中附加@2x。

混入

image-2x($name, $image-size: $sprite-size)

$name：文件名

$image-size：原始精灵大小（72ppi）

用法

$sprite-size: 50px 100px;

.class {
	@include image-2x(sprite);
}

输出

@media (-moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
	.class {
		background-image: url(/images/sprite@2x.png);
		background-size: 50px 100px;
	}
}

####精灵

这使得在项目中使用精灵更加简单和代码量更少 - 指定精灵路径然后包括混入。需要与$sprite变量一起使用。

混入

sprite($width, $height, $bg-extras)

$width：图像宽度

$height：图像高度

$bg-extras：图像在精灵上的位置及任何其他

用法

$sprite: '/images/sprite.png';

.class {
	@include sprite(25px, 20px, 0 0);
}

输出

.class {
	width: 25px;
	height: 20px;
	background: url("/images/sprite.png") no-repeat 0 0;
}

###布局

mixins/_layout.scss

布局混入文件包含以下内容

####abs

abs混入有服务器版本，允许快速绝对定位。

混入

abs-tl($top: $base-gutter, $left: $base-gutter)
abs-tr($top: $base-gutter, $right: $base-gutter)
abs-bl($bottom: $base-gutter, $left: $base-gutter)
abs-br($bottom: $base-gutter, $right: $base-gutter)

$top/$bottom/$left/$right：你想将元素定位的位置（默认为$base-gutter）

用法

.class {
	@include abs-tl();
}

.class-alt {
	@include abs-br(20px, 5%);
}

输出

.class {
	left: 15px;
	position: absolute;
	top: 15px;
}

.class-alt {
	bottom: 20px;
	left: 5%;
	position: absolute;
}

####columns

列是一个简单的混入，允许使用CSS3列

混入

columns($cols: 2, $gap: $base-gutter)

$cols：要分割成文本的列数

$gap：列之间的间隔

用法

.class {
	@include columns(3, 10px);
}

输出

.class {
	column-count: 3;
	column-gap: 10px;
}

####vertical-center

将元素垂直对齐到父元素的中间

混入

vertical-center($position: relative)

输出

.class {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

####absolute-middle

将元素垂直和水平对齐到父元素的中间

混入

absolute-middle()

输出

.class {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

###模块化

mixins/_modular.scss

此文件包含可模块化使用的类，可以在SCSS或HTML中使用，因此不包含参数。要查看每个混入的功能 - 查看modular.scss

####class

这鼓励了更多模块化的类命名方法，并且将匹配基础类的扩展名称。你传入一个类名（例如 button），它将被继承到变体中（例如 button-alt 将继承按钮类） - 在Codepen上查看示例

混入

class($class)

用法

@include class(button) {
	font-size: red;
}

输出

[class*="button"] {
	font-size: red;
}

####clearfix

这采用了由Chris Coyier描述的clearfix技巧

####reset

这完全重置元素，并移除其边距、填充、边框和背景。

####secret-list

这允许使用无样式的语义

    和
  • 。

    Clearfix、reset和secret-list都是占位符选择器，应该与extend一起使用。例如

    @extend %clearfix;

    ####unselectable

    禁用用户选择，有助于阻止点击自动选择区域

    @extend %unselectable;

    ###伪元素

    mixins/_pseudo.scss

    伪文件包含影响或添加伪元素的混合

    ####占位符

    用于样式化表单字段中的占位符文本

    混入

    placeholder {
	@content
}

    @content：输入的样式

    用法

    .class {
	@include placeholder {
		color: #666;
	}
}

    输出

    .class::-webkit-input-placeholder{
	color: #666;
}
.class:-moz-input-placeholder{
	color: #666;
}
.class::-moz-input-placeholder{
	color: #666;
}
.class:-ms-input-placeholder{
	color: #666;
}

    ###响应式

    mixins/_responsive.scss

    包含有助于响应式网页设计的混合

    ####img-responsive

    保持图像具有相同的宽高比

    混入

    img-responsive($display: block)

    输出

    .class {
	display: block;
	max-width: 100%;
	height: auto;
}

    ###形状

    mixins/_shapes).scss.scss)

    定义用于用较少代码制作形状的混合

    ####circle

    制作圆最快、最简单的方法。此混合可以用于滑动分页器。

    混入

    circle($size)

    $size：圆的直径

    用法

    .class {
	@include circle(10px);
}

    输出

    .class {
	border-radius: 50%;
	width: 10px;
	height: 10px;
}

    ####square

    这创建了一个规则的四边形（四条相等的边和四个相等的角 - 90°）。

    混入

    square($size)

    $size：正方形的大小

    用法

    .class {
	@include square(10px);
}

    输出

    .class {
	height: 10px;
	width: 10px;
}

    ####triangle

    这使元素成为CSS三角形 - 用于与 :after 或 :before 伪元素一起使用作为指针

    混入

    triangle($direction: down, $size: 20px, $color: #000)

    $direction：箭头指向的方向（上/下/左/右）

    $size：三角形的大小

    $color：三角形的颜色

    用法

    .class:after {
	@include triangle(up, 10px, #fff);
	content: '';
}

    输出

    .class:after {
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-bottom-color: #fff;
	border-top-width: 0;
	content: '';
}

    ###字体排版

    mixins/_typography.scss

    包含会影响网站字体排版的混合

    ####font-face

    这是添加字体声明到您样式的更快、更简单的方法

    混入

    font-face($font-name, $file, $svg-font-name: false, $weight: 100, $style: normal)

    $font-name：字体名称

    $file：字体文件路径（不包含扩展名）

    $svg-font-name：字体的svg ID（例如 ）

    $weight：字体粗细

    $style：字体样式

    用法

    @include font-face('Helvetica Neue Roman', fonts/helveticaneueltstd-roman-webfont, helvetica_neue_lt_std55_roman);

    输出

    @font-face{
	font-family:'Helvetica Neue Roman';
	src: url('fonts/helveticaneueltstd-roman-webfont.eot');
	src: url('fonts/helveticaneueltstd-roman-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/helveticaneueltstd-roman-webfont.woff') format('woff'),
		url('fonts/helveticaneueltstd-roman-webfont.ttf') format('truetype'),
		url'(fonts/helveticaneueltstd-roman-webfont.svg#helvetica_neue_lt_std55_roman') format('svg');
	font-weight: 400;
	font-style: normal
}

    ####font-optimize

    允许优化字体

    混入

    font-optimize($kerning: 0, $rendering: optimizeLegibility)

    $kerning：字母间距 - 可以是 px/em/%

    $rendering：文本渲染值 - 在 Mozilla 开发者网络 上了解更多信息

    用法

    .class {
	@include font-optimize;
}

    输出

    .class {
	letter-spacing: 0;
	text-rendering: optimizeLegibility;
}

    ####font-size

    允许使用 rem 为字体大小

    混入

    font-size($size)

    $size：您的字体大小以 px 为单位

    用法

    $enable-rem: true;
.class {
	@include font-size(16px);
}

    输出

    html {
	font-size: 62.5%;
}

.class {
	font-size: 16px;
	font-size: 1rem;
}

    ####hide-text

    隐藏文本的替代方法（例如，如果您有一个图像作为背景）

    混入

    hide-text

    用法

    .class {
	@include hide-text;
}

    输出

    .class {
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
}

    ####truncate-text

    在单行截断文本的简单方法

    混入

    truncate-text($overflow: ellipsis)

    $overflow：溢出类型。可以是 clip、ellipsis 或字符串

    用法

    .class {
	@include truncate-text;
}

    输出

    .class {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

    ##预定义

    预定义文件夹包含具有功能的CSS块 - 几乎像是一个技巧库。

    ###Box Sizing

    predefined/_box-sizing.scss

    这是全局盒模型大小，为每个元素提供一个 border-box 盒模型

    在 Luigi 中默认开启，但可以通过向变量文件添加以下内容来关闭

    $global-box-sizing: false;

    ###Sticky Footer

    predefined/_sticky-footer.scss

    这是在您的网站上实现固定脚本的代码（见 附录2.5）。

    用法

    $sticky-footer-height; 100px; // The height of your footer

    如果身体上的边距需要比脚本的宽度多或少，可以声明第二个变量

    $sticky-footer-margin: 120px;

    ##附录

    ###1. 作者

    Luigi 的作者和贡献者

    ###2. 其他资源

    ####1. Inuit inuit.css

    ####2. Sassifaction sassifaction

    ####3. Sticky Footer Modern Clean CSS "Sticky Footer"

    ####4. UtilityBelt UtilityBelt

    ###5. 灵感

    ##索引