Sass・SCSS関連
Sass・SCSS関連のスレが無いので立てました。
Sass(サース、英: Syntactically Awesome Stylesheets)は、ハンプトン・キャトリンが設計しネイサン・バイゼンバウムが開発した
スタイルシート言語である。 後にSassファイルに用いられる単純なスクリプト言語である SassScript 用の拡張が加えられた。
wikipediaより Sas?SCSI?
ハードディスクはSATAで繋いでたなぁ…
SSDになってから見なくなったね。 環境構築だけやった初心者だけど
なんか質問したいことでてきたら書き込むわ
みなさんよろすく 複数の引数があるミックスインを読み込む際に
可変長引数を使う
@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...)
} SASS記法とSCSS記法はどちらが人気とかあるのかな?
後者は波括弧を使用するから個人的には読みやすい
Rubyとかが好きな人は前者の方が合うんかね scssやろ。標準と互換性がない文法なんて存在価値なしやで
メリットが有るならまだしも、違うだけのものに価値はない >>11
標準と互換性がないというと、CSSと互換性がないということかな?
まじかよ・・・
SASSがいまいち使いにくいからSCSSにシフトしてった感じなのかな
慣れると素早くコード書けるらしいから今日からSCSSでスタイル書いてみるわ メモ系エディタでサクッと修正したいときには面倒になるな
いちいちコンパイルしてsassとcss保存してって言う手間にはなる SASS 記法は、使わない!
今のSASSとは、SCSS 記法の事!
Ruby のSASS コンパイラーも、無くなった。
今のコンパイラーは、JavaScript か? C++ か?
VSCode にも、Live Server と同じ作者が作っている、
Live Sass Compiler という拡張機能もある
VSCodeのスレは、プログラム板にある PreprosってGUIコンパイラを試してみたぞ!
.scssを普通に書いて、上書き保存する
↓
上書き保存と同時にPreprosのオートコンパイル発動
↓
.css生成
↓
テキストエディタのライブプレビューにより、
ブラウザ上にコンパイルされたCSSが自動的に反映
される
リアルタイムにブラウザ上に反映は難しそうかな、
1文字1文字タイピングするたんびにコンパイルするわけにもいかんだろうしww 問題な
全体幅1000pxのグローバルナビにおいて
メニューを均等に6分割したい
かつ小数点以下を四捨五入する
これをsass上で算出するコードを記せ SassってSCSS記法と脱RubyがなければLESSの勝利で絶滅してたよね >>17
$width:1000px;
.gnav{
width: round($width / 6);
} 「任意のインライン要素」「任意のブロック要素」という指定を含むセレクタを書きたいと思ったんですが、
compassのelements-of-type関数に相当するような機能は最新のsassに用意されていたりしないでしょうか。
無ければcompassをパクって自前で用意しようと思いますが。 このスレは機能してるのかな?
@extendで継承できるのは単純なセレクタだけだということなんだけど、
既存の任意のセレクタを継承するのと同等のことってなにか方法がないかな。
// ここは既存のscssでいじれない
.message > .info {
... // A
}
// Aの記述全体を継承したい
.some {
@extend .message > .info; // これができない
} >>26
こうするしかないだろね・・
.message > .some {
@extend .info;
} 回答ありがとう。
でもやりたいのは.someに.message>.infoの定義内容を継承したいってことなんで、
.message>.someはちょっと違う。 【@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でスクレイピングしたくなるなw このスレで聞くとはww
知能が足りないようだなwww 最近使い始めた
まだまだ使いこなせてないけどそれでもめちゃ便利だな コンパイルすると/**/コメントが一箇所に固まってるんだけど、これ正しいの? >>34
ネストやエクステンドの使い方だとおもう
うちも前になってげんなりした