README

针对 isEngine 框架的 SASS/SCSS 风格库。

快速开始

将库连接到您的项目中。

@import "/path/to/isengine/isscss/src/is";

您可以使用库作为 utility first，例如为元素指定类，例如

// html код в стиле utility first
<div class="flex my-1 px-2 justify-content-between">
    ...
</div>

或者使用它来构建自己的类，通过继承模板类

// style sheet
.flex-block {
    @extend %flex;
    @extend %my-1;
    @extend %px-2;
    @extend %justify-content-between;
}

// html код по методологии BEM
<div class="flex-block">
    ...
</div>

关于项目
兼容性
安装
使用方法
配置
主要参数
- 检查点
- 响应式网格
- 颜色
- 字体
- 尺寸范围
  - 绝对值
  - 相对值
  - 特殊值
  - 定制
- 组件
- 前缀
类
- 通用规则
- 简写
- 方向修改符
- 默认设置
- 边距类
- 边框类
  - 边框厚度
  - 边框半径
  - 边框颜色
- 宽度和高度类
- 显示类
- 特殊显示类
- 定位类
- z 轴定位类
- 对齐类
- 图像类
  - 背景图像加载
  - 渐变背景
  - 图像对齐
  - 背景图像对齐
  - 蒙版对齐
- 调色板类
- 透明度类
- 文本类
  - 字体
  - 字体属性
  - 文本属性
- 阴影
- flex 容器
  - 元素定位
  - 尺寸
  - 顺序
  - 对齐
- grid 容器
- 动画
用户界面
创建自己的类
- 继承
- 混入
路线图
变更日志
链接

关于项目

该项目作为一个辅助 SCSS 库被创建，用于在您的项目中轻松管理样式。

如果您使用了 Bootstrap、Foundation、Materialize、Tailwind 等框架，这个库对您来说将是非常直观的。

^ 返回目录

兼容性

您可以将 isScss 连接到任何项目。

这个库是用纯 SCSS 编写的，并且不使用任何外部 JavaScript 库。

为了消除可能与类重复相关的冲突，您可以使用前缀。

^ 返回目录

安装

要使用它，只需在项目中导入库

@import "/vendor/isengine/isscss/src/is";

^ 返回目录

使用方法

您可以将 isScss 用作 utility first / functional / atomic 库，在元素类中编写样式，例如

<div class="flex py-1 px-2">
    ...
</div>

使用库作为 utility first 由组件负责。

如果您不想在项目中引入不必要的类，这些类会占用额外的空间并降低加载速度，您可以在组件级别禁用它们的使用。

您还可以使用 isScss 来构建自己的类，例如按照 BEM 方法。

有关详细信息，请参阅 创建自己的类 部分。

^ 返回目录

配置

您可以按需配置 isScss。

为此，在连接库之前连接设置文件

@import "settings";

在设置中，您可以设置

检查点,
响应式网格,
颜色,
字体,
尺寸范围,
组件,
前缀。

^ 返回目录

主要参数

检查点

isScss 提供了具有以下控制点的自适应网格：

表中指定的屏幕和容器尺寸也不是随意选择的。我们收集了最常见的屏幕分辨率，将它们分组，并根据收集到的数据编制了以下列表。

智能手机：480 x 320, 640 x 480, 800 x 480, 854 x 480, 960 x 540, 960 x 640, 1136 x 640
显示器：800 x 600, 1024 × 768, 1280 х 1024
高清屏幕：1280 х 720, 1280 х 800, 1366 x 768, 1440 x 900
全高清屏幕：1920 x 1080, 1920 x 1200
2k：2048 x 1400, 2048 × 1536, 2560 x 1400, 2560 x 1440
超高清：3840 x 2160, 4096 x 1400, 4096 x 2160, 5120 x 2160, 6016 x 3384, 7680 x 4320

我们提供的网格既支持旧屏幕，也支持新屏幕，考虑到特定分辨率，包括屏幕高分辨率和超高分辨率，以及智能手机浏览器中的分辨率反向插值。

前缀表示控制点的名称，并设置屏幕的最小宽度。

// блок настроек
$is-layout: (
    breakpoints: (
        xs: (480px, 100%),
        sm: (640px, 100%),
        md: (720px, 720px),
        lg: (960px, 940px),
        xl: (1200px, 1140px),
        hd: (1900px, 1600px),
        x4: (3800px, 3200px)
    ),
    ...
);

使用示例

