@7ninjas/scss-mixins 中文文档教程

发布于 6年前 浏览 22 项目主页 更新于 3年前

7ninjas

`scss-mixins` 是 scss mixins 和函数的集合,用于简化和改进常见样式代码模式的实现。

探索我们的 scss 实践 »

投资组合职业联系方式

像忍者一样! 风格像忍者!

Status

npmnpmnpm

CircleCI branch大卫GitHub 代码大小(以字节为单位)

GitHub 拉取请求GitHub 问题GitHub 关闭的问题

GitHub starsGitHub watchers

Quick start

有几个快速启动选项可用: 将

  • Clone the repo: git clone https://github.com/7ninjas/scss-mixins.git
  • Install with npm: npm install @7ninjas/scss-mixins
  • Install with yarn: yarn add @7ninjas/scss-mixins

Usage

all 文件导入核心 scss 文件,用于从包中导入所有 mixins

示例:

@import '~@7ninjas/scss-mixins/all';

Table of contents

Animations

Border Radius

  • 完整文档

  • Mixin border-radius a>

  • 混合边框顶部半径

  • Mixin border-right-radius

  • Mixin border-bottom-radius

  • 混合左边框

  • Breakpoints

  • 完整文档

  • Mixin media-breakpoint-up a>

  • 混合媒体断点下

  • Mixin media-breakpoint-between

  • Mixin media-breakpoint-only

  • Buttons

  • 完整文档

  • Mixin button-variant

  • 混合按钮轮廓变体

  • 混合按钮大小

  • Flex

  • 完整文档

  • Mixin flex

  • Mixin inline-flex

  • Fonts

  • 完整文档

  • Mixin font-face

  • Forms

  • 完整文档

  • Mixin 占位符

  • Gradients

  • 完整文档

  • Mixin gradient-bg

  • 混合梯度-x

  • 混合梯度-y

  • 混合梯度方向

  • 混合渐变-x-三色

  • 混合渐变-y-三色

  • 混合渐变径向

  • 混合渐变条纹

  • Grid

  • 完整文档

  • 混合中心

  • 混合容器

  • 混合容器

  • Hover

  • 完整文档

  • Mixin hover

  • Mixin hover-focus

  • Mixin plain-hover-focus

  • Mixin hover-focus-active

  • Icons

  • 完整文档

  • Mixin svg-icon

  • Images

  • 完整文档

  • Mixin img-fluid

  • Lists

  • 完整文档

  • Mixin list-unstyled

  • Positioning

  • 完整文档

  • Mixin 大小

  • Mixin clearfix

  • Mixin z-index

  • 伪混合

  • 绝对混合

  • Mixin 固定

  • Mixin 相对

  • Mixin 粘性

  • Responsive

  • 完整文档

  • Mixin responsive-prop

  • Mixin 响应式嵌入

  • Mixin 响应式-col

  • Shapes

  • 完整文档

  • 混合三角形

  • Spacing

  • 完整文档

  • Mixin ml

  • Mixin mt

  • Mixin mr

  • Mixin mb

  • Mixin mx

  • 混合我的

  • 混合m

  • Mixin pl

  • Mixin pt

  • Mixin pr

  • Mixin pb

  • 混合像素 混合像素

  • href="./docs/spacing.md#mixin-p">混合p

  • Tables

  • 完整文档

  • 混合表

  • Mixin table-bordered

  • Mixin table-responsible

  • 混合表条纹

  • 混合表-悬停

  • Typography

  • 完整文档

  • Mixin 文本隐藏

  • 混合文本截断

  • 混合字体

  • Variables

  • 完整文档

  • Bugs and feature requests

    发现错误? 或者,也许您对功能请求有很好的想法? 请首先搜索现有和已关闭的问题。 如果您的问题或想法尚未得到解决 - 不要犹豫,打开一个新问题

    Community

    获取有关 7ninjas 开发的最新信息,并与项目维护者和社区成员交谈。

    Versioning

    要查看每个已发布版本的新功能和更改,请查看 我们 GitHub 项目的发布部分

    License

    根据 MIT 许可证发布的代码.

    7ninjas

    `scss-mixins` is a collection of scss mixins and functions to ease and improve implementations of common style-code patterns.

    Discover our scss practices »

    PortfolioCareersContact

    Be like a Ninja! Style like a Ninja!

    Status

    npmnpmnpm

    CircleCI branchDavidGitHub code size in bytes

    GitHub pull requestsGitHub issuesGitHub closed issues

    GitHub starsGitHub watchers

    Quick start

    Several quick start options are available:

    • Clone the repo: git clone https://github.com/7ninjas/scss-mixins.git
    • Install with npm: npm install @7ninjas/scss-mixins
    • Install with yarn: yarn add @7ninjas/scss-mixins

    Usage

    Import all file to your core scss file for importing all mixins from package

    Example:

    @import '~@7ninjas/scss-mixins/all';
    

    Table of contents

    Animations

    Border Radius

  • Full documentation

  • Mixin border-radius

  • Mixin border-top-radius

  • Mixin border-right-radius

  • Mixin border-bottom-radius

  • Mixin border-left-radius

  • Breakpoints

  • Full documentation

  • Mixin media-breakpoint-up

  • Mixin media-breakpoint-down

  • Mixin media-breakpoint-between

  • Mixin media-breakpoint-only

  • Buttons

  • Full documentation

  • Mixin button-variant

  • Mixin button-outline-variant

  • Mixin button-size

  • Flex

  • Full documentation

  • Mixin flex

  • Mixin inline-flex

  • Fonts

  • Full documentation

  • Mixin font-face

  • Forms

  • Full documentation

  • Mixin placeholder

  • Gradients

  • Full documentation

  • Mixin gradient-bg

  • Mixin gradient-x

  • Mixin gradient-y

  • Mixin gradient-directional

  • Mixin gradient-x-three-colors

  • Mixin gradient-y-three-colors

  • Mixin gradient-radial

  • Mixin gradient-striped

  • Grid

  • Full documentation

  • Mixin center

  • Mixin container

  • Mixin col

  • Hover

  • Full documentation

  • Mixin hover

  • Mixin hover-focus

  • Mixin plain-hover-focus

  • Mixin hover-focus-active

  • Icons

  • Full documentation

  • Mixin svg-icon

  • Images

  • Full documentation

  • Mixin img-fluid

  • Lists

  • Full documentation

  • Mixin list-unstyled

  • Positioning

  • Full documentation

  • Mixin size

  • Mixin clearfix

  • Mixin z-index

  • Mixin pseudo

  • Mixin absolute

  • Mixin fixed

  • Mixin relative

  • Mixin sticky

  • Responsive

  • Full documentation

  • Mixin responsive-prop

  • Mixin responsive-embed

  • Mixin responsive-col

  • Shapes

  • Full documentation

  • Mixin triangle

  • Spacing

  • Full documentation

  • Mixin ml

  • Mixin mt

  • Mixin mr

  • Mixin mb

  • Mixin mx

  • Mixin my

  • Mixin m

  • Mixin pl

  • Mixin pt

  • Mixin pr

  • Mixin pb

  • Mixin px

  • Mixin py

  • Mixin p

  • Tables

  • Full documentation

  • Mixin table

  • Mixin table-bordered

  • Mixin table-responsible

  • Mixin table-striped

  • Mixin table-hover

  • Typography

  • Full documentation

  • Mixin text-hide

  • Mixin text-truncate

  • Mixin font

  • Variables

  • Full documentation

  • Bugs and feature requests

    Found bug? Or maybe you've got great idea for feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet - don't hesitate to open a new issue!

    Community

    Get updates on 7ninjas's development and chat with the project maintainers and community members.

    Versioning

    To see new features and changes for each released version checkout the Releases section of our GitHub project

    License

    Code released under the MIT License.

      我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
      原文