タグ付けされた質問 「sass」

なぜ_scssでファイル名の前に置くのですか？ _filename.scss-なぜ必要なの_ですか？

147 css  sass 

ドキュメントを読みました。使用したい場合はscss、次のコマンドを実行する必要があります。 ng set defaults.styleExt scss しかし、それを実行してそのファイルを作成しても、コンソールにこのエラーが表示されます。 styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/Egen/Code/angular/src/styles.css'(…)

135 css  angular  sass  angular6  angular-cli 

次のことができるようになりたいです。 height: 25% - 5px; 明らかにそれを行うとエラーが発生します： Incompatible units: 'px' and '%'.

133 sass 

私はちょうどサスを発見しました、そして私はそれについてとても興奮しています。 私のウェブサイトでは、子コンビネーター（E > F）を使用してスタイル設定されたツリーのようなナビゲーションメニューを実装しています。 Sassでこのコードをより単純な（またはより良い）構文で書き換える方法はありますか？ #foo > ul > li > ul > li > a { color: red; }

125 css  css-selectors  sass 

CSSファイル内のすべての画像へのルートパスを含む1つの変数が必要です。純粋なSassでこれが可能かどうかはわかりません（実際のWebプロジェクトはRoRではないため、asset_pipelineやその派手なジャズは使用できません）。 これが機能しない私の例です。コンパイルすると、バックグラウンドのurlプロパティの変数の最初のインスタンスで（"Invalid CSS after "..site/background": expected ")"）と表示されます。 パスを返す関数を定義する： //Vars $assetPath : "/assets/images"; //Functions @function get-path-to-assets($assetPath){ @return $assetPath; } 関数の使用： body { margin: 0 auto; background: url($get-path-to-assets/site/background.jpg) repeat-x fixed 0 0; width: 100%; } 任意の助けいただければ幸いです。

123 css  sass 

私はCSSをよく知っていますが、Sassについて混乱しています。SCSSはCSSとどのように異なりますか？CSSの代わりにSCSSを使用すると、同じように機能しますか？

123 css  sass 

sassのプレースホルダー用のミックスインを作成しようとしています。 これは私が作成したミックスインです。 @mixin placeholder ($css) { ::-webkit-input-placeholder {$css} :-moz-placeholder {$css} ::-moz-placeholder {$css} :-ms-input-placeholder {$css} } これは私がミックスインを含めたい方法です： @include placeholder(font-style:italic; color: white; font-weight:100;); すべてのコロンとセミコロンがミックスインに渡されているため、これは明らかに機能しませんが、静的なcssを入力して上記の関数とまったく同じように渡したいと思います。 これは可能ですか？

122 css  sass 

計算によって幅をパーセンテージでscs​​sに設定したいのですが、エラーになります。 "...- width：（4/12）％"の後の無効なCSS：予期された式（たとえば、1px、太字）は ";"でした 私は何かしたいです $my_width: (4/12)%; div{ width: $my_width; } そこに％記号を追加するにはどうすればよいですか？ pxとemで同じ質問

121 css  sass 

CLI（v3.7.0）を使用して新しいプロジェクトを作成する場合dart-sass、node-sassコンパイラーを選択するオプションがあります。 Vueのドキュメントで宣言されているよりも具体的に、これらは互いにどのように比較されますか？ Sassパフォーマンスに関するヒント Dart Sassを使用する場合、非同期コールバックのオーバーヘッドのため、同期コンパイルはデフォルトで非同期コンパイルの2倍の速度であることに注意してください。このオーバーヘッドを回避するために、ファイバーパッケージを使用して、同期コードパスから非同期インポーターを呼び出すことができます。これを有効にするには、プロジェクトの依存関係としてファイバーをインストールするだけです。 npm install -D fibers また、ネイティブモジュールであるため、OSやビルド環境によって互換性の問題が異なる場合があることにも注意してください。その場合は、実行npm uninstall -D fibersして問題を解決してください。 ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus 編集2020/01： Vue CLI 4.2.2新しいプロジェクトの作成はdart-sass、前の最初のオプションとしてまだ提案されていますnode-sass。それでもnode-sass、よりパフォーマンスの高い選択肢であることがここで確立されており、ダーツサスを使用する人はほとんどいません（ccleveのコメント）。 EDIT 2020/09：としてアリBahramiは彼の豊富な答えを更新し、dart-sass好ましい選択肢であるとしてnode-sass廃止予定としてマークされています。 dart-sassJSでコンパイルされたバージョンはパフォーマンスが悪いので残念です。ただし、開発者はこれを十分に認識しており、この号で述べられているように、パフォーマンスの向上に取り組んでいます。

