程序员经验分享-hwhale

如何从 Sass 样式表中仅导入变量和 mixin？

2024-03-17

我正在使用 Zurb Foundation 4 (S)CSS 框架，并且遇到了大量重复样式的问题。这是因为在每个文件中我@import 'foundation'中，Foundation 中的所有样式也会导入（规则body, .row, .button和朋友）。这导致 SCSS 编译时间较长，并且难以在 Chrome 中导航 Web 开发人员控制台，因为所有 Zurb 的样式都声明了四到五次。

为了缓解这个问题，我创建了一个globalsscss 文件，其中包含 Foundation 使用的可重写变量（它是从foundation_and_overrides.scss, then foundation_and_overrides导入全局变量）。仅导入globals.scssfile 仅在不使用 Foundation mixins 的文件中消除重复。

它位于使用 Foundation mixins 的文件中：我可以仅从 SCSS 文件导入 mixin，而不导入具体的 Foundation 样式吗？


进口是要么全有要么全无的事情。文件中的所有内容都是您所得到的。但是，如果您查看 Foundation 的源代码，您可以修改一些变量来抑制发射样式（例如，在buttons https://github.com/zurb/foundation/blob/master/scss/foundation/components/_buttons.scss， 环境$include-html-button-classes设置为 false 将禁用样式）。此设计模式是特定于 Foundation 的，您不能指望其他库以这种方式编写。

当您通过导入粉底时@import "foundation"，您正在导入此文件：https://github.com/zurb/foundation/blob/master/scss/foundation.scss https://github.com/zurb/foundation/blob/master/scss/foundation.scss。如您所见，它导入了其他文件。如果您不需要所有内容，则不必导入此文件：只需导入您想要的特定文件（例如@import 'foundation/components/side-nav'仅适用于侧面导航文件）。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

rubyonrails

sass

zurbfoundation

modularity

