NPM 包 ember-cli-css-extensions 使用教程

CSS 是前端开发中不可或缺的一环。在使用 CSS 过程中，经常需要做到类似以下的操作：

  • 定义一个基础的 CSS 样式
  • 在不同的需要中，基于基础样式进行调整
  • 定义不同状态下的样式，如:hover, :active 等
  • 在不同的场景下，对同一元素进行不同的样式设置

针对这些需求，有一个非常好用的 NPM 包 ember-cli-css-extensions。本文将详细介绍该包的使用方法。

安装

在使用 ember-cli-css-extensions 之前，需要先安装 Ember CLI：

--- ------- -- ---------

然后，在 Ember 项目中，使用以下命令安装 ember-cli-css-extensions：

----- ------- ------------------------

基本使用

在 CSS 中，我们可以使用 @extend 关键字实现样式的重用。例如：

---- -
  ----------------- -----
  ------- --- ----- -----
  ------ -----
  -------- -------------
  ---------- -----
  ------- -----
  ------------ -----
  -------- - -----
  ----------- -------
  ---------------- -----
  --------------- ----------
  --------------- -------
-

------------ -
  ------- -----
  ----------------- -----
  ------------- -----
  ------ -----
-

------------ -
  ------- -----
  ----------------- -----
  ------------- -----
  ------ -----
-

在上述代码中，我们定义了一个 .btn 的基础样式，然后通过 @extend 实现了 .btn-primary 和 .btn-success 的样式重用。

而在 ember-cli-css-extensions 中，则可以使用 .extends 类来实现样式的继承。

例如：

--------- -
  ----------------- -----
  ------- --- ----- -----
  ------ -----
  -------- -------------
  ---------- -----
  ------- -----
  ------------ -----
  -------- - -----
  ----------- -------
  ---------------- -----
  --------------- ----------
  --------------- -------
-

------------ -
  -------- -
    ----------
    ----------------- -----
    ------------- -----
    ------ -----
  -
-

------------ -
  -------- -
    ----------
    ----------------- -----
    ------------- -----
    ------ -----
  -
-

和普通 CSS 的实现代码类似，我们同样定义了一个基础的样式 .btn-base， 然后使用 .extends 声明了 .btn-primary 和 .btn-success 继承自 .btn-base，并在继承时通过后代选择器，实现了样式的调整。

深度继承

在 CSS 中，有时候需要通过选择器的嵌套，实现样式的修饰。例如：

---------- -
  ----------------- -----
  ------ -----
-

而在使用 ember-cli-css-extensions 时，则可以使用 $self 关键字实现嵌套的选择器调用。

例如：

--------- -
  ----------------- -----
  ------- --- ----- -----
  ------ -----
  -------- -------------
  ---------- -----
  ------- -----
  ------------ -----
  -------- - -----
  ----------- -------
  ---------------- -----
  --------------- ----------
  --------------- -------

  ------- -
    ----------------- -----
    ------ -----
  -

  ---------- -
    ------------ -----
  -
-

------------ -
  -------- -
    ----------
    ----------------- -----
    ------------- -----
    ------ -----

    ------- -
      ----------------- -----
      ------ -----
    -

    ---------- -
      ----- -
        ------------ -------
      -

      ---------------- ----------
    -
  -
-

------------ -
  -------- -
    ----------
    ----------------- -----
    ------------- -----
    ------ -----

    ------- -
      ----------------- -----
      ------ -----
    -

    ---------- -
      --------------- ----------
    -
  -
-

在上述代码中，我们定义了一个 .btn-inner 的子元素样式，并使用 $self 实现了 .btn-primary 和 .btn-success 对于子元素 .btn-inner 样式的调整。

同时，我们也可以通过类似于 .btn-base:hover 的样式，定义基础样式的 :hover 状态，并在继承时进行修改。

示例代码

下面是一个完整的示例代码：

---- ----------------------------- --- 
------- -------- ---------- ----------- ------------------ -----
  ----- --------------------------------
---------

------- -------- ---------- ----------- ------------------ -----
  ----- --------------------------------
---------
-- ------------------ --

--------- -
  ----------------- -----
  ------- --- ----- -----
  ------ -----
  -------- -------------
  ---------- -----
  ------- -----
  ------------ -----
  -------- - -----
  ----------- -------
  ---------------- -----
  --------------- ----------
  --------------- -------

  ------- -
    ----------------- -----
    ------ -----
  -

  ---------- -
    ------------ -----
  -
-

------------ -
  -------- -
    ----------
    ----------------- -----
    ------------- -----
    ------ -----

    ------- -
      ----------------- -----
      ------ -----
    -

    ---------- -
      ----- -
        ------------ -------
      -

      ---------------- ----------
    -
  -
-

------------ -
  -------- -
    ----------
    ----------------- -----
    ------------- -----
    ------ -----

    ------- -
      ----------------- -----
      ------ -----
    -

    ---------- -
      --------------- ----------
    -
  -
-

效果如下：

通过对比上面的代码和普通 CSS 的使用，我们可以发现，使用 ember-cli-css-extensions 后，通过类似于 .extends 和 $self 这样的特殊的语法，我们能够更加快速方便地完成样式的定义和继承，并且使得代码更加具有可读性和可维护性。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005573c81e8991b448d431a

阅读全文

