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

次のように、同じ量の正と負の値を使用する2つのscssセレクターがあります。 padding: 0 15px 15px; margin: 0 -15px 20px -15px; 15pxのすべての量に変数を使用したいのですが、これは機能しません。 $pad: 15px; padding: 0 $pad $pad; margin: 0 -$pad 20px -$pad; マージン金額は正の数に変換されます。何か不足していますか？

107 css  sass  compass-sass 

こんにちは私はSASS / SCSSを学習しようとしていて、自分のミックスインをクリアフィックス用にリファクタリングしようとしています 私が欲しいのは、ミックスインに幅を渡すかどうかに基づいてミックスインを設定することです。 これまでの考え（他のミックスインを含めるので、疑似コードのみ） @mixin clearfix($width) { @if !$width { // if width is not passed, or empty do this } @else { display: inline-block; width: $width; } } これは私がそれを呼ぶかもしれないと思った方法ですが、それは機能していません。 @include clearfix(); または @include clearfix(100%) または @include clearfix(960px) これを行うための最善または正しい方法についての助けをいただければ幸いです！

106 conditional  mixins  sass  if-statement 

RubyなしでSassやCompassなどを使用する方法はありますか？ 私はグーグルとこのサイトを見回していて、何も見つけることができません、どんな助けもいただければ幸いです。ありがとうございました

102 css  sass  compass-sass 

質問はほとんどすべてを言います。 たとえば、Twitter Bootstrapを使用している場合、BootstrapのCSSクラスから継承するクラスを自分のSASSスタイルシートで定義できますか？または、SASSの継承は単一ファイルのスコープ内でのみ機能しますか？

102 css  inheritance  stylesheet  sass 

現在のところ、この質問はQ＆A形式には適していません。私たちは回答が事実、参考文献、または専門知識によってサポートされることを期待しますが、この質問はおそらく議論、議論、投票、または拡張された議論を誘います。この質問を改善でき、再開できると思われる場合は、ヘルプセンターにアクセスしてください。 7年前休業。 ASP.NET環境でRuby HAMLパッケージからSASS（構文的に素晴らしいStyleSheets）を使用する方法を探しています。理想的には、SASSファイルをCSSにコンパイルして、ビルドプロセスのシームレスな部分にしたいと考えています。 この統合に最適な方法は何ですか？または、.NET環境により適した他のCSS生成ツールはありますか？

101 asp.net  css  sass 

Sassでのネストに問題があります。次のHTMLがあるとします。 <p href="#" class="item">Text</p> <p href="#" class="item">Text</p> <a href="#" class="item">Link</a> スタイルを次のようにネストしようとすると、コンパイルエラーが発生します。 .item { color: black; a& { color:blue; } } 同じ要素の一部である場合、親セレクターの前にタイプセレクターを参照するにはどうすればよいですか？

100 sass  css-selectors 

（gulp-ruby-sassを使用して）.scssファイルを.cssファイルに変換し、結果の.cssファイルを元のファイルと同じ場所に配置しようとしているgulpタスクがあります。問題は、グロビングパターンを使用しているため、元のファイルがどこに保存されているかが必ずしもわからないことです。 以下のコードでは、gulp-tapを使用してストリームをタップし、ストリームが読み取られた現在のファイルのファイルパスを把握しようとしています。 gulp.task('convertSass', function() { var fileLocation = ""; gulp.src("sass/**/*.scss") .pipe(sass()) .pipe(tap(function(file,t){ fileLocation = path.dirname(file.path); console.log(fileLocation); })) .pipe(gulp.dest(fileLocation)); }); の出力に基づいてconsole.log(fileLocation)、このコードは正常に動作するようです。ただし、結果のCSSファイルは、予想よりも1つ上位のディレクトリに配置されるようです。本来あるべき場所ではproject/sass/partials、結果のファイルパスはただproject/partialsです。 これを行うためのはるかに単純な方法がある場合、私は間違いなくその解決策をさらに感謝します。ありがとう！

99 javascript  node.js  sass  gulp 

アプリ全体で自社のブランドカラーを使いたい。 私はこの問題を発見しました：AngularJS 2-マテリアルデザイン- 申し立てによるとカスタムテーマを構築できるカラーパレットを設定します。Material2の定義済みカラーを使用したくありません。ユニークで特別なブランドカラーが欲しいです。自分でテーマを作成するより良い方法（正しい？）はあり_palette.scssませんか？ ブランドパレットのミックスインを作成する必要がありますか？もしそうなら-それを適切に行う方法のガイドはありますか？さまざまな色合いの意味は何ですか（50、100、200、A100、A200などの番号が付いています）？ このエリアに関する情報は大歓迎です！

98 angular  sass  material-design  angular-material2 

SASSには、@extendセレクターが別のセレクターのプロパティを継承できるという機能がありますが、（ミックスインのように）プロパティはコピーされません。 LESSにもこの機能がありますか？

93 css  sass  less  extend 

Sassでは@include、ミックスインでの使用@extendとプレースホルダークラスでの使用の違いをはっきりと理解できません。彼らは同じことになりますか？

93 sass 

Rubyベースのトランスパイラーほど簡単ではなかったので、libsassのセットアップに苦労していました。誰かが方法を説明できますか： libsassをインストールしますか？ コマンドラインから使用しますか？ gulpやgruntなどのタスクランナーで使用しますか？ 私はパッケージマネージャーの経験がほとんどなく、タスクランナーの経験もほとんどありません。

93 css  sass  gulp-sass  node-sass  libsass 

私の変数で文字列補間を使用して別の変数を参照しようとしています： // Set up variable and mixin $foo-baz: 20px; @mixin do-this($bar) { width: $foo-#{$bar}; } // Use mixin by passing 'baz' string as a param for use $foo-baz variable in the mixin @include do-this('baz'); しかし、これを行うと、次のエラーが発生します。 未定義の変数： "$ foo-"。 SassはPHPスタイルの変数変数をサポートしていますか？

91 variables  sass 

SASSでは、別のディレクトリからファイルをインポートできますか？たとえば、次のような構造があるとします。 - root_directory - sub_directory_a - _common.scss - template.scss - sub_directory_b - more_styles.scss template.scssは_common.scssを使用@import "common"してインポートできますが、more_styles.scssが_common.scssをインポートすることは可能ですか？私はいくつかの異なるものを含むしようとした@import "../sub_directory_a/common"と@import "../sub_directory_a/_common.scss"しかし、何も動いていないようにみえ。

89 import  sass 

CSSモジュールからテーマをインポートしようとしていますが、TypeScriptで「モジュールが見つかりません」というエラーが表示され、テーマが実行時に適用されません。Webpackの設定に問題があると思いますが、どこに問題があるのか​​わかりません。 私は次のツールを使用しています： "typescript": "^2.0.3" "webpack": "2.1.0-beta.25" "webpack-dev-server": "^2.1.0-beta.9" "react": "^15.4.0-rc.4" "react-toolbox": "^1.2.3" "node-sass": "^3.10.1" "style-loader": "^0.13.1" "css-loader": "^0.25.0" "sass-loader": "^4.0.2" "sass-lint": "^1.9.1" "sasslint-webpack-plugin": "^1.0.4" これが私の webpack.config.js var path = require('path'); var webpack = require('webpack'); var sassLintPlugin = require('sasslint-webpack-plugin'); module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/dev-server', './src/index.tsx', ], output: { path: …

88 typescript  import  sass  webpack  css-modules 

Font Awesome Sassファイルhttps://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sassを使用して_font-awesome.sassにしているので@import、Sassプロジェクトに参加できます。また、http：//middlemanapp.com/を使用してSassをに変換していますCssます。質問： 使用済みのアイコンクラスのみを変換された.cssに取り込む方法はありますか？今は_font-awesome.sassのすべてのクラスを運んでいたからです ボーナス：再コンパイルすることは可能ですか？使用済みのアイコンクラスを使用してフォント、本番環境で使用ときにフォントを小さくすることは可能ですか？ 上記の＃1に関するヒントを得ることができれば、それで十分です。 ありがとう。

86 css  sass  font-awesome