Sass・SCSS関連 - 暇つぶし2ch

Sass・SCSS関連 at HP

15:Name_Not_Found
19/09/10 06:35:55.34 .net
SASS 記法は、使わない！
今のSASSとは、SCSS 記法の事！
Ruby のSASS コンパイラーも、無くなった。
今のコンパイラーは、JavaScript か？ C++ か？
VSCode にも、Live Server と同じ作者が作っている、
Live Sass Compiler という拡張機能もある
VSCodeのスレは、プログラム板にある

16:Name_Not_Found
19/09/10 12:55:46.23 0/8XGEMq.net
PreprosってGUIコンパイラを試してみたぞ！
.scssを普通に書いて、上書き保存する
　　↓
上書き保存と同時にPreprosのオートコンパイル発動
　　↓
.css生成
　　↓
テキストエディタのライブプレビューにより、
ブラウザ上にコンパイルされたCSSが自動的に反映
される
リアルタイムにブラウザ上に反映は難しそうかな、
1文字1文字タイピングするたんびにコンパイルするわけにもいかんだろうしｗｗ

17:Name_Not_Found
19/09/12 00:19:06.64 oG7M++M7.net
問題な
全体幅1000pxのグローバルナビにおいて
メニューを均等に6分割したい
かつ小数点以下を四捨五入する
これをsass上で算出するコードを記せ

18:Name_Not_Found
19/09/12 00:20:19.34 .net
↑条件追加
1000pxは変数で定義すること。

19:Name_Not_Found
19/09/12 11:08:00.01 .net
回答
必要もないのに変数を使うな

20:Name_Not_Found
19/09/12 12:49:21.19 .net
じゃあ変数使わなくてもよろしくてよ

21:Name_Not_Found
19/09/12 22:09:32.97 .net
SassってSCSS記法と脱RubyがなければLESSの勝利で絶滅してたよね

22:Name_Not_Found
19/09/13 07:16:09.90 .net
仮定の話をしても意味がない
LESSは敗北した

23:Name_Not_Found
19/09/13 08:57:56.72 .net
そしてStylusが勝利した

24:Name_Not_Found
19/09/13 10:57:53.12 .net
>>17
$width:1000px;
.gnav{
width: round($width / 6);
}

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

26:Name_Not_Found
19/09/15 16:24:31.29 .net
このスレは機能してるのかな？
@extendで継承できるのは単純なセレクタだけだということなんだけど、
既存の任意のセレクタを継承するのと同等のことってなにか方法がないかな。
// ここは既存のscssでいじれない
.message > .info {
... // A
}
// Aの記述全体を継承したい
.some {
@extend .message > .info; // これができない
}

27:Name_Not_Found
19/09/15 20:49:14.45 .net
>>26
こうするしかないだろね・・
.message > .some {
@extend .info;
}

28:Name_Not_Found
19/09/15 21:10:48.39 .net
回答ありがとう。
でもやりたいのは.someに.message>.infoの定義内容を継承したいってことなんで、
.message>.someはちょっと違う。

29:Name_Not_Found
19/09/15 21:20:52.58 BLEsSXR4.net
【@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
19/09/16 15:21:53.18 .net
>>29
これはありがたい。

31:Name_Not_Found
19/10/03 08:11:39.74 .net
scssとpostcssどっちがいい？

32:Name_Not_Found
19/10/03 08:47:44.53 .net
このスレで聞くとはｗｗ
知能が足りないようだなｗｗｗ

33:Name_Not_Found
20/01/27 21:00:02 RaabgTDd.net
最近使い始めた
まだまだ使いこなせてないけどそれでもめちゃ便利だな

34:Name_Not_Found
21/08/05 21:43:25.74 .net
コンパイルすると/**/コメントが一箇所に固まってるんだけど、これ正しいの？

35:Name_Not_Found
21/09/27 13:38:36.41 XyHOLATs.net
>>34
ネストやエクステンドの使い方だとおもう
うちも前になってげんなりした