[sass] タグが付いた質問
42
質問
0
票
0
回答
91
閲覧数
scssでのコンパイルで Error: The "path" argument must be of type string. Received undefined
VSCodeでscssのコンパイル、style.scssを更新し、style.cssのファイルに書き出したいのですが、以下のメッセージが表示されます。
どうすれば解決できますでしょうか。
PCはmacです。
Error: The "path" argument must be of type string. Received undefined
ソース DartJS Sass ...
1
票
2
回答
615
閲覧数
scssで特定の親がある時だけ効くセレクタを書く方法
以下のようなスタイルシートがあります。
.a .b .c .d .eの中の文字は赤色ですが、
.a .b.active .c .d .eとbにactiveが付与された時のみ青色になります。
ですがこの書き方ですと.a .bと.c .d .eの記述が重複してしまっています。
.a .b{
.c .d .e{
color:red;
}
}
.a .b.active{
...
0
票
1
回答
199
閲覧数
sassを使いたいのですが、CSSファイルが自動生成されたりしません。
ワードプレスでサイトの制作をしています。
VSCでサイトを作成する場合、sassのファイルを制作すれば、
自動的にcssのファイルが制作されますが、
FileZillaではsassを作っても自動的にcssファイルが出来たりしません。
今までは、VSCでsassファイルを作り、
それで自動生成されたCSSファイルの内容をFileZillaに作ったCSSファイルにコピーしていたのですが、それでは、...
1
票
1
回答
109
閲覧数
blur-admin でスタイルが適用されない
https://akveo.github.io/blur-admin/articles/002-installation-guidelines/
これをビルドしてみたのですがスタイルが適用されません
実行したのはこれだけです
git clone https://github.com/akveo/blur-admin.git
cd blur-admin
npm install
rm ~/....
0
票
1
回答
123
閲覧数
ビルドでCSSを書き換えるには?
長文大変失礼いたします.
背景
XMLで書かれたドキュメント群を変換してHTMLにし、CSSや画像ファイルとセットでパブリッシングするのをやっています.日本語だけでなく多言語をやっております.今般お客様の意向で、従来CSSで@font-faceで指定していたフォントファイルを、今はやりのWeb Fontに置き換えることになりました.
主な狙いは日本語フォントなんだろうと思います....
0
票
1
回答
1,617
閲覧数
VSCodeの拡張機能のLive Sass Compilerを使ってwatch sassを押してもCompilation Error Error: Stack Overflowと出てSCSSファイルをコンパイルができない
VSCodeの拡張機能のLive Sass Compilerを使ってwatch sassを押してもCompilation Error Error: Stack Overflowと出てSCSSファイルをコンパイルができない
Compilation Error
Error: Stack Overflow
試したこと:
VSCode の拡張機能を全部アンインストールした
0
票
1
回答
730
閲覧数
flexboxで要素の高さが揃わない
解決したいこと
cssでコーディングをしているのですが、flexboxで要素の高さが揃わないです
状況
下記のコードがHTMLです。
<div class="plans-content">
<div class="plans-content-item">
<h3 class="plans-content-...
0
票
1
回答
5,875
閲覧数
フォームのlabelとinputの位置を揃えたい。
現在HTMLのlabelタグに挟まれている文字列に空白を含ませる事で揃えているのですが、あまり良い解決作には見えないので、cssを使って空白なしでも揃うようにしたいです。
<div class="song__info-cover">
<div class="song__info">
...
0
票
2
回答
585
閲覧数
cssで属性を削除する方法を知りたいです。
cssのスタイルで、paddingの属性を削除したいです。
最初にcssの初期化としてbase.scssを読みます。
その後にarticle.scssを読みます。
その時に、article.scssでbase.scssのulのpaddingを削除したいのですが、cssでのやり方ご存知の方いましたら教えていただきたいです。
説明が下手で申し訳ないのですが、よろしくお願いいたします。
base....
0
票
1
回答
1,030
閲覧数
SCSSの記法で出てくる $this: & !global; の意味は?
以下の記事で紹介されているBEM記法に $this: & !global; という記法が見られるのですが、どういう意味でしょうか?
BEMのmodifierでスタイルを切り替える時の書き方 - Qiita
scss
.p-hoge{
$this: & !global;
display:flex;
background-color:#f00;
&--...
1
票
1
回答
139
閲覧数
brewの名前に/(スラッシュ)が含まれているのは特別な意味がありますか? それとも単なる文字列としてのスラッシュですか?
https://sass-lang.com/install
にインストール方法として
brew install sass/sass/sass
と書いてあるのですが、この/になにか特別な意味あるのでしょうか?それとも単に文字列としての意味しかないのでしょうか?
0
票
1
回答
395
閲覧数
inputのrangeのつまみのデザインを変えたい
質問内容
inputのrangeのつまみのデザインを変えたいのですが、-webkit-slider-thumbにbeforeやafterといった擬似要素が付与できません。
ソースコード
input[type="range"]::-webkit-slider-thumb {
&::before {
//反映されない
}
}
...
0
票
1
回答
157
閲覧数
Flexboxで隣り合う要素の高さが揃ってしまう
質問内容
左側のメニューのlabelを押すと、右側のメインメニューが干渉して動き、灰色の背景が現れます。
原因は分かりましたが、理由と対処法がわかりません。
よろしくお願いします。
jsfiddle
コード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="...
5
票
0
回答
171
閲覧数
Sassに複数の条件を適用する方法は?
[主旨]
WebのプロジェクトでXMLからHTML5への変換を担当しております.世界各国語向けのCSSを生成しなければならないので、LTR/RTL(アラビア語、ヘブライ語)を分けて.scssファイルから.cssファイルをコンパイルして生成してます.今度更にコンテンツの製品のブランドをパラメータとして導入しなければならなくなりました....
1
票
1
回答
855
閲覧数
scss ってメディアクエリが必須ですか?
デフォルトの application.css を application.scss にリネームして
/*
*= require_tree .
*= require_self
*/
@import "bootstrap"
.sidebar {
width: 20%;
}
というのをかいてみたところ
Error: media query expression must begin ...
0
票
1
回答
83
閲覧数
画像スクロールでスマホで見たときに折り重ならないようにしたい
CSSのみで画像を無限スクロールしたのですが、スマホで見たときに画像どうしが折り重なってしまいます。
2つめのul要素が前に出てきているのが原因だと思うのですが、スマホの時のみliやimgの幅を変更してみても解決できません。
これを折り重ならずに画像1枚分が幅いっぱい表示されるようにしたいです。
どこをどう直せばよいでしょうか。
参考にしたサイトはこちらです。
https://chocolat5....
1
票
1
回答
76
閲覧数
項目間に余白が残り続けてしまいます...。
前提・実現したいこと
Flexを採用しdivをメニューのように整列させていますがうまく並びません
発生している問題・エラーメッセージ
エラーメッセージは特段発生されておりません
該当のソースコード
<div class="fluid-wrap">
<div class="el"></div>
<div class="el"></...
0
票
1
回答
1,826
閲覧数
autoprefixerでgridを有効にしているのにIE11でレイアウトが崩れる
Gulpでautoprefixerを用いていて、コンパイル後のcssには-ms-のベンダープレフィックスは追加されているのですが、IE11だとレイアウトが崩れてしまいます。
崩れるというよりも具体的にはレイアウトが一つだけになってしまいます。
HTML
<div class="grid">
<div class="item">
テスト
</...
2
票
1
回答
5,957
閲覧数
vscodeで{ expectedscss(css-lcurlyexpected)というエラー
vscodeの拡張機能でlive-sass-compilerを使ってsassをコンパイルしています。
以下のソースで
{ expectedscss(css-lcurlyexpected)
というエラーが出ました。どうすれば解決出来るでしょうか?
書いたsassは以下の通りです。
main {
width: 1024px;
margin: 0 auto;
@media ...
1
票
1
回答
1,261
閲覧数
gulp 意図したフォルダにsassがコンパイルされない
gulp js初心者です。
【問題】
srcフォルダのsccsがdestフォルダではなく、dest.rootフォルダの中にコンパイルされる
他のpugやcssなどはdestフォルダで出力されています。
パスの指定もsccsの時と同じ書き方です。
return gulp.src(src.srcの該当プロパティ, {base: src.root})
.pipe(gulp....
2
票
1
回答
1,921
閲覧数
SyntaxError: Unexpected token -
gulpfile.jsで以下のようなエラーが出ます。
gulpは4.0です。
◆エラー
function browser-sync() {
^
SyntaxError: Unexpected token -
どう書き直せば良いでしょうか?
◆gulpfile.js
const gulp = require('gulp');
//pug
const ...
2
票
0
回答
170
閲覧数
Firebase + ExpressでのSassの自動コンパイルについて
実現したいこと
Firebaseのfunctionsとhostingを利用してExpress製のNode.jsアプリを開発中です。
CSSプリプロセッサにSassを利用したいと思っております。
問題点
Sassファイルを変更後に $firebase serve を行ってもCSSファイルが自動的に更新されません。
destのstyle.cssファイルが存在しない場合はstyle....
2
票
1
回答
105
閲覧数
Bootstrap 導入方法による違いについて
お世話になります。
Bootstrap(4)の導入方法について、
下記2つの違いを知りたいです。
完全にどっちでも同じなのでしょうか?
・CDN
・ソースファイルをダウンロード
例えば
用意されたスタイルに変更を加えたい場合はこっちの導入方法でないとできない、
というように「こういうことをしたいならこっちの導入方法がよい」
というような差異はあるのでしょうか。
0
票
1
回答
205
閲覧数
sassで`color: value`利用時に警告が出る
前提
app/assets/stylesheets/style.css.scss に、以下の定義を書いています。
@each $color in red, purple, blue, green, yellow, orange {
.c_#{$color} {
color: $color;
}
}
発生している問題・エラーメッセージ
スタイルは適用されるのですが、...
1
票
0
回答
123
閲覧数
macでcompassを入れようとしたらErrorでハマってしまいました、、助けて頂けると幸いです。
下記がError文になります。
sudo gem install compass -n /usr/local/bin/
上記等色々試したのですがインストール出来ず。。。
ご教授頂けると幸いです。
======================================================================
MacBook-Pro:~ WEB20-150129$ ...
0
票
1
回答
208
閲覧数
mini_magickをimportするとエラー: File to import not found or unreadable: mini_magick
現在、個人でアプリケーションを作成しております。
画像を投稿し、リサイズしてページに貼り付けたく、mini_magickをbundle installしたのですが
application.scssに@importの記述をしたところ、
Sass::SyntaxError
File to import not found or unreadable: mini_magick.
...
0
票
1
回答
420
閲覧数
scssコンパイルができません
環境
windows10 ノートpc
https://www.monster-dive.com/blog/web_creative/20140407_000147.php
このサイトに沿ってsass環境をインストールしたのですが、コンパイルできません。
デスクトップでも同様の作業を行いましたがそちらは問題なく動きます。
具体的には
sass --watch C:\Users\------...
0
票
0
回答
68
閲覧数
railsの本番環境で、sassを更新するたびに前回のsassに上書きされてしまいます。railsの本番環境AWS sass css config
railsのwebサイトをAWS,nginx,unicornを使って、運営しています。
railsの本番環境に新しく、更新したsassを反映をさせようと思って、precompileして再起動するのですが、毎回、前回までの古いsassの上に上書きされる形で反映されてしまい、お互いの反映がぶつかり合ってしまいます。
結果として、新しい変更の方は無視されて、古いsassの方が反映されてしまいます。
...
0
票
0
回答
611
閲覧数
Gulpで複数入力・出力パスを指定する方法(例としてgulp-sass)
プロジェクトフォルダ構造:
📁 development
📁 public
📁 1sass
📁 2css
📁 admin
📁 3sass
📁 4css
どちらのソースフォルダーが、どちらの出力フォルダに相当しているか、gulpは何れかの方法で簡単に判断できないように、私はフォルダに数字を付けた結果、名前が同じのフォルダが無くなりました。
さて、...
-1
票
1
回答
2,050
閲覧数
railsでapplication.css以外のscssが反応しない
RailsでWebアプリケーションを作ろうとしています。application.cssの他にHomeコントローラを作成して、home.css.scssを作ってみたんですが、.classといった具合にセレクタ名を打ち込んでも全く反応しません。(文字色が白から変わらない、、)
application.cssはちゃんと読み込まれています。
ググってみるとよく出てくる、*/ = ...
0
票
2
回答
259
閲覧数
rowspan の css. 親の親を参照したい
tr > td[rowspan] に隣接する tr > td にスタイルを当てたいときに、どのように指定すればいいのか分かりません。
<tr>
<th colspan="3"> あああ </th>
<td> いいい </td>
</tr>
<tr>
<td> ううう </...
0
票
1
回答
3,055
閲覧数
gulp-sassを実行すると Invalid CSS のエラーが発生する
gulpを使い、sassのコンパイル環境を構築しようとしています。諸々のインストールとgulpfile.jsなどを作り、gulpfile.jsにtaskを書いたのですが、実行してもこのエラーでうまくコンパイルされません。
events.js:160
throw er; // Unhandled 'error' event
^
Error: develop/style....
0
票
1
回答
152
閲覧数
CSSの変数について
CSSの変数について
サイトの隙間はバラバラではなく数個に決まるので、
下記のように共通する隙間を変数にして、使えば隙間を増やしたいと思った時は、
下記だけを代えればすべて変更してくれるので、このようにするのがベストプラクティスだと思うのですが、このようにすると下の隙間だけの場合は良いのですが、上下左右にあるばあい、marginをいっぺんにかけない問題が起こると思うのですが、...
0
票
1
回答
4,238
閲覧数
gulp-sassでコンパイルすると@includeが使えず「no mixin named 」エラーが出る
gulp-sassを使ってscssファイルをコンパイルしようとするとエラーが出ます
(手打ちなのでスペース数は違うかもしれませんが)
Error: src\sass\style.scss
Error: no mixin named test
Backtrace:
stdin:エラー行
on line エラー行 of stdin
>> @include ...
0
票
1
回答
877
閲覧数
sassのブラウザへの自動反映について
実現したいこと
gulpを導入してsassをコンパイル後、ブラウザへの反映を自動化したいのですがうまく動きません。アドバイスをお願いします。
発生している問題
sassのコンパイルまでは動くのですが、その後のブラウザへの反映が動きません。以下コマンドプロンプトに表示されたエラーメッセージです。
event.js:141
throw er; // Unhandled 'error' ...
0
票
1
回答
1,579
閲覧数
Sassの@importとSprocketsのrequire, require_treeの使い分けは?
Railsで開発している場合Sassを使って開発する場面も多いかと思います。
Sassには@importがありますが、
RailsにはSprocketsもあります。
Sprocketsのrequireやrequire_treeとCSSをまとめるという最終目的は同じように思います。
使い分けのベストプラクティスはあるのでしょうか。
1
票
0
回答
189
閲覧数
bootstrapにprimary2などを作って色を足したい
前置き
bootstrap(現在はv3.3.5を使用)ですが、現在sassを使って、
$brand-primaryのような用意された変数を使い色を変更することはできました。
そこで、今度は色を追加しようと思ったのですが、brand-successやbrand-infoなどは用意されていますが、これらの色を変更するのは、用途が違うと感じました。
やりたいこと
$brand-...
1
票
1
回答
555
閲覧数
Slimファイル内で記述された変数をsassに渡す方法について
はじめまして。
Slim + sass + middlemanでプロトタイピングをしています。
Slimファイル内でSass・SCSSを記述する際に、Slim内で定義した変数をSass・SCSSで参照する方法をご存知の方はいらっしゃらないでしょうか。
※Hamlでは同様のことができたような記憶があるのですが…
例として、下記のようなことを実現したいと思っています。
よろしくお願いします。
...
1
票
1
回答
208
閲覧数
Windows環境でのSymfony2でCompassのエラー"Individual stylesheets must be in the sass directory"
普段はLinux環境で作業しているのですが、
Windows環境にSymfony2環境を構築する必要があります。
WindowsにXAMPPパッケージをインストールして、
Symfony2フレームワークを設定しました。
システムは問題なく設定・動作しましたが、
Compassの設定でエラーが出ており、問題の原因がわかっておりません。
config.yml:
# Assetic ...
2
票
1
回答
720
閲覧数
Rails4 で Sass に定義した変数の値を Javascript から変更できますか?
Rails4 で Sass を利用してスタイルシートを記述しています。
Sass は変数が使えるのでとても便利なのですが、 Sass で定義した変数の値を Javascript から変更するというようなことはできますでしょうか。
たとえば以下の様な Sass ファイルを作成し「赤」をテーマカラーに設定していた場合:
$theme-color: #FF0000
body
color: $...
3
票
1
回答
497
閲覧数
rails4でslim内でsassを利用した際に外部sass変数をimportするには?
index.html.slim
h1 welcome to my page
sass:
@import '/stylesheets/define.sass'
h1
color: $theme-color
define.sass
$theme_color: #FF0000
上記のindex.html.slimようなslim内部に直接sassを記述してスタイルを適応したい場合。...
6
票
1
回答
427
閲覧数
ベンダープレフィックスを自動的に付与する方法
Visual Studio 2013(+ Web Essentials)でSass(.scss)ファイルを編集しています。
.scssファイルに
div.border {
border-radius: 5px;
}
と書いたらレンダープレフィックスを自動的に付与して、cssに
div.border {
-o-border-radius: 5px;
-moz-border-...