猜你喜欢

  • npm 包 generator-hr 使用教程

    在前端开发中，我们经常需要根据项目需求生成一些模板文件或者代码。这时就可以使用 yeoman 这样的工具。而 generator-hr 就是一个基于 yeoman 的前端项目生成器，它可以帮助我们快速...

    2 年前
  • npm 包 simple-immutable 使用教程

    在前端开发中，使用 immutable（不可变性）的编程方式可以帮助我们代码更加健壮，易于维护，同时也提高了性能。现在已经有很多 immutable 相关的工具库，其中之一就是 simple-immu...

    2 年前
  • npm 包 alphakey 使用教程

    简介 alphakey 是一个 npm 包，用于将普通的数字或字母字符串转换为响应式的字符串。它可以让你根据不同的设备或屏幕大小，自动调整字体大小和间距，以达到更好的视觉效果。

    2 年前
  • npm 包 eslint-config-amplify-base 使用教程

    如果你是一位前端工程师，那么你肯定知道代码质量对于项目的维护和开发的重要性。在实际工作中，我们会用到一些 lint 工具来保持代码风格的统一和语法的规范性。其中 eslint 是一个被广泛使用的工具。

    2 年前
  • npm 包 ejoy-config 使用教程

    在前端开发中，我们经常会遇到需要获取配置信息的情况。而 ejoy-config 是一款 npm 包，可以帮助我们快速方便地获取配置信息，同时也支持配置热更新。 安装 我们可以通过 npm 命令来安装 ...

    2 年前
  • npm 包 gun-levelgraph 使用教程

    简介 gun-levelgraph 是一个基于 Graph 数据库 LevelDB 和 JavaScript 分布式数据库 Gun.js 的 npm 包，是一种支持 Graph 数据结构的 Key-V...

    2 年前
  • npm 包 vi-base.vue 使用教程

    简介 vi-base.vue 是一个 Vue.js 组件库，提供了一些常用的 UI 组件和基础功能组件。这个库是基于 Bootstrap 4 设计的，主要包括以下几个部分： Layout（布局） N...

    2 年前
  • npm 包 wlbwrx 使用教程

    前言 现如今，前端开发越来越受到重视，相应的前端工具也越发丰富。而其中，npm 包作为前端开发必不可少的一部分，为前端开发者提供了更为便捷的插件管理和开发封装工具。

    2 年前
  • npm 包 vi-utils 使用教程

    简介 npm 是 Node.js 的包管理工具，方便我们安装、升级、删除各种应用包。vi-utils 是一个基于 Vue.js 的开源工具库，提供了一系列的前端开发工具函数。

    2 年前
  • npm包babel-plugin-string-minify使用教程

    当我们开发前端代码时会遇到很多字符串文件，比如模板文件、国际化文件等，这些文件虽然简单，但通常会占用大量的带宽和加载时间，特别是在移动端设备上。babel-plugin-string-minify就是...

    2 年前
  • npm 包 fliphub-examples-empty 使用教程

    介绍 npm 是前端开发中非常常用的工具，主要用于管理和分享代码库。在 npm 上可以找到非常多的优秀的第三方包，这些包能够帮助我们更好地进行开发和调试，降低开发难度。

    2 年前
  • npm 包 ivy-cli 使用教程

    前言 随着前端技术的飞速发展，前端工程师从仅仅掌握 HTML、CSS 和 JavaScript 到了解了更多的技术工具，如构建工具、打包工具等，这些工具可以帮助前端开发人员更快捷、更高效地开发应用程序...

    2 年前
  • npm 包 node-openalpr-region 使用教程

    随着人工智能的不断发展，自动识别技术在各个领域得到了广泛应用，其中车辆识别技术在智慧交通、车辆管理等领域尤为重要。node-openalpr-region 是一个基于 OpenALPR 的 node....

    2 年前
  • npm 包 calculus-of-constructions 使用教程

    前言 calculus-of-constructions 是一款适用于前端类开发的 npm 包，其主要作用是提供一种较为通用的语法表示方法，用以描述一些复杂的计算模型。

    2 年前
  • NPM 包 access-mod 使用教程

    在前端开发中，我们经常需要在多个不同的组件之间共享状态和方法。要确保组件之间的数据安全性和私有性，我们使用了一些技术来实现访问限制。其中一种方法是通过包管理工具 NPM 安装使用 access-mod...

    2 年前
  • npm 包 babylon-combine 使用教程

    在前端开发领域中，使用 npm 包是很常见的事情，其中 babylon-combine 就是一种非常有用的工具。本篇文章将介绍 babylon-combine 的基本使用方法和一些进阶技巧。

    2 年前
  • npm 包 @mree/mre-react-utils 使用教程

    在前端开发中，我们经常需要使用第三方工具或者库，这些工具或库可以极大地提升我们的开发效率和代码质量。其中，npm 包是最常用的一种工具，它为我们提供了数以百万计的包，覆盖了前端开发的方方面面。

    2 年前
  • NPM 包 rts-fw 使用教程

    rts-fw 是一个前端开发框架，提供了很多实用的功能和组件，可以帮助开发者更快、更方便地开发 Web 应用程序。本篇文章将介绍如何使用 rts-fw。 安装 使用 npm 安装 rts-fw： --...

    2 年前
  • npm 包 vue2-svg-icon 使用教程

    在前端开发中，图标是非常重要的组件之一。如何在 Vue 项目中使用 svg 图标呢？今天我们要介绍一个 npm 包，vue2-svg-icon，可以帮助你轻松添加 svg 图标到你的 Vue 应用中。

    2 年前
  • npm 包 node-red-contrib-circularbuffer 使用教程

    前言 Node-RED 是一个用于编写 IoT 交互式流程的编程工具，它基于 Node.js 应用运行时。Node-RED 为 JavaScript 开发者提供了一种快速轻松的方式来开发串联各种 AP...

    2 年前

相关推荐

    暂无文章