如何从 Sass 样式表中仅导入变量和 mixin？ 的相关文章

  • 样式标签中的源映射是否有效？

    我在标签和源映射中遇到 CSS 问题 为了缩短项目的加载时间 我改变了将 CSS 放入 HTML 的方式 将其改为 h1 Source maps working wonderfully h1 进入这个

  • 如何向 Rails 应用程序添加自定义字体？

    我想在 RoR 应用程序中使用几种字体 但它们的格式主要是 ttf 和 otf 等 我该如何将这些文件嵌入到我的 Rails 应用程序中 也就是说 一旦我将它们放入我的资产文件夹中 将它们嵌入我的 CSS 和 或 LESS 文件中的语法到底

  • 如何适应特定子元素的宽度？

    problem 我正在尝试创建一个技能表 我无法问下一个问题为什么 所以我创建了一个新帐户并询问 当前状态 我想将元素的宽度与 meter 也就是说 如何设定区块的标准 meter 子元素 在上面的 gif 中 img meter 我想要保

  • 淘汰赛绑定，每个都可进行自定义

    我这里有一个情况 用于淘汰每个带有定制的绑定 这是我的代码 div div table tbody tr td td td td tr tbody table div div

  • 将 CSS 生成的三角形拆分为 2 个水平不同的相同颜色

    正如您应该能够通过此代码看到的那样fiddle http jsfiddle net Xh36r 1 以及下面 我希望能够分割显示在第二个 div 顶部的 CSS 生成的三角形水平均等在 之间orange and green使用的颜色 现在它

  • 我可以根据同一容器中另一个元素的大小强制内联文本换行吗？

    考虑这个 jsbin http jsbin com ElIKOKe 3 edit html css output 我有这个html div class container span The lime outlined container h

  • 服务器上的 Rails 会话

    我想让一些 Rails 应用程序在不同的服务器上共享同一个会话 我可以在同一服务器内完成此操作 但不知道是否可以在不同服务器上共享 有人已经做过或者知道怎么做吗 Thanks Use the 数据库会话存储 https github com

  • Rails/Ruby 合并两个具有相同键、不同值的哈希值

    我有两个想要合并的哈希值 它们看起来像这样 Hello gt 3 Hi gt 43 Hola gt 43 第二个哈希看起来像 Hello gt 4 Hi gt 2 Bonjour gt 2 我想合并这两个哈希数组 使结果看起来像 Hello

  • 使用 jQuery 更改父元素样式

    我有下一个 html 设置 div class one div class two a href class three Click a div div 我想更改具有类的元素的背景颜色 one当我点击元素时 three使用 jQuery 这

  • Rails 资源单数还是复数？

    我有一条搜索路线 我想将其设为单数 但是当我指定单数路线时 它仍然会生成复数控制器路线 这是应该的样子吗 resource search Gives me search POST search format action gt create

  • 如何在 Capybara 中 POST 到 URL？

    刚刚从 Cucumber Webrat 切换到 Cucumber Capybara 我想知道如何将内容 POST 到 Capybara 中的 URL 在 Cucumber Webrat 中我能够执行以下步骤 When I send to d

  • 为什么此 TTF 字体在我的浏览器中无法使用？

    我下载了一种名为 Clunk 的 TTF 字体 并尝试将其应用于某些文本 这是我正在使用的代码 h1 Test h1 这似乎不起作用 Chrome 给了我两个错误 Failed to decode downloaded font path

  • 将按钮文本放在一行上

    我的按钮文本在 safari 中显示在一行上 即使在初次单击后 但是在 google chrome 上 当您第一次到达该按 钮时 我的按钮将显示在一行上 但是当您浏览更多帖子并再次遇到 加载更多 按钮时 文本搞砸了 这只发生在谷歌浏览器上

  • Heroku Rails 应用程序级别不记录日志

    我在 Heroku 上有一个 Rails 应用程序 它没有在应用程序级别进行日志记录 当前版本 红宝石1 9 3 导轨3 1 3 在 config environment development rb 中有以下几行 config logge

  • 使用 CSS 网格布局使网格项内的元素高度相等

    我在长度超过 4 的 div 中有一系列文章 没有任何舍入行标签 我需要将其表示为每行 3 篇文章 列 的表格 可能包含display grid 每篇文章都有页眉 章节和页脚 如何在每行文章内实现每个标题的等高 每个部分的等高以及与文章底部

  • 如何将 Vue.js 作用域样式应用于通过视图路由器加载的组件？

    如何将 Vue js 作用域样式应用于通过以下方式加载的组件

  • 如何在 webpack 中渲染嵌套的 SASS？

    采取以下CSS MyComponent color blue Button color red 以及以下 React 组件 import React from react import classes from MyComponent sc

  • CSS 精灵按钮

    这些精灵按钮让我抓狂 我几乎可以让他们工作 但不完全是 我正在玩这个非常简单的精灵图像 我有一个 jsfiddle 项目 gt gt 这里 如果你想看的话 但如果你只想看一下 代码就在下面 http jsfiddle net jp2code

  • 仅针对 Rake 任务运行初始化程序

    我希望在执行 Rake 任务时运行某个初始化程序 但在运行 Rails 服务器时不运行 区分 Rake 调用和服务器调用的最佳方法是什么 Rake 允许您指定任务的依赖关系 最好的建议操作是将特定于 rake 的初始化放入其自己的任务中 而

  • 将查询字符串参数作为表单发布的一部分发送

    有没有办法捕获查询字符串并将其作为表单帖子的一部分发送 我正在使用 Rails 2 3 5 我的用户所在的页面有多个查询字符串参数 在此页面上 他们将提交一份表格 在接收帖子的操作中 我想知道这些查询字符串参数是什么 显然 它们不是作为邮件