<div class="col-12 sm-col-6 lg-col-4">
    <div class="py-0 sm-py-1 lg-py-2">
        ...
    </div>
</div>

如果您想使用其他名称或控制点值，您可以在设置中自行设置。

您还可以在设置块中指定 'body' 标签的最小宽度。

// блок настроек
$is-layout: (
    ...
    min-width: 320px,
    ...
);

默认值为 '320px'。如果屏幕宽度低于此值，将出现水平滚动条。这对于限制自适应布局非常有用。

需要记住的是，这只是一个参数值。参数本身在规范化模块中使用。如果您已关闭此模块，则参数将不会工作。

^ 返回目录

响应式网格

在 isScss 中，就像在大多数类似库中一样，使用自适应网格进行块布局。

网格包括以下元素

容器
行
列

总的来说，代码如下所示

<div class="container">
    <div class="row">
        <div class="col">
            ...
        </div>
        <div class="col">
            ...
        </div>
    </div>
    <div class="row">
        ...
    </div>
</div>

默认情况下，网格由 12 列组成。这意味着任何行都将分成 12 个相等部分。您可以通过指定列占用的部分数来设置每列的大小。

例如

// две равные колонки
<div class="col-6">
    ...
</div>
<div class="col-6">
    ...
</div>

// три равные колонки
<div class="col-4">
    ...
</div>
<div class="col-4">
    ...
</div>
<div class="col-4">
    ...
</div>

// две колонки, ворая больше первой в два раза
<div class="col-4">
    ...
</div>
<div class="col-8">
    ...
</div>

等等。

您还可以为不同屏幕尺寸使用不同宽度的列。为此，需要在列中添加控制点前缀。

// по одной колонке в строке на маленьких экранах,
// по две колонки на строку для средних
// и по четыре - для больших
<div class="col-12 md-col-6 xl-col-3">
    ...
</div>

如果列没有指定值，则它们的宽度相等。

未在设置中指定的额外值

0,
auto

存在一个额外的值 'auto'，它根据内容自动设置列的宽度。

如果您有一个列值为 'auto'，则您还需要至少有一个列没有值。

<div class="col-auto">
    ...
</div>
<div class="col">
    ...
</div>

在 isScss 中还有一个值 '0'，它可以完全隐藏列。

这是为了方便为不同屏幕尺寸输出不同的列。

// эта колонка не будет видна на больших экранах
<div class="col-12 lg-col-0">
    ...
</div>

// эта колонка будет видна только на больших экранах
<div class="col-0 lg-col-12">
    ...
</div>

请注意，列始终应该嵌入在行中。行，反过来，应该嵌入在容器中。

列中可以嵌套行，此时它们不需要容器。

<div class="container">
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    ...
                </div>
            </div>
        </div>
        ...
    </div>
    ...
</div>

行的列数在设置中指定，并且可以更改此值。

// блок настроек
$is-layout: (
    ...
    cols: 12,
    ...
);

此外，每个列都有一些填充。这些填充也在设置中指定。

// блок настроек
$is-layout: (
    ...
    indent: 15px,
    ...
);

您还可以指定列之间的默认间距。

// блок настроек
$is-layout: (
    ...
    gap: 2px,
    ...
);

所有这些设置都考虑用于构建尺寸网格。

注意！我们仍然使用 flex box 来构建此网格。您可以为行和列使用 flex box 类和样式。

网格在 grid 属性中表示为单独的元素。

^ 返回目录

颜色

在 isScss 中，与其他库一样，提供了一个由彩虹色和灰色阴影组成的调色板。

// блок настроек
$is-colors: (
    theme:   #6DB13F,
    primary: #6DB13F,
    second:  #EF8720,
    third:   #F3E759,
    ...
);

最重要的是工作颜色

theme:    #...,
primary:  #...,
second:   #...,
third:    #...,

尽管通常不需要四种颜色，但一两种就足够了。

还有白色、黑色和深色。

black:  #000000,
dark:   #212121,
light:  #F6F6F6,
white:  #FFFFFF,

特别标注了透明色。

none:     transparent,

灰色阴影使用从 1 到 9 的梯度，其中 1 表示最浅色，9 表示最深的颜色。

gray-1: #ECECEC,
gray-2: #D0D0D0,
gray-3: #B9B9B9,
gray-4: #A2A2A2,
gray-5: #8B8B8B,
gray-6: #737373,
gray-7: #5C5C5C,
gray-8: #454545,
gray-9: #2E2E2E,

