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

私が読んでいることから、Sassは変数と数学のサポートによりCSSをより強力にする言語です。 SCSSとの違いは何ですか？同じ言語になっているのでしょうか？似てる？違う？

1902 css  sass 

calc()Sassスタイルシートで関数を使用しようとしていますが、いくつか問題があります。これが私のコードです： $body_padding: 50px body padding-top: $body_padding height: calc(100% - $body_padding) 変数の50px代わりにリテラルを使用すると、body_padding必要なものが正確に得られます。ただし、変数に切り替えると、次のようになります。 body { padding-top: 50px; height: calc(100% - $body_padding); } calc関数内の変数を置き換える必要があることをSassに認識させるにはどうすればよいですか？

1346 css  sass  css-calc 

とにかく通常のCSSファイルをSassの@importコマンドでインポートする方法はありますか？私はsassのすべてのSCSS構文を使用しているわけではありませんが、その機能の結合/圧縮を楽しんでいます。すべてのファイルの名前を* .scssに変更せずにそれを使用できるようにしたいと思います。

509 css  sass 

npm installでノードモジュールをインストールした後、コマンドプロンプトでgulp sass-watchを実行しようとしました。その後、私は以下の応答を得ました。 [18:18:32] Requiring external module babel-register fs.js:27 const { Math, Object, Reflect } = primordials; ^ ReferenceError: primordials is not defined これを試してみてください npm -g install gulp-cli

366 node.js  sass  gulp  gulp-sass 

私のScssファイルでいくつかのフォントを次のように構成しています： @font-face { font-family: 'Icomoon'; src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'), asset-url('icoMoon.woff', font) format('woff'), asset-url('icoMoon.ttf', font) format('truetype'), asset-url('icoMoon.svg#Icomoon', font) format('svg'); } 実際のフォントファイルは/ app / assets / fonts /に保存されています config.assets.paths << Rails.root.join("app", "assets", "fonts")application.rbファイルに追加しました コンパイルCSSソースは次のとおりです。 @font-face { font-family: 'Icomoon'; src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg"); } しかし、アプリを実行すると、フォントファイルが見つかりません。ログ： 2012-06-05 23:21:17 +0100配信されたアセット/icoMoon.ttf-404が見つかりません（13ms） …

345 ruby-on-rails  sass  asset-pipeline  font-face  assets 

現在のプロジェクトではSass（.scss）を使用しています。 次の例： HTML <div class="container desc"> <div class="hello"> Hello World </div> </div> SCSS .container { background:red; color:white; .hello { padding-left:50px; } } これはうまくいきます。 ネストされたスタイルを使用しながら、複数のクラスを処理できますか？ 上記のサンプルでは、​​これについて話しています。 CSS .container.desc { background:blue; } この場合、すべてがdiv.container正常になりredますがdiv.container.desc青になります。 これcontainerをSassで入れ子にするにはどうすればよいですか？

332 sass 

私はAngularを初めて使用し、Emberコミュニティから来ました。Ember-CLIに基づく新しいAngular-CLIを使用しようとしています。 新しいAngularプロジェクトでSASSを処理する最良の方法を知る必要があります。ember-cli-sassAngular-CLIの多くのコアコンポーネントがEmber-CLIモジュールで実行されているため、うまく機能するかどうかを確認するためにリポジトリを使用してみました。 それは機能しませんでしたが、私が何かを誤って設定しただけかどうか再びわかりません。 また、新しいAngularプロジェクトでスタイルを整理する最良の方法は何ですか？コンポーネントと同じフォルダにsassファイルがあると便利です。

329 angular  sass  angular-cli 

私のSCSSファイルにこれがあります： .class-a{ display: inline-block; //some other properties &:hover{ color: darken(#FFFFFF, 10%); } } .class-b{ //Inherite class-a here //some properties } class-bでは、のすべてのプロパティとネストされた宣言を継承したいと思いclass-aます。これはどのように行われますか？を使用してみまし@include class-aたが、コンパイル時にエラーが発生しました。

309 inheritance  sass 

google webスターターキットを使用したいと思います。node.js v0.12.0をインストールしました。node-sass＆gulp。 そして走った： $ sudo npm install 入力するとgulp serve、このエラーが発生しました： Using gulpfile ~/web-starter-kit/gulpfile.js Starting 'styles'... 'styles' errored after 93 ms Error: `libsass` bindings not found. Try reinstalling `node-sass`? at getBinding nodeとgulpを再インストールしましたが、これは役に立ちません。 次に何をすればいいですか？

263 node.js  sass  gulp 

実行する方法はありますか： sass --watch a.scss:a.css しかし、a.css縮小されてしまったのでしょうか？ スタイルシートをコンパイルするときに、別の縮小ステップを実行する必要がないようにするにはどうすればよいですか？

235 css  sass  minify 

プロジェクトのすべてのSASS変数定義を格納する1つの中央.scssファイルを保持したいと思います。 // _master.scss $accent: #6D87A7; $error: #811702; $warning: #F9E055; $valid: #038144; // etc... その性質上、プロジェクトには多数のCSSファイルが含まれます。プロジェクト全体のすべてのスタイル変数を1つの場所で宣言することが重要です。 SCSSでこれを行う方法はありますか？

216 css  sass 

次のSassミックスインがあります。これは、RGBaの例を半分完全に変更したものです。 @mixin background-opacity($color, $opacity: .3) { background: rgb(200, 54, 54); /* The Fallback */ background: rgba(200, 54, 54, $opacity); } 私は$opacity大丈夫ですが、今は$color部品に行き詰まっています。ミックスインに送信する色はRGBではなくHEXになります。 私の使用例は： element { @include background-opacity(#333, .5); } このミックスイン内でHEX値を使用するにはどうすればよいですか？

213 css  sass  background-color  mixins  rgba 

私はスタイルシートをSASSパーシャルで次のようにモジュール化しています： @import partials/header @import partials/viewport @import partials/footer @import partials/forms @import partials/list_container @import partials/info_container @import partials/notifications @import partials/queues @import compassなどの部分ディレクトリ全体（SASS-partialsでいっぱいのディレクトリです）を含める方法はありますか？

209 import  sass  partials 

私はこのようなミックスインを書いています： @mixin box-shadow($top, $left, $blur, $color, $inset:"") { -webkit-box-shadow: $top $left $blur $color $inset; -moz-box-shadow: $top $left $blur $color $inset; box-shadow: $top $left $blur $color $inset; } 私が本当に望んでいるのは、$inset値が渡されない場合、次のようなものにコンパイルされるのではなく、何も出力されないということです。 -webkit-box-shadow: 2px 2px 5px #555555 ""; -moz-box-shadow: 2px 2px 5px #555555 ""; box-shadow: 2px 2px 5px #555555 ""; $inset渡された値がない場合に何も出力されないように、ミックスインをどのように書き換えますか

201 sass 

開発をスピードアップするためにコンパスとサスを使い始めたいと思います。現時点では、MacにSassをインストールして、入力用のscssファイルと生成された出力用のcssファイルを監視するように指示しました。 多くの記事から、SassはCompassで使用されています。なぜそうなのか、そしてSassにないコンパスには何が追加されているのでしょうか。例を挙げることができれば、より良いです。 ありがとう

166 css  sass  compass-sass