css - Rails 和 SCSS 协同工作-6ren

css - Rails 和 SCSS 协同工作

转载作者：太空宇宙更新时间：2023-11-04 15:21:29

26

4

如果我使用这种编码风格，在“产品”的脚手架中，我将其添加到 applications.html.erb 中:

<body class = '<%= controller.controller_name %> ' >

然后在 products.css.scc 的样式表中，我为“products”定义了这样的嵌套:

.products {
  table {
    border-collapse: collapse;
  }

  table tr td {
    padding: 5px;
    vertical-align: top;
  }

  .list_image {
    width:  60px;
    height: 70px;
  }

  .list_description {
    width: 60%;

    dl {
      margin: 0;
    }

    dt {
      color:        #244;
      font-weight:  bold;
      font-size:    larger;
    }

    dd {
      margin: 0;
    }
  }
// .... continued...

然后在 products/index/index.html.erb 中，例如我可以有类似的东西 <td class = "list_description" > , ...

所以我的问题是我是否需要某种完全限定的命名来访问该 css 文件中的嵌套类？或者我可以在没有层次结构的情况下命名它们？

我在 DHH 的敏捷书籍中看到了这种处理 CSS 的方式 - 他创造了 Rails! - 但在 Michael Hartl 的书中，他做的是更传统的 CSS 嵌入。那么哪个更好呢？

最佳答案

这更像是一个 CSS 问题。

嵌套的 CSS 选择器被提议用于 CSS3，但 Sass 现在会处理它们。他们所做的是将选择器“命名空间”在不同的元素下:因此您可以只使用 class="list_description" 只要它在带有的元素内class="products"

换句话说，Sass 会将上面的翻译成这个等价的规则:

.products .list_description {
  width:60%;
}

这将匹配这个:

<div class="products">
  <div class="list_description">Matches</div>
</div>

但不是这个:

<div class="products"></div>
<div class="list_description">Does not match: not inside a "products" classed element.</div>

关于css - Rails 和 SCSS 协同工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14539751/

26

4

0

文章推荐： java - 在 Java 中使用 Atmosphere 传输

文章推荐： c++ - 在 'abs(double&)' 中重载 "avg += abs(num)"

文章推荐： java - 菜单选择及调用方法

文章推荐： c++ - 合并排序不能完全工作

css - Sass 循环 @import，a.scss 需要 b.scss 上的类，b.scss 需要 a.scss 上的类
我试图按部分组织我的 .css 文件，我需要从任何文件访问文件组中的任何类。在 Less 中，我可以毫无问题地创建一个包含所有文件导入的主文件，并且每个文件都导入主文件，但在 Sass 中，我收到一个
css - 使用 main.scss 和子组件 scss 文件嵌套 scss
我有一个全局 main.scss 文件，我在其中声明了一个 .small-size-text{ font-size: 12px; } 并且在作为login.scss 的子组件文件中，我将另一个类定
sass - 使用从另一个 scss 文件 (@use) 导入的变量时，Scss(实时 scss 编译器)会引发错误
这是一个我完全不明白的奇怪错误。我通常会先搜索并寻求答案，然后再将其发布到 StackOverflow 上。所以问题是我想使用从另一个名为的 scss 文件中导入的变量。 _variables.co
ruby-on-rails-3.2 - 将导入的 scss 文件命名为 .scss 或 .css.scss
我试图让 livereload 与 rails 3.2 一起工作，我遇到了这个问题，其中有一个引用，不使用 .css.scss 命名导入的 sass 部分: Rails: Use livereload
css - gulp:如何在 scss 文件之间通过管道传输 css 文件？ gulp.src( ['sassfile1.scss' , 'cssfile.css' ,'sassfile2.scss' ])
这是我当前在 gulpfile.js 中的代码部分: // Sass gulp.task('sass', function () { gulp.src(['./node_modules/boots
Webpack - 在所有其他 scss 模块中自动包含一个配置 scss 文件
我有这样一个样式文件的项目结构: client/ config-style.scss ------components/ ------style.scss -----------------my_co
sass - 在另一个 `.scss`文件中包括 `.scss`文件？
如何在另一个.scss文件中包括.scss文件？我试图将其写入文件中: app.scss: @include('buttons'); @include('dropzone'); body {
css - 如何在 scss 类中导入 scss 文件
当我向 body 添加“dark-theme”类时，我想添加一个不同的主题。我的实现是这样的: @import '../../../../node_modules/angular-grids/styl
css - 如何正确导入导入其他 CSS/SCSS 的 SCSS
我在一个 Angular 元素中有一个 SCSS，它从 node_modules 导入另一个 SCSS: @import "node_modules/grapesjs/src/styles/scss/
css - 可以将两个相同的 .scss 文件导入到两个不同的 .scss 文件吗？
它会缓存一个文件还是会导入两次并加倍我的代码？假设我有variable.scss 并且必须将它导入那两个apple.scss | orange.scss。这样可以吗？最佳答案根据需要多次导入 v
css - 无法覆盖其他组件 `style.scss` 文件中的 `scss`
这是 style.scss - 文件 @import '~bootstrap/scss/_functions.scss'; @import '~bootstrap/scss/_variables.sc
css - 从全局 SCSS 导入 SCSS 文件夹
我在我的应用程序上使用 Angular (Jhipster)，我想在我的 glocal.scss 文件中导入几个 .scss 文件。所以我创建了一个“util”文件夹(与 global.scss 文件
Vaadin SCSS 编译失败 - 找不到要导入的文件或无法读取 : . ./valo/valo.scss
我正在 MPR 中从 Vaadin 8 迁移到 Vaadin 14 LTS。我们项目中使用的 .scss 文件需要编译。我使用了以下插件 com.vaadin vaa
reactjs - 与 webpack 捆绑时如何为每个 .scss 文件提供变量.scss？
这是我当前的项目目录结构，因为我想不出更好的组织方式来组织每个组件都有自己的 .scss 文件的用例，但是，整个应用程序都是包含全局 variables.scss 文件的 Fed 主题。目前，我正在每
ReactJS - 包括 main.scss 中的其他 scss 文件
在我的reactJS应用程序中 - 我将所有.scss文件包含在一个main.scss文件中 - 在src文件夹中的styles文件夹下。我有以下 webpack 配置。尝试将 main.scss 文
angular - Angular 中的全局 scss 文件和组件的 scss 文件之间的区别
在最近的 Angular 7 项目中，我有一个组件(在文件 file-list.component.ts 中定义)，其中有一个 mat-paginator (来自 Angular Material 组
css - 在没有 Compass 混入的情况下将 SCSS 转换为 SCSS
我有一个引用了一些 Compass mixins 的 SCSS 文件。现在我想将它包含在一个不使用 Compass 的元素中。为此，我想将带有 Compass 混入的 SCSS 转换为没有 Compa
css - .css 到 .scss 最终变成 .scss.css
我只是在处理这个 tutorial 之后的本地元素它告诉我更改三个 css 文件: fluid_skeleton.css => _fluid_skeleton.scss 规范化.css => _规范化
node.js - 更好的方法将 scss 变量传播到每个 scss 文件
我在根文件夹中创建了一个全局 scss 变量文件对于导入变量我写 @import '../../../style_config/style_config'(全局变量文件) 到每个 scss 文件更
css - Webpack 在 SCSS @import SCSS 上抛出错误
我正在尝试将多个 SCSS 文件处理成 Webpack (3.6.0) 中的单个外部 CSS 文件，但我在解析 @import 语句时遇到问题。条目 index.js 包含: import './s

首页

博学

6Ren·AI

商城

css - Rails 和 SCSS 协同工作