标准调色板由 10 种彩虹色组成

red: 	  #E54142,
orange:   #EF8720,
yellow:   #F9C82D,
green: 	  #6DB13F,
teal: 	  #128c7e,
blue: 	  #5BA3D4,
purple:   #444A9E,
pink: 	  #D64381,
beige: 	  #F0E1CE,
brown: 	  #795548,

这些颜色被挑选出来，以保持不太鲜艳，更偏向于柔和的色调，并且能够以黑色或白色显示清晰的文字。

每种颜色都对应一个用于文本颜色、背景颜色和元素边框颜色的类。

<div class="color-white bg-black border-gray-5">
    ...
</div>

您还可以通过设置或指定自己的颜色名称来更改这些颜色的色调。

^ 返回目录

字体

您可以为使用添加几种不同的字体，包括图标字体。

// блок настроек
$is-fonts: (
    theme: (
        name:        #{"Ubuntu", sans-serif},
        size:        16px,
        weight:      400,
        line-height: 1.25rem,
        line-indent: 0,
    ),
    icon: (
        name:        FontAwesome,
        size:        16px,
        weight:      400,
        line-height: 1.25rem,
        line-indent: 0,
    ),
    ...
);

如这里所示，每个字体都由一个关联数组表示。键代表字体标识符。

对于每种字体，指定了其名称、基本大小、粗细、行高和首行缩进。接下来，这些参数将通过指定的键连接。

例如

<div class="font-theme">
    ...
</div>

建议将每种字体的基本大小设置为16px。

基本字体大小之后的所有主要尺寸都将据此计算。

如果您需要更改字体参数，可以使用修饰符。

^ 返回目录

尺寸范围

尺寸系列代表间距、元素边框厚度和宽度/高度值的一组尺寸。

// блок настроек
$is-sizes: (
    absolute:
        0.25,
        0.5,
        0.75,
        ...
    relative:
        10,
        25,
        50,
        ...
    special: (
        xs: 0.25rem,
        sm: 0.5rem,
        md: 1rem,
        ...
    )
);

在isScss中，尺寸为以下属性设置

填充（上、左、右、下），
边距（上、左、右、下），
上，
左，
右，
下。
宽度（最小、最大），
高度（最小、最大），
字体大小，
行高，
边框宽度，
间隙。

未在设置中指定的额外值

0,
auto

绝对值

绝对值主要用于填充。

它们以'rem'为单位进行测量，可以具有正负值。

默认情况下，使用以下尺寸系列作为绝对值

示例

// отступы со всех сторон по 0.5rem
<div class="m-05">
    ...
</div>

// отступы со всех сторон по -0.5rem
<div class="m--05">
    ...
</div>

相对值

相对值主要用于确定宽度和高度。

默认情况下，使用以下尺寸系列作为相对值

默认情况下，单位使用百分比。要使用其他单位，需要在数值后指定它们。

您还可以使用负值。

使用示例

// блок на всю ширину и автоматическую высоту
<div class="w-100p h-auto">
    ...
</div>

// блок на высоту 100vh
<div class="h-100vh">
    ...
</div>

// блок с ограниченной шириной
<div class="w-100p w-max-50vw">
    ...
</div>

// блок с отрицательными отступами
<div class="m-100p">
    ...
</div>

特殊值

特殊值主要用于指定精确尺寸。

特殊属性的差异在于您同时指定名称和值，包括单位。

默认情况下，使用以下尺寸系列

使用示例

<div class="px-xs my-md">
    ...
</div>

定制

您可以为每个尺寸组指定自己方便的值。

^ 返回目录

组件

目前，isScss库是基于基本类、函数和混入构建的。您可以使用它们来构建自己的类。

isScss库包含类模板。这样的类在编译时不会被包含在样式集中。但您仍然可以使用它们来构建自己的类。

类模板是自动创建的。而具有相同名称的类的创建取决于组件的设置。

注意！类模板不包括媒体查询和状态。然而，它们与普通类一样，可以有简短和完整名称。这是由组件设置控制的。

使用所有类可能会过于冗余。如果您想节省样式文件的大小，可以通过禁用不需要的单独类或组件来实现。

所有这些都可以通过设置来实现。

// блок настроек
$is-modules: (
    color : true,
    layout : true,
    text : true,
    ...
);

每个组件都可以有以下值

true - 完全包含组件的使用，
null - 组件关闭。

您还可以以数组的形式列出要包含在组件中的各种附加组件。

