-1

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

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

所以它相当于

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

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

4

2 回答 2

0

The answer is No, it is not possible to write CSS in that way without using LESS or SASS. LESS and SASS were invented to save you all the typing, since vanilla CSS does not support nested rules.

In addition to providing a solution to nested rules, by letting you use mixins, variables, functions, operations and namespaces they can save you a lot more typing than you are currently asking for, and they will help you to keep things organised and therefore easy to maintain.

As @NOX points out, you can either add a JavaScript file to your website which compiles it on the fly, or you can use a plugin for your IDE which compiles your LESS or SASS files as you save them in your code editor. The first option would have a negative impact on your web sites loading time, the last option doesn't have an impact on your web sites loading time at all.

With all these pro's there's only really one reason left for not using LESS or SASS, and that would be not wanting to pay for a plugin which compiles things for you. I'm using Web Workbench by Mindscape on Visual Studio, it works great, and there's a free version.

于 2013-05-27T03:51:32.780 回答
0

使用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。

  • 当然，您必须为您的编辑器安装一个插件。
于 2013-05-27T03:05:47.027 回答