121 vue.js  webpack  sass  vue-cli  node-sass 

次のように、Sass変数の使用と@mediaクエリを組み合わせようとしています。 $base_width:1160px; @media screen and (max-width: 1170px) {$base_width: 960px;} @media screen and (min-width: 1171px) {$base_width: 1160px;} $base_width 次に、スタイルシートの幅の割合ベースの測定のさまざまなポイントでを定義して、流動的なレイアウトを作成します。 これを行うと、変数は正しく認識されているように見えますが、メディアクエリの条件は正しくありません。たとえば、上記のコードは、画面の幅に関係なく1160pxのレイアウトを生成します。@mediaステートメントを次のようにフリップフロップすると： @media screen and (min-width: 1171px) {$base_width: 1160px;} @media screen and (max-width: 1170px) {$base_width: 960px;} 画面幅に関係なく、960pxのレイアウトが生成されます。また、最初の行を削除する$base_width: 1160px;と、未定義の変数に対してエラーが返されることにも注意してください。私が見逃しているアイデアはありますか？

120 sass  media-queries 

私は仕事用の新しいMacをセットアップしている最中です。Grunt＆Grunt CLIをグローバルにインストールしました。次にnpm install、プロジェクトフォルダー内ですべての依存関係をインストールしました。 これまでのところ問題はありませんが、sass:distタスクを実行しようとするとすぐに、次の警告が表示されます。 Warning: You need to have Ruby and Sass installed and in your PATH for this task to work. More info: https://github.com/gruntjs/grunt-contrib-sass Use --force to continue. このタスクを実行するには、RubyとSassをよりグローバルなレベルでインストールする必要があることを理解しています。私はまだターミナルを操作するのが初めてPATHなので、重要なデータが保存されているシステムパス（変更可能）のように見えるものを見つけるために簡単な検索を行いました。 これは単にsudo grunt install contrib-sass -g問題を解決するためにa を実行できることを意味しますか？そして、Rubyについてはどうですか？私はいつもそれがすでにOS Xにインストールされていると思っていましたか？

117 ruby  macos  bash  terminal  sass 

node-sassを使用してArch Linuxでこのエラーを取得する。私はgulp-sassで使用しています。 Node Sass does not yet support your current environment: Linux 64-bit with false バージョン $ gulp -v [19:43:15] CLI version 3.9.1 [19:43:15] Local version 3.9.1 $ npm -v 3.9.0 ノード $ node -v v6.2.0 このコマンドを使用してnpm rebuild node-sassも、何も変更されません。

116 node.js  sass  archlinux  gulp-sass  node-sass 

もうしばらく前から考えていたので、今から皆さんの意見や考えられる解決策などを知りたいです。 テキストの色を変更したり、親のbackground-imageまたは-colorの覆われたピクセルの平均輝度に応じて、定義済みの画像/アイコンを切り替えたりするプラグインまたはテクニックを探しています。 背景の覆われた領域がかなり暗い場合は、テキストを白にするか、アイコンを切り替えます。 さらに、親がbackground-colorまたは-imageを定義していないかどうかをスクリプトが認識し、最も近いもの（親要素からその親要素まで）を検索し続けるとすばらしいでしょう。 この考えについてどう思いますか？すでに似たようなものはありますか？スクリプト例？ 乾杯、J。

114 javascript  jquery  html  css  sass 

以前にLESS.jsを使用したことがあります。使いやすいです。 <link rel="stylesheet/less" href="main.less" type="text/css"> <script src="less.js" type="text/javascript"></script> SASS.jsを見ました。どうすれば同じように使用できますか？SASSファイルを解析して、HTMLですぐに使用できます。SASS.jsはNode.jsで使用するためのもののようですか？ var sass = require('sass') sass.render('... string of sass ...') // => '... string of css ...' sass.collect('... string of sass ...') // => { selectors: [...], variables: { ... }, mixins: { ... }}

112 css  sass  less 

閉まっている。この質問はスタックオーバーフローのガイドラインを満たしていません。現在、回答を受け付けていません。 この質問を改善してみませんか？Stack Overflowのトピックとなるように質問を更新します。 5年前休業。 この質問を改善する できれば.scssファイルの構文を強調表示して、EclipseでSCSSファイルを編集したいと思います。 私はこれらのリソースが貴重であると感じました： http://sass-lang.com/editors.html-.scssファイル専用のエディタはありません。 http://colorer.sourceforge.net/eclipsecolorer-.scssファイルのみ Eclipseエディター内でSCSS開発を統合するにはどうすればよいですか？ または、より一般的には、CSSプリプロセッサをEclipseに統合するにはどうすればよいですか？

111 css  eclipse  sass  eclipse-plugin