breakpoints - 不会为组件类创建断点修饰符，
short - 类的简短名称，
full - 类的完整名称，
hover - 具有状态 'hover' 和 'focus' 的类的修饰符，
classes - 包含类。

在某些组件中，某些附加组件可能没有被使用。您可以编写它们，但这不会改变结果。

在启用组件的情况下，您可以将isScss用作 utility first 库，在元素类中编写样式，例如

<div class="flex py-1 px-2">
    ...
</div>

您还可以继承类名。更多详情请参阅创建自己的类部分。

在禁用某个组件后，类将不再包含在库中。因此，这样的记录会导致错误。因此，我们建议仅禁用组件配置数组中的 'class' 参数。

禁用 'class' 参数后，'breakpoints' 和 'hover' 参数将没有意义，因为它们只影响类，而不影响类模板。

如果您禁用所有组件的使用，那么您的样式文件中只会包含您创建的类。

^ 返回目录

前缀

此功能目前尚未实现！

如果您使用多个库或框架，可能会出现相同类名的问题。

// блок настроек
$is-prefix: (
    name : 'is-',
    enable : false
);

为了避免此类冲突，在 isScss 中可以包含一个前缀。默认情况下，它被禁用。

// префикс выключен, возможны конфликты!
<div class="color-white bg-black border-gray-5">
    ...
</div>

// включен префикс is-
<div class="is-color-white is-bg-black is-border-gray-5">
    ...
</div>

您可以自己指定任何前缀。我们建议使用前缀 'is-'。

^ 返回目录

类

通用规则

isScss 中所有内置类的命名遵循以下规则。

类名与样式参数名称相同。这允许您不必记住类名，而可以直观地使用它们。

例如

// есть параметр стиля min-width, но не width-min
<div class="min-width">
    ...
</div>

所有前缀、后缀和修饰符都通过破折号 '-' 指定。

例如

<div class="pre-class-post">
    ...
</div>

在类名开头可以指定控制点修饰符。这样的类将对相应的屏幕宽度起作用。

例如

<div class="class-1 sm-class-2 lg-class-3">
    ...
</div>

对于使用尺寸系列的类，在末尾指定一个允许的尺寸。

例如

<div class="
    size-class1-0
    size-class2-025
    size-class3-10p
    size-class4-50vw
    size-class5-min
    size-class6-auto
">
    ...
</div>

^ 返回目录

简写

对于某些类，为了简化，既使用完整写法，也使用短写法。

例如

// полная запись
<div class="padding-0 margin-0">
    ...
</div>

// короткая запись
<div class="p-0 m-0">
    ...
</div>

短写法是为了缩短记录。

^ 返回目录

方向修改符

方向修饰符用于具有方向指示选项的类。

例如

填充,
边距,
边框。

某些方向修饰符既有完整写法，也有简写法。在完整写法中，它们通过破折号 '-' 指定，但在简写法中，此破折号被省略。

例如

// полная запись
<div class="padding-left-0 padding-right-0 margin-top-1">
    ...
</div>

// короткая запись
<div class="pl-0 pr-0 mt-1">
    ...
</div>

下表列出了所有方向修饰符及其说明。

^ 返回目录

默认设置

默认情况下，许多基本元素（如

body,
div,
h1-h6,
p,
a,
img,
ul,
ol,
input,
button,
等）已定义了样式。

还定义了伪元素的样式，并设置了将属性还原到基本值的参数。

所有这些都旨在使元素在浏览器中具有统一的外观，但不是为了按个人喜好对其进行样式化。

您可以在组件中禁用此选项。

^ 返回目录

边距类

元素的边距由样式参数 'margin' 指定。内部边距由 'padding' 参数指定。

isScss 使用这些参数的简写名称

m,
p。

对于这些参数，可以使用控制点修饰符、方向修饰符和尺寸系列中的值。

通用公式如下

[控制点-][margin|m][-方向|short_direction][-尺寸] [控制点-][padding|p][-方向|short_direction][-尺寸]

示例

// полная запись
margin-top-1
sm-margin-top-2
margin-x-2

// короткая запись
mt-1
sm-mt-2
mx-2

还存在一些设置绝对边距的类

左，
右，
上，
下。

它们的简写名称包含破折号前缀 '-'，以避免与其他类冲突。

-l,
-r,
-t,
-b。

示例

// полная запись
left-1
sm-left-2

// короткая запись
-l-1
sm--l-2

^ 返回目录

