在 Ember.js 前端开发过程中，我们常常需要进行布局和样式的调整，而实现这些功能的常用方案之一是使用 CSS 框架和 mixin。ember-singularity-mixins-efarina 是一个基于 Singularity Grid System 的 mixin 插件，可以在 Ember.js 的项目中快速实现自适应布局的需求。
安装
使用 npm 安装 ember-singularity-mixins-efarina。
npm install ember-singularity-mixins-efarina --save-dev
在 app/styles/app.scss 文件中引入插件：
@import 'ember-singularity-mixins-efarina';
使用
栅格布局
插件提供了以下 mixin 可以用于实现栅格布局。栅格大小分别是 1/4、1/3、1/2、2/3、3/4。在 mixin 名称中，后缀数字表示占用的栅格数，例如 .col-1of4 表示该元素占用 1/4 的宽度。
-- -------------------- ---- ------- -- --- -- --------- - -------- ------------- --- - -- --- -- --------- - -------- ------------- --- - -- --- -- --------- - -------- ------------- --- - -- --- -- --------- - -------- ------------- --- - -- --- -- --------- - -------- ------------- --- -
响应式布局
在 mixin 名称中添加后缀 @mq，可以实现响应式布局。例如 .col-1of4@mq 表示该元素在移动设备屏幕上占用 1/4 的宽度，在其他屏幕上占用 1/3 的宽度。
-- -------------------- ---- -------
-- -----
------------ -
-- -------- --- --
------ ------ --- ----------- ------ -
-------- ------------- ---
-
-- ------ --- --
-------- ------------- ---
-样式控制
在 mixin 名称中添加后缀 -- 后加上样式属性名称，可以实现控制元素的各项样式值。例如， .col-1of4--background 表示控制元素的背景颜色。
// 样式控制
.col-1of4--background {
background-color: red;
}示例代码
HTML:
-- -------------------- ---- ------- ---- ----------------------- ----- --- ---------- - --------- - - --- ----- ------------------ --------- --------------- ------- ------- --- ------ ------- ----- --- ------- - - --- ----- ------------------ --------- --------------- ------- ------- --- ------ ------- ----- --- ---- - - --- ----- ---------------- --------------- ------- ------- --- ------ ------- ----- --- ---- - - --- ----- --------------- ------------ --------------- ------- ------- --- ------ ------- ----- --- ------- - - --- ----- --------------- ------------ --------------- ------- ------- --- ------ ------- ----- ------ --- ----- --------------- ----------- --------------------- --------------- ------- --------- --- -- --- ---------------- ------- ------
SCSS:
-- -------------------- ---- -------
-- ----
------- -----------------------------------
-- ----
--------------- -
-------- -----------------
---------- ------- -- ------
-
-- ----
--------- -
-------- ------------- ---
-
--------- -
-------- ------------- ---
-
--------- -
-------- ------------- ---
-
--------- -
-------- ------------- ---
-
--------- -
-------- ------------- ---
-
-- -----
------------ -
------ ------ --- ----------- ------ -
-------- ------------- ---
-
-------- ------------- ---
-
------------ -
------ ------ --- ----------- ------ -
-------- ------------- ---
-
-------- ------------- ---
-
------------ -
------ ------ --- ----------- ------ -
-------- ------------- ---
-
-------- ------------- ---
-
------------ -
------ ------ --- ----------- ------ -
-------- ------------- ---
-
-------- ------------- ---
-
------------ -
------ ------ --- ----------- ------ -
-------- ------------- ---
-
-------- ------------- ---
-
-- ----
--------------------- -
----------------- ----
-结语
通过使用 ember-singularity-mixins-efarina，我们可以在 Ember.js 项目中快速实现自适应布局的需求。它不仅提供了栅格布局和响应式布局的实现方式，还支持透过 mixin 控制元素的各项样式值。相信对于前端开发人员，它将提供很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672381e8991b448e39a3