vue组件引入scss变量
Kotti设计系统 (Kotti Design System)
This design system helps to unify our design language and provides the documentation for further product design decisions. The Kotti design system has two main parts: foundation and components.
该设计系统有助于统一我们的设计语言，并为进一步的产品设计决策提供文档。 Kotti设计系统有两个主要部分：基础和组件。
The foundation is higher level and works as a guideline for the whole system, which defines the layout, color, icons, typography and writing style. It also creates styles and characteristics which are different from other design systems.
该基础较高，可作为整个系统的准则，定义了布局，颜色，图标，版式和书写风格。 它还创建了与其他设计系统不同的样式和特征。
Components are more concrete elements. They are pre-defined and cannot be changed in most cases. These components include banners, buttons, drawers and more.
组件是更具体的元素。 它们是预定义的，在大多数情况下不能更改。 这些组件包括横幅，按钮，抽屉等。
View Demo 查看演示 Download Source 下载源
设计原则 (Design Principles)
Keen:The design should encourage users to engage with the product.
敏锐的：设计应鼓励用户参与该产品。
Okay:It’s okay not to follow the foundation if there's good reason. It’s okay to break the design principles when it’s the only way to solve the requirement.
好的：如果有充分的理由，也可以不遵循基础。 当它是解决需求的唯一方法时，可以打破设计原则。
Transparent:Making the design easy to perceive or detect, user can process smoothly without being aware of its presence.
透明：使设计易于感知或检测，用户可以在不知道其存在的情况下进行平滑处理。
Timely:The design need to response and help user finish their task in a timely matter.
及时：设计需要及时响应并帮助用户及时完成任务。
Intuitive:The design should be intuitive and easy to understand, and decrease the learning curve.
直观：设计应直观易懂，并减少学习曲线。
项目范围 (Project Scope)
Kotti Design System includes:
Kotti设计系统包括：
资料夹结构 (Folder Structure)
kotti├─ docs // nuxt.js managed design guideline & usage documentation│ ├─ assets| ├─ pages├─ packages│ ├─ kotti-style // scss file documentation│ └─ kotti-button│├─ src│├─ index.js├─ package.json├─ CHANGELOG.md└─ README.md
安装 (Install)
# add kotti-ui package to your projectyarn add @3yourmind/kotti-ui
// in main.jsimport Vue from 'vue'import KottiUI from 'kotti-ui'// from v.0.0.4 kotti-ui includes kotti-styleimport '@3yourmind/kotti-ui/dist/KottiUI.css'Vue.use(KottiUI)
建立 (Build)
# install dependenciesyarn install# build kott-uiyarn run build:kotti# generate kotti-docs for github pages to /gh-pagesyarn run build:gh-pages
发展 (Develop)
# install dependenciesyarn install# serve with hot reload at localhost:3000yarn dev:docs# deploy documents on githubyarn deploy:docs
翻译自: /vue-js-ui-components-design-system-featured-with-scss/
vue组件引入scss变量