边框类

可以使用样式 'border' 为元素设置边缘。

在 CSS 中，这是一个复合参数，包括

border-color,
border-style,
边框宽度，
border-radius
等）已定义了样式。

为了使边框类生效，您需要用 'b' 或 'border' 类初始化它们。

边框厚度

isScss 使用以下名称（完整和简写）来命名 'border' 样式

border,
b。

可以使用控制点修饰符、方向修饰符和尺寸系列中的值来样式化边缘。

通用公式如下

[控制点-][border|b][-方向|short_direction][-尺寸]

示例

// полная запись
border-0
border-top-1
sm-border-top-2

// короткая запись
b-0
bt-1
sm-bt-2

边框半径

边缘半径由单独的样式以完整和简写名称设置

radius,
r.

默认情况下，半径为所有边设置。

边缘半径也可以设置为八个方向之一。由于半径是针对角度设置的，因此方向是边和方向组合。

所有方向修改器都在下表中列出。

可以使用控制点修改器来设置半径。

通用公式如下

[breakpoint-][radius|r][-direction|short_direction][-size]

示例

// полная запись
radius-0
radius-top-left-1
sm-radius-top-left-2

// короткая запись
r-0
rtl-1
sm-rtl-2

边框颜色

也可以为边缘设置颜色。

有关详细信息，请参阅颜色类部分。

^ 返回目录

宽度和高度类

存在两个基本类，用于设置元素的尺寸

width,
height.

它们的简称

每个类都有最小和最大值

min-
max-

也可以使用控制点修改器。

通用公式如下

[breakpoint-][min-|max-][width|w][-size] [breakpoint-][min-|max-][height|h][-size]

示例

// полная запись
width-5
sm-width-3vw
max-width-100p

// короткая запись
w-5
sm-w-3vw
max-w-100p

^ 返回目录

显示类

元素可以分配以下类来在文档中显示

none - 元素不显示，
block - 块元素，
inline - 行元素，
inline-block - 行元素具有块属性，
flex - flex box 类型的元素，用于创建布局，
grid - grid 类型的元素，用于创建布局，
contents - 非块元素，将所有嵌套元素向上推一级。

这些类没有简称。

可以使用控制点修改器。

通用公式如下

[breakpoint-][class]

示例

block
sm-none

^ 返回目录

特殊显示类

除了主要元素显示类，使用 'display' 属性外，我们还提供了一些辅助类。

使用 'visibility' 属性的类

visible,
hidden.

使用 'overflow' 属性的类

overflow-x,
overflow-y,
overflow-hidden.

^ 返回目录

定位类

元素可以分配以下类来在文档中定位

relative - 相对于其位置，其偏移不会影响任何其他元素的位置，
absolute - 相对于其父元素（具有 'relative' 值），
fixed - 相对于整个文档，
sticky - 相对于文档或父元素，但在滚动时粘附到边缘。

这些类没有简称。

对于具有这些类之一的元素，可以按 top, right, bottom, left 和 z 轴的值进行偏移。

可以使用控制点修改器。

通用公式如下

[breakpoint-][class]

示例

relative
sm-absolute

^ 返回目录

z 轴定位类

元素可以在 z 轴上定位。

为此，使用具有完整和简短名称的单独样式

z-index,
z.

为此类使用尺寸系列

和额外的值

0,
auto

可以使用控制点修改器。

通用公式如下

[breakpoint-][z-index|z][-size]

示例

// полная запись
z-index-1
sm-z-index-auto

// короткая запись
z-1
sm-z-auto

此类仅在为元素设置了定位类时才起作用。

^ 返回目录

对齐类

通过以下样式进行元素对齐

text-align,
vertical-align.

在 isScss 库中，我们简化了它们为一个通用的类，具有完整和简短名称

align,
a.

对于这些参数，可以使用控制点修改器和方向修改器。

除了常规方向外，这里还添加了几个新的

通用公式如下

[breakpoint-][align|a][-direction|short_direction]

示例

// полная запись
align-top
sm-align-x

// короткая запись
at
sm-ax

^ 返回目录

图像类

isScss 库允许处理以下图像类型

普通图像元素，
背景图像，
遮罩。

作为遮罩，isScss 允许使用背景图像。但是，可以通过 'color' 属性更改遮罩颜色。在某些情况下，这可能非常有用。例如，如果您正在创建需要根据用户操作改变颜色的界面图标。

对于所有列出的元素，都有标准类

image,
bg,
mask.

