css 为许多其他选择器指定主 css 选择器答案

【问题标题】：Css specify master css selector for many other selectorscss 为许多其他选择器指定主 css 选择器
【发布时间】：2013-05-27 11:51:32
【问题描述】：

有没有办法指定所有类都应该在配置文件包装器中。比如

.profileWrapper {
   .aPictureOfMe {
      width: 200px;
   }
   .listOfFriends {
      margin-right: 10px;
   }
}

这样就相当于

.profileWrapper.aPictureOfMe {
   width: 200px;
}
.profileWrapper.listOfFriends {
   margin-right: 10px;
}

我只是在寻找一种方法来节省我所有的输入，并且宁愿不使用诸如 Less 或 Sass 之类的编译器。先谢谢了。

【问题讨论】：

使用LESS。
LESS 不是编译器，它是一种编写 CSS 的方式，那么您必须将其编译为浏览器的标准 CSS。您可以通过将 js 文件添加到您的网站（不理想）或通过您的代码编辑器来完成此操作。每当您在编辑器（如 Sublime Text 或 Visual Studio .NET）中保存 LESS 文件时，它都会为您生成 CSS。而已。 [当然你必须为你的编辑器安装一个插件）

标签： css css-selectors

【解决方案1】：

答案是否，不使用LESS 或SASS 是不可能这样写CSS的。 LESS 和 SASS 的发明是为了节省你所有的打字时间，因为 vanilla CSS 不支持嵌套规则。

除了为nested rules 提供解决方案之外，通过让您使用mixins、variables、functions、operations 和namespaces，它们可以为您节省比您当前要求的更多的输入为，它们将帮助您保持井井有条，因此易于维护。

正如@NOX 指出的那样，您可以将 JavaScript 文件添加到您的网站，以便即时编译它，或者您可以为您的 IDE 使用一个插件来编译您的 LESS 或 SASS 文件，因为您将它们保存在代码编辑器中.第一个选项会对您的网站加载时间产生负面影响，最后一个选项根本不会影响您的网站加载时间。

有了所有这些专业人士，不使用 LESS 或 SASS 的真正原因只有一个，那就是不想为为您编译东西的插件付费。我在 Visual Studio 上使用 Web Workbench by Mindscape，效果很好，而且有免费版本。

【讨论】：

【解决方案2】：

使用LESS。

// LESS
#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

/* Compiled CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

注意

LESS 不是编译器，它是一种编写 CSS 的方式。然后您必须将其编译为浏览器的标准 CSS。您可以通过将 js 文件添加到您的网站（不理想）或通过您的 代码编辑器 来做到这一点。每当您在编辑器（如 Sublime Text 或 Visual Studio .NET）中保存您的 LESS 文件时，它会为你生成一个 CSS。

当然，您必须为您的编辑器安装一个插件。

【讨论】：

我说我宁愿不使用编译器，这是唯一的解决方案吗？
不可以，但是你可以在服务器端用你自己的语言（比如PHP）或者你的代码编辑器（比如Sublime Text）编译它，然后使用编译好的项目中的 CSS。当用户浏览您的网站时，无需在运行时编译它。