OZです。
ホームページを制作するときに
HTMLとCSSというコードで記述して
制作していきます。
その際に
CSSでなくSASSで書くことにより
記述量が減り効率化して
作業ができます。
そのことについて調べましたので
まとめました。
DreamWeaverでのコンパイル
SASSを使うにはコンパイルという作業が必要になります。
SASSというのは
style.scssファイルでつくったデータを
htmlファイルに直接ひもづけられません。
ですので
style.scssで書いたコードを
コンパイルして
style.cssにおきかえてあげないといけません。
ここではDreamWeaverで簡単なコンパイルの仕方を書きます。
Adobe DreamWeaver 2021にて
アプリをたちあげ
上のバーにあるサイトから
サイトの管理
新規サイトで使用サイトを追加します。
サイトの定義をします。
CSSプリプロセッサーの一般で、ファイルの保存時に自動コンパイルを有効にするにチェック
Outputスタイルはnested 入れ子を選びました。
cssが入れ子でかきだされます。
出力フォルダーを定義で
style.cssが書き出される場所を定義します。
これをすることで
style.scssのSASSファイルを編集して、保存するだけで
style.cssファイルが上書きされます。
これでhtmlファイルとcssファイルを紐付けておけば
すぐにプレビューにて制作の確認ができて
便利で早い制作が可能になります。
ネスト
//ネスト
.haikei {
width: 100%;
background-image: url(../img/headar_haikei.jpg);
background-size:100% 100%;/*この場合は高さが自動設定*/
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.logo{
flex-basis: 40%;
}
}SASSは親の中かっこの中に
下層のスタイルをいれることができます。
上記コードだとhaikeiの中logoのスタイルを書くことができるので
SASSだけで、わかりやすい。
haikeiが親
logoが子
logoの中のimgタグなどをlogoの中に孫要素として追加することも可能。
HTMLタグは階層化してかいているので
SASSも階層化してかけるので、こっちのほうが見やすくはなる。
CSSのように親要素を指定しなくてもよくなる。
フレックスボックスを指定する場合わかりやすい。
項目がまとまっていく。
&アンパサンド
親のセレクタを参照できる。
//&アンパサンド
.haikei {
width: 100%;
background-image: url(../img/headar_haikei.jpg);
background-size:100% 100%;/*この場合は高さが自動設定*/
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
&:hover{
background-image: url(../img/headar_haikei2.jpg);
}
}
↓変換後のCSSはこうなります
.haikei:hover{
background-image: url(../img/headar_haikei2.jpg);
}& は親のセレクタが入ります。
上記のコードはマウスオーバーで背景画像がいれかわります。
//&アンパサンド
.haikei {
width: 100%;
background-size:100% 100%;/*この場合は高さが自動設定*/
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
body &{
background-image: url(../img/headar_haikei2.jpg);
}
}
↓変換後のCSSはこうなります
body .haikei{
background-image: url(../img/headar_haikei2.jpg);
}子のセレクタのあとに &をつけて逆にすることも。
ようは親要素が&に代入されるということですね。
いろいろな応用ができます。
変数
$に値を代入できる
$blue: #66CCFF
.haikei {
color: $blue;
bacground-color: $blue;
}
↓変換後のCSSはこうなります
.haikei {
color: #66CCFF;
bacground-color: #66CCFF; }
どちらも一括で青色になります。
コーポレートカラーなどで色をしていしている箇所を
全て一括で変更することが可能です。
色以外にも 変数に数字を代入して
サイズの一元管理などもできます。
SASSファイル分割方法
style.scss
_header.scss
_main.scss
ファイル名の頭をアンダースコアにすることで分割ファイル（パーシャル）としてあつかわれる。
style.scssの親ファイルに分割ファイルを読み込ませる
@carset "UTF-8";
@import "_header.scss";
@import "_main.scss";これが各記述がコンパイルされることで
style.cssにまとめて記述されるようになります。
別のサイトをつくるときにも便利。
wordpressなど
ヘッダー、ボディ、フッター、サイドバーとphpを分けてつくるときに
SASSもわかれていると頭のなかで理解しやすいかも。
その他の便利な機能
@extend
@extendのあとに再利用したいプロパティを他のスタイルシート内に子として書くと、他のスタイルシートに指定できる
%
%プロパティにすることで 書き出されない要素をつくれる
メディアクエリ簡単に
Sassでメディアクエリを
かんたんに運用が可能。
mixinを使ってメディアクエリを管理することで
コーディングが早くなります
/*Sassミックスイン*/
$sp: 767px; // スマホのみ
$tab: 768px; // タブレット以上
$pc: 1200px; // PC以上
@mixin sp {
@media (max-width: ($sp)) {
@content;
}
}
@mixin tab {
@media (min-width: ($tab)) {
@content;
}
}
@mixin pc {
@media (min-width: ($pc)) {
@content;
}
}
スマホは別になくてもいいのですが、スマホのみのことを考えて設置。スマホはmax-widthで767pxまでを指定
タブレット以上と、PC以上のサイズをmixinを使って指定。タブレット以上とPC以上はmin-widthで768px以上と1200px以上に指定。
これはBootstrapと同じサイズです。
スマホ以上の共通するコードにはspも必要ないが、わけた方がわかりやすい場面はわけよう。
/*Sassインクルード*/
.wrapper {
@include sp {
width: 100%;
};
@include tab {
width: 720px;
margin: 0 auto;
};
@include pc {
width: 1140px;
};
}
includeでさきほどのmixinを呼び出す
スマホの時はラッパーをワイド100%、
タブレットの時は720px;
パソコンの時は1140px;
にしてくださいと指定。
/*style.cssにコンパイル1*/
@charset "UTF-8";
@media (max-width: 767px) {
.wrapper {
width: 100%; } }
@media (min-width: 768px) {
.wrapper {
width: 720px;
margin: 0 auto; } }
@media (min-width: 1200px) {
.wrapper {
width: 1140px; } }ひとつ気になったことはコンパイルしたstyle.cssは、上記のようになるのですが。
スタイルシートの一番上にコードがくる。いつもスマホファーストでコードをかいていたので
一番上にきて理解してつくれるかが課題。
/*Sassミックスイン2*/
.wrapper {
width: 100%;
@include tab {
width: 720px;
margin: 0 auto;
};
@include pc {
width: 1140px;
};
}
試しにこのようにSPをかかずに書いてみてコンパイルしてみると、
/*style.cssにコンパイル2*/
@charset "UTF-8";
.wrapper {
width: 100%; }
@media (min-width: 768px) {
.wrapper {
width: 720px;
margin: 0 auto; } }
@media (min-width: 1200px) {
.wrapper {
width: 1140px; } }
こうなりました、なるほど、
大きくメディアクエリをわけずに
ひとつひとつの部分でメディアクエリを書く方法になるというわけですね。