这些类将容器尺寸设置为 100%，并禁用重复。

背景图像加载

用于加载背景图像的是 CSS 获取元素属性值的能力。

在这种情况下，读取具有 CSS 属性名称的 'data' 属性

data-mask-image - 作为遮罩的图像，
data-bg-image - 作为背景图像。

为了使某些属性生效，您需要指定相应的类

mask-image,
bg-image.

渐变背景

您可以使用颜色渐变作为背景。

在这种情况下，读取具有 CSS 属性名称的 'data' 属性

data-bg-gradient.

为了使此属性生效，您需要指定相应的类

bg-gradient.

该类使用以下样式设置

background-blend-mode: screen;
background-image: attr(data-bg-gradient linear-gradient);

图像对齐

用于图像对齐的属性是 'object-fit'。它允许将当前图像元素放置在父元素中，不破坏其宽高比。

允许使用以下类

image-cover - 将图像嵌入，使其填充整个元素,
image-contain - 将图像嵌入，使其完全适合元素。

您还可以在文本中调整图像的位置

image-left 或 image-l - 将图像左对齐,
image-right 或 image-r - 将图像右对齐,
image-center 或 image-c - 将图像居中对齐。

这种图像对齐使用属性 'float'。仅在您想在文本块中放置图像时使用它。

背景图像对齐

背景图像的对齐方式与简单图像的对齐方式类似。但这里使用的是属性 'background-size'，它专门用于此类操作。

允许使用以下类

bg-cover,
bg-contain.

您还可以使用以下修饰符来设置图像对齐

示例

bg-top
bg-x

背景图像可以具有固定定位，即使在页面滚动时也会保持位置。这是由特殊类控制的

bg-fixed

蒙版对齐

掩码对齐的方式与背景图像对齐的方式类似。

允许使用以下类

mask-cover,
mask-contain.

与背景图像相同的修饰符。

示例

mask-top mask-x

^ 返回目录

调色板类

isScss 库允许您处理以下颜色类型

文字颜色,
背景颜色,
边框颜色。

对于所有这些元素，都有以下类组

color,
bg,
边框。

颜色由现有颜色调色板中的颜色名称指定。

请注意，颜色名称不应与参数 left、rigth、top、bottom、cover、contain 等冲突，以避免冲突！

您还可以使用控制点修饰符。

通用公式如下

[breakpoint-][type-|type][color|c][-value]

示例

color-white
bg-primary
border-primary
sm-color-gray-5
sm-bg-second
sm-border-second

建议使用 bg-gradient 属性来使用渐变作为背景图像。

^ 返回目录

透明度类

元素的透明度由具有完整和简短名称的样式设置

opacity,
o.

透明度使用相对尺寸系列和 0. 虽然它们以百分比表示，但透明度值会转换为小数。

0 表示完全透明，100 表示完全不透明。

可以使用控制点修饰符来设置透明度。

通用公式如下

[breakpoint-][opacity|o][-size]

示例

// полная запись
opacity-0
sm-opacity-50

// короткая запись
o-0
sm-o-50

^ 返回目录

文本类

isScss 库允许您处理以下文本类型

字体及其属性,
文本属性。

对于所有这些元素，都有以下类组

font,
text.

对于字体和文本属性存在缩写。

对于所有文本类，都可以使用控制点修饰符。

字体

字体族根据设置中的字体根据其名称指定。

通用公式如下

[breakpoint-][font][-value]

示例

font-primary
sm-font-second

字体属性

可更改的字体属性在表中列出

通用公式如下

[breakpoint-][class|short_class][-value]

示例

// полная запись
font-weight-700
font-size-15
sm-font-size-2

// короткая запись
fw-700
fs-15
sm-fs-2

文本属性

文本属性改变文本的状态或其样式。它们没有值，只需声明相应的类即可。

CSS 中这些属性属于 'font' 组，而另一部分属于 'text'。

在 isScss 库中，我们为了方便，将它们归纳为 'text' 组。

它们的描述在表中给出

^ 返回目录

阴影

阴影是辅助类组，由具有完整和简短名称的单独样式设置

shadow,
sh.

类选项包括

阴影类型 - text（默认）/ box,
阴影颜色 - black（默认）/ white,
方向,
偏移,
模糊,
透明度。

这样的多样性无疑会产生许多类。但它们的挑战变得清晰且不复杂。

透明度由尺寸系列的相对值和0.0表示完全透明，100表示完全不透明。