随机推荐

  • WPF DataBinding：取消属性更改 - 组合框未对齐

    我有一个带有组合框和文本框的 WPF 表单 两者都数据绑定到对象的属性 更改组合框或文本框输入会更新对象的属性 并且数据绑定会启动并更新 UI 问题是 我实现了一种取消更改的方法 该方法有效 但搞砸了 UI 更新 如果我从组合框进行更改并取

  • C# 中的 Google 地理编码 Json 解析问题

    我的代码运行良好 但我似乎无法到达树的更深部分 我正在尝试拉动经度和纬度 下面的代码将 status 没有问题拉为 OK 在响应的最后 geometry gt location gt lat 和 lng 的语法是什么 这是我的代码 stri

  • WinRT中ListView的项目插入动画

    最近 我开始构建自己的大型 Windows 8 应用商店应用程序 在 UI 方面 我开始复制一些好的 UI 我遇到了一个非常有趣的动画 即在标准邮件应用程序的列表视图中插入新元素 当您单击链时 它会展开并显示链中的所有消息 Here htt

  • 如何创建一个尾递归方法，该方法也可以以非尾递归方式引用自身

    假设我有一种用于长时间运行的计算的机制 可以暂停自己以便稍后恢复 sealed trait LongRunning R case class Result R result R extends LongRunning R case clas

  • 在同构 React 组件中导入 CSS 文件

    我有一个 React 应用程序 其中包含用 ES6 编写的组件 通过 Babel 和 Webpack 进行编译 在某些地方 我想包含具有特定组件的特定 CSS 文件 如中所建议的React webpack 食谱 https christia

  • Rails 6 中的自动加载和 Zeitwerk 模式

    Rails 6 中的 Zeitwerk 模式中是否有任何代码被折旧 class Application lt Rails Application Initialize configuration defaults for originall

  • 执行批量插入 SQLAlchemy 的最佳方法

    我有一张桌子叫products 其中有以下列id product id data activity id 我本质上想做的是复制大量现有产品并更新它activity id并在产品表中创建新条目 例子 我已经有 70 个 Activity id

  • MATLAB 奇怪的“输入参数太多”错误

    对于一个项目 我尝试使用 matlab 调用另一个 m 文件中的函数 然而 它说 没有足够的输入参数 即使我确实传递了我相当确定是足够的输入参数 在 eval square m 中 function f eval square x fitn

  • AWS Cloudwatch 未触发 API 调用

    我试图在任何 API 调用上创建规则触发器以进行创建 但没有取得任何成功 我有另一个规则 每当 ec2 实例运行时就会触发该规则 但该规则不会针对 RunInstances 触发 尽管我在 API 日志中看到带有 RunInstances

  • emacs 跨帧跟随模式

    有没有一种方法可以像在跟随模式中那样获得行为 但可以在单独的框架中跨越多个窗口 我必须处理一些令人讨厌的遗留代码 这些代码有七页砖块 八层深度的嵌套 for 循环 其中有很多 goto 它有助于查看尽可能多的代码 以便充分理解和重写它 而不

  • Symfony2 表单用数据预填充字段

    暂时假设该形式使用了一个虚构的Animal文档对象类来自ZooCollection只有两个属性 名称 和 颜色 symfony2 questions tagged symfony2 我正在寻找一个工作简单愚蠢的解决方案 to pre fil

  • Streambuf到底是什么？我该如何使用它？

    我正在尝试更多地了解 I O 流在 C 中如何工作 但我真的很困惑何时使用什么 到底什么是streambuf 我什么时候使用streambuf 与string an istream or a vector 我已经知道最后三个 但不知道如何s

  • 如何在 Odoo 模板语言中使用 if

    我正在尝试使用与 Django 中相同的功能 div class 在 Odoo 我有 div

  • 使用 Runtime.getRuntime().exec(command) 时用户向命令行输入；

    我认为这是不可能的 但我一直在使用 Process p Runtime getRuntime exec command 在命令行上运行命令 但现在我遇到了一种情况 我正在运行的命令会要求一些用户输入 例如用户名 这无法通过正在执行的命令的参

  • 如何从 emberjs 中的操作返回值

    如何从操作中返回一些值 我试过这个 var t this send someAction params actions someAction function return someValue 操作不返回值 仅返回 true false u

  • 在java中选择特定类型的文件

    我使用以下代码在 java 中选择文件 File folder new File path to folder File listOfFiles folder listFiles 现在如果我只想选择图像文件该怎么办 使用以下版本之一File

  • 如何从 DSpace 反馈页面的修改版本中获取引用页面（项目）的标题？

    如何从反馈页面的修改版本中获取项目的标题 就像 jspui 中的 推荐此项目 一样 我希望也能生成页面的结果网址 如下所示http example com feedback handle 123456789 123 http example

  • 在pygame中打印用户的输入

    我几乎已经完成了我正在为学校项目制作的一款游戏 但现在我在游戏的一小部分上遇到了困难 我能够获取用户的姓名并使用它来将其写入排行榜 csv 文件 但我想要这样做 以便无论用户键入什么 游戏都会将用户的输入打印到屏幕上 就像您键入时一样在搜索

  • 如何在Python中计算NTLM哈希值？

    如何在 python 中计算密码的 NTLM 哈希值 有任何库或示例代码吗 我想要它用 python 编写 NTLM 强力工具 如 Cain 和 Abel 它的使用其实非常简单hashlib here http docs python or

  • 如何从 Sass 样式表中仅导入变量和 mixin？

    我正在使用 Zurb Foundation 4 S CSS 框架 并且遇到了大量重复样式的问题 这是因为在每个文件中我 import foundation 中 Foundation 中的所有样式也会导入 规则body row button和

热门标签