-1

すべてのクラスがプロファイル ラッパー内にある必要があることを指定する方法はありますか。そのような

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

それが同等になるように

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

入力をすべて省く方法を探しているだけで、Less や Sass などのコンパイラは使用したくありません。事前に感謝します。

4

2 に答える 2

0

答えはNoです。LESSやSASSを使わずに CSS を書くことはできません。通常の CSS はネストされたルールをサポートしていないため、LESS と SASS はすべての入力を節約するために考案されました。

ネストされたルールの解決策を提供することに加えて、ミックスイン、変数、関数、操作、および名前空間を使用できるようにすることで、現在求めているよりもはるかに多くの入力を節約でき、物事を整理して簡単に保つのに役立ちます。維持する。

@NOX が指摘しているように、JavaScript ファイルを Web サイトに追加してオンザフライでコンパイルするか、IDE のプラグインを使用して、コード エディターに保存するときに LESS または SASS ファイルをコンパイルすることができます。最初のオプションは Web サイトの読み込み時間に悪影響を及ぼしますが、最後のオプションは Web サイトの読み込み時間にまったく影響しません。

これらすべてのプロを考えれば、LESS や SASS を使用しない理由はただ 1 つしかありません。それは、何かをコンパイルしてくれるプラグインにお金を払いたくないということです。私はVisual Studio でMindscape の Web Workbenchを使用しています。うまく機能し、無料バージョンもあります。

于 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ファイルを Web サイトに追加するか (理想的ではありません)、コード エディターを使用します。LESSファイルをエディター (Sublime Text や Visual Studio .NET など) で保存すると、CSS が生成されます。

  • もちろん、エディタ用のプラグインをインストールする必要があります。
于 2013-05-27T03:05:47.027 に答える