偏移和模糊由特殊的1:1比例值设置。

方向是方向的组合。

所有方向修改器都在下表中列出。

默认情况下，方向未设置。

可以使用控制点修改器。

通用公式如下

[breakpoint-][shadow|sh][-type][-color][-size][-opacity][-direction|short_direction]

示例

// полная запись
shadow-xs
shadow-white-xs-bottom-right
shadow-box-white-xs-50-bottom-right

// короткая запись
sh-xs
sh-white-xs-br
sh-box-white-xs-50-br

^ 返回目录

flex 容器

flex容器使用了许多功能和许多额外的类。

这些类没有简写。

可以对这些类使用控制点修饰符。

元素定位

flex-row - 将元素排列成行,
flex-row-reverse - 将元素按相反顺序排列成行,
flex-column - 将元素排列成列,
flex-column-reverse - 将元素按相反顺序排列成列,
flex-wrap - 当容器超过允许的大小时，重新排列元素,
flex-nowrap - 禁止元素换行并尽可能将它们放入容器。

尺寸

每个元素的大小根据自适应网格设置中的列数设置。

flex-grow-[size] - 元素相对扩展的大小,
flex-shrink-[size] - 元素相对收缩的大小。

大小由尺寸系列的相对值以及特殊值设置

宽度可以通过设置属性 'flex-basis' 的特殊值来设置

宽度可以通过设置类 'width' 并设置类 'flex-auto' 来设置。此类将使元素宽度按属性 'width' 计算。

顺序

每个元素的顺序根据自适应网格设置中的列数设置。

order-[size] - 元素的顺序。

顺序由尺寸系列的相对值以及特殊值设置

0,
first,
last.

顺序类适用于 'flex' 和 'grid' 容器。

对齐

flex容器中的对齐按两个轴工作，并不仅适用于整个容器，也适用于单个元素。

所有可能的类在以下表格中展示

对齐类适用于 'flex' 和 'grid' 容器。

^ 返回目录

grid 容器

未设置。

^ 返回目录

动画

未设置。

^ 返回目录

用户界面

基于现有类可以构建整个UI库。

^ 返回目录

创建自己的类

任何图形设计都假设有一个风格基础，其中包含典型元素，如标题、按钮、输入字段等。

这些元素具有硬编码的样式选项，因此，颜色、尺寸、间距和其他样式参数的选择有限。

我们建议使用isScss库来根据BEM方法构建基于它的样式。仅允许在开发中使用 utility first 样式。

// html код в стиле utility first
<div class="flex my-1 px-2 justify-content-between">
    ...
</div>

// html код по методологии BEM
<div class="flex-block">
    ...
</div>

我们还不建议更改现有的网格、尺寸、调色板等设置。例外包括项目颜色（主题、主要、次要、第三）和字体。

^ 返回目录

继承

您可以通过以下方式在自己的类中继承类名

// style sheet
.flex-block {
    @extend .flex;
    @extend .my-1;
    @extend .px-2;
    @extend .justify-content-between;
}

但在此情况下，您的样式文件将包含您创建的类 'flex-block' 以及库中定义的类 'flex'。

这种解决方案可能是多余的，因为它占用了额外的空间。

因此，我们建议从类模板进行继承

// style sheet
.flex-block {
    @extend %flex;
    @extend %my-1;
    @extend %px-2;
    @extend %justify-content-between;
}

在这种情况下，类 'flex'、'my-1' 和其他类不应包含在您的样式文件中，只应包含类 'flex-block'。

最终，您的样式文件将仅包含您需要的类。

如果您想将库的一些内置类包含在样式文件中，请通过组件设置这些类。

^ 返回目录

混入

为了缩短代码行数，我们建议使用库中包含的混合。

size_base

使用示例

.size_base {
  @include sizes-base(width);
}

结果

.size_base-auto { width: auto }
.size_base-0 { width: 0 }

使用多个属性的示例

.size_base_multi {
  @include sizes-base(width height);
}

结果

.size_base_multi-auto { width: auto; height: auto }
.size_base_multi-0 { width: 0; height: 0 }

size_absolute

使用负值示例

.size_absolute {
  @include sizes-absolute(width, true);
}

结果

.size_absolute-01 { width: 0.1rem }
.size_absolute--01 { width: -0.1rem }
.size_absolute-02 { width: 0.2rem }
.size_absolute--02 { width: -0.2rem }
.size_absolute-025 { width: 0.25rem }
.size_absolute--025 { width: -0.25rem }
...

size_relative

使用示例

.size_relative {
  @include sizes-relative(width);
}

结果

.size_relative-10p { width: 10% }
.size_relative-10vw { width: 10vw }
.size_relative-10vh { width: 10vh }
...

指定具体单位的示例

.size_relative {
  @include sizes-relative(width, null, p);
}

结果

.size_relative-10p { width: 10% }
.size_relative-25p { width: 25% }
.size_relative-50p { width: 50% }
...

size_special

使用示例

.size_special {
  @include sizes-special(width);
}

结果

.size_special-xs { width: 0.25rem }
.size_special-sm { width: 0.5rem }
.size_special-md { width: 1rem }
...

media

不同选项的示例

.class {
  width: 0px;
  @include media(xs) {
    &.xs-1 { width: 10px }
    .xs-2 { width: 20px }
    @at-root .xs-3 { width: 30px }
    @at-root .xs-4 { width: 40px }
  };
}
.xs-5 {
  @include media(xs) {
    width: 50px
  }
}
.xs-6 {
  @include media(xs) {
    & { width: 60px }
  }
}
@include media(xs) {
  .xs-7 { width: 70px }
  .xs-8 { width: 80px }
}

结果

.class { width: 0px }
@media (min-width:480px) {
  .class.xs-1 { width: 10px }
  .class .xs-2 { width: 20px }
}
@media (min-width:480px) {
  .xs-3 { width: 30px }
}
@media (min-width:480px) {
  .xs-4 { width: 40px }
}
@media (min-width:480px) {
  .xs-5 { width: 50px }
}
@media (min-width:480px) {
  .xs-6 { width: 60px }
}
@media (min-width:480px) {
  .xs-7 { width: 70px }
  .xs-8 { width: 80px }
}

指定方向的示例

.class {
  width: 0px;
  @include media(xs, portrait) {
    width: 20px
  };
}

结果

.class { width: 0px }
@media (min-width:480px) and (orientation: portrait) {
  .class { width: 20px }
}

^ 返回目录

路线图

重构现有代码

使所有组件具有统一的外观；
将模块代码移至包含内容的混合模块中。

通过 use 方法连接库，以分隔命名空间并允许库组件在其他项目中单独使用。

为库中的所有类指定前缀。

开发库中缺失的组件

grid 容器；
动画。

开发 UI 组件库，以 SCSS 和 CSS 文件形式提供样式。

material design；
bootstrap 替代方案。

开发包含 js 模块的 UI 组件库

画廊；
幻灯片；
模态窗口；
导航面板；
等）已定义了样式。

通过 npm 和 yarn 包管理器安装。

作为模块连接到 js 框架

Vue，
React，
Angular。

^ 返回目录

变更日志

0.1.0

版本经过大幅重构

结构和类标识符已更改；
自适应网格已更改；
已删除所有旧混合模块和函数；
创建了类模板，并默认连接。
现在可以禁用类；
出现了简短和完整类名；
为所有类添加了控制点；
重构了模块系统，现在有更多模块，可以指定参数
- 在模块中启用/禁用类，
- 启用/禁用模块的完整类名，
- 启用/禁用模块的简短类名，
- 启用/禁用模块的 hover 和 focus 属性，
- 启用/禁用模块的控制点；
为所有类、混合模块和函数创建文档，并提供使用示例；
文档中包含库的描述以及其使用示例和推荐；
文档中包含每个版本的更改列表；
文档中包含项目的发展路线图。

0.0.1

这是库的第一个版本，是为内部用途开发的。

^ 返回目录

链接

^ 返回目录

isengine / isscss

维护者

详情

README

快速开始

目录

关于项目

兼容性

安装

使用方法

配置

主要参数

检查点

响应式网格

颜色

字体

尺寸范围

绝对值

相对值

特殊值

定制

组件

前缀

类

通用规则

简写

方向修改符

默认设置

边距类

边框类

边框厚度

边框半径

边框颜色

宽度和高度类

显示类

特殊显示类

定位类

z 轴定位类

对齐类

图像类

背景图像加载

渐变背景

图像对齐

背景图像对齐

蒙版对齐

调色板类

透明度类

文本类

字体

字体属性

文本属性

阴影

flex 容器

元素定位

尺寸

顺序

对齐

grid 容器

动画

用户界面

创建自己的类

继承

混入

size_base

size_absolute

size_relative

size_special

media

路线图

变更日志

链接