Sass・SCSS関連

[1 Name_Not_Found 2019/09/07(土) 21:35:56.26 ID:NHofu4e4]

Sass・SCSS関連のスレが無いので立てました。

Sass（サース、英: Syntactically Awesome Stylesheets）は、ハンプトン・キャトリンが設計しネイサン・バイゼンバウムが開発した
スタイルシート言語である。 後にSassファイルに用いられる単純なスクリプト言語である SassScript 用の拡張が加えられた。
wikipediaより

[2 Name_Not_Found 2019/09/07(土) 22:36:59.52 ID:Gzg7e1pO]

ウホッ
初心者としてはありがたい

[3 Name_Not_Found 2019/09/07(土) 23:16:58.41 ID:???]

サース、シース？

[4 Name_Not_Found 2019/09/08(日) 00:21:23.05 ID:???]

ずっとサスだと思ってたわ

[5 Name_Not_Found 2019/09/08(日) 09:15:04.52 ID:???]

おなシャス！

[6 Name_Not_Found 2019/09/08(日) 11:39:11.38 ID:???]

質問しろや

[7 Name_Not_Found 2019/09/08(日) 15:34:17.19 ID:???]

Sas？SCSI？
ハードディスクはSATAで繋いでたなぁ…
SSDになってから見なくなったね。

[8 Name_Not_Found 2019/09/08(日) 20:14:55.27 ID:NoHLn44B]

環境構築だけやった初心者だけど
なんか質問したいことでてきたら書き込むわ
みなさんよろすく

[9 Name_Not_Found 2019/09/09(月) 01:10:57.80 ID:???]

複数の引数があるミックスインを読み込む際に
可変長引数を使う

@mixin boxBase($w: 250px, $pd: 15px , $bg_c: #fff,
$bd_c: #ccc){
width:#w;
padding:$pd;
background-color:$bg_c;
border:1px solid $bd_c;
}

$values: 300px, 20px;

.items{
float:left;
@include boxBase($values...)
}

[10 Name_Not_Found 2019/09/09(月) 13:01:13.34 ID:eJ82RSQt]

SASS記法とSCSS記法はどちらが人気とかあるのかな？
後者は波括弧を使用するから個人的には読みやすい

Rubyとかが好きな人は前者の方が合うんかね

[11 Name_Not_Found 2019/09/09(月) 14:12:29.92 ID:???]

scssやろ。標準と互換性がない文法なんて存在価値なしやで
メリットが有るならまだしも、違うだけのものに価値はない

[12 Name_Not_Found 2019/09/09(月) 14:12:54.27 ID:???]

CoffeeScriptもほぼ死滅状態だしな

[13 Name_Not_Found 2019/09/09(月) 14:34:18.49 ID:eJ82RSQt]

>>11
標準と互換性がないというと、CSSと互換性がないということかな？
まじかよ・・・

SASSがいまいち使いにくいからSCSSにシフトしてった感じなのかな
慣れると素早くコード書けるらしいから今日からSCSSでスタイル書いてみるわ

[14 Name_Not_Found 2019/09/09(月) 20:14:15.17 ID:???]

メモ系エディタでサクッと修正したいときには面倒になるな
いちいちコンパイルしてsassとcss保存してって言う手間にはなる

[15 Name_Not_Found 2019/09/10(火) 06:35:55.34 ID:???]

SASS 記法は、使わない！
今のSASSとは、SCSS 記法の事！

Ruby のSASS コンパイラーも、無くなった。
今のコンパイラーは、JavaScript か？ C++ か？

VSCode にも、Live Server と同じ作者が作っている、
Live Sass Compiler という拡張機能もある

VSCodeのスレは、プログラム板にある

[16 Name_Not_Found 2019/09/10(火) 12:55:46.23 ID:0/8XGEMq]

PreprosってGUIコンパイラを試してみたぞ！

.scssを普通に書いて、上書き保存する
　　↓
上書き保存と同時にPreprosのオートコンパイル発動
　　↓
.css生成
　　↓
テキストエディタのライブプレビューにより、
ブラウザ上にコンパイルされたCSSが自動的に反映
される

リアルタイムにブラウザ上に反映は難しそうかな、
1文字1文字タイピングするたんびにコンパイルするわけにもいかんだろうしｗｗ

[17 Name_Not_Found 2019/09/12(木) 00:19:06.64 ID:oG7M++M7]

問題な

全体幅1000pxのグローバルナビにおいて
メニューを均等に6分割したい
かつ小数点以下を四捨五入する

これをsass上で算出するコードを記せ

[18 Name_Not_Found 2019/09/12(木) 00:20:19.34 ID:???]

↑条件追加
1000pxは変数で定義すること。

[19 Name_Not_Found 2019/09/12(木) 11:08:00.01 ID:???]

回答

必要もないのに変数を使うな

[20 Name_Not_Found 2019/09/12(木) 12:49:21.19 ID:???]

じゃあ変数使わなくてもよろしくてよ

[21 Name_Not_Found 2019/09/12(木) 22:09:32.97 ID:???]

SassってSCSS記法と脱RubyがなければLESSの勝利で絶滅してたよね

[22 Name_Not_Found 2019/09/13(金) 07:16:09.90 ID:???]

仮定の話をしても意味がない
LESSは敗北した

[23 Name_Not_Found 2019/09/13(金) 08:57:56.72 ID:???]

そしてStylusが勝利した

[24 Name_Not_Found 2019/09/13(金) 10:57:53.12 ID:???]

>>17

$width:1000px;
.gnav{
width: round($width / 6);
}

[25 Name_Not_Found 2019/09/14(土) 18:38:56.64 ID:???]

「任意のインライン要素」「任意のブロック要素」という指定を含むセレクタを書きたいと思ったんですが、
compassのelements-of-type関数に相当するような機能は最新のsassに用意されていたりしないでしょうか。
無ければcompassをパクって自前で用意しようと思いますが。

[26 Name_Not_Found 2019/09/15(日) 16:24:31.29 ID:???]

このスレは機能してるのかな？

@extendで継承できるのは単純なセレクタだけだということなんだけど、
既存の任意のセレクタを継承するのと同等のことってなにか方法がないかな。

// ここは既存のscssでいじれない
.message > .info {
... // A
}

// Aの記述全体を継承したい
.some {
@extend .message > .info; // これができない
}

[27 Name_Not_Found 2019/09/15(日) 20:49:14.45 ID:???]

>>26
こうするしかないだろね・・

.message > .some {
@extend .info;
}

[28 Name_Not_Found 2019/09/15(日) 21:10:48.39 ID:???]

回答ありがとう。
でもやりたいのは.someに.message>.infoの定義内容を継承したいってことなんで、
.message>.someはちょっと違う。

[29 Name_Not_Found 2019/09/15(日) 21:20:52.58 ID:BLEsSXR4]

【@extendで継承できるセレクタ】
型セレクタ（タイプセレクタ） 例: strong、ul
ID セレクタ 例: #main
クラスセレクタ 例: .foo
連結セレクタ 例: .foo.bar、p.note、#main.bar
属性セレクタ 例: img[src$=".png"]、input[type="text"]、div[data-foo]
疑似クラス 例: a:hover、a:active、p:not(.sample)
疑似要素 例: p::first-line、blockquote::before

【@extendで継承できないセレクタ】
子孫セレクタ 例: p strong、.foo .bar
子セレクタ 例: p > strong、.foo > .bar
隣接セレクタ 例: h2 + h3、.foo + .bar
間接セレクタ 例: h3 ~ h3、.foo ~ .bar

不便だよな。　phpでスクレイピングしたくなるなｗ

[30 Name_Not_Found 2019/09/16(月) 15:21:53.18 ID:???]

>>29
これはありがたい。

[31 Name_Not_Found 2019/10/03(木) 08:11:39.74 ID:???]

scssとpostcssどっちがいい？

[32 Name_Not_Found 2019/10/03(木) 08:47:44.53 ID:???]

このスレで聞くとはｗｗ
知能が足りないようだなｗｗｗ

[33 Name_Not_Found 2020/01/27(月) 21:00:02.84 ID:RaabgTDd]

最近使い始めた
まだまだ使いこなせてないけどそれでもめちゃ便利だな

[34 Name_Not_Found 2021/08/05(木) 21:43:25.74 ID:???]

コンパイルすると/**/コメントが一箇所に固まってるんだけど、これ正しいの？

[35 Name_Not_Found 2021/09/27(月) 13:38:36.41 ID:XyHOLATs]

>>34
ネストやエクステンドの使い方だとおもう
うちも前になってげんなりした

[36 Name_Not_Found 2023/10/15(日) 22:13:59.34 ID:???]

プレッシャーに負けるな！