#4 Sassを使ってCSSを効率的に記述する
Sass はCSSを便利に書く方法です。
Sassを使うとCSSを記述する際に変数や関数が使えるようになり、シンプルで効率的に記述することが可能になります。
Sassには「Sass（.sass）」や「Scss（.scss）」「Less（.less）」といった記法がありますが、
ここではまた、Scss記法で記述したとしても最終的にCSSファイルとして書き出したいために コンパイル（変換）という作業が必要となります。 コンパイルする方法はアプリを使ったりターミナルからコマンド入力してコンパイルしますが、テキストエディタでも簡単にできます。
例）scssでの記述の仕方
.main{
width:90vw;
&__text{
text-align:center;
&--sub{
font-size:0.8em;
}
}
&__image{
margin:0 auto;
}
}
.main{
width:90vw; }
.main__text{
text-align:center; }
.main__text--sub{
font-size:0.8em; }
.main__image{
margin:0 auto; }
Visual Studio CodeでSCSSをコンパイルする設定
Visual Studio Code（インストールとセッティングの手順
○ VS codeを起動して、左のアイコンの「機能拡張」をクリックし、検索窓に「Live Sass Compile」と入力。
出てきたらインストールボタンをクリック。
「拡張機能の設定」をクリックすると設定ウィンドウが開きます。
にあるsettings.jsonを編集をクリック
formats部分を以下のように変更します。
{
"liveSassCompile.settings.formats": [
{
"format": "nested",
"extensionName": ".css", /* 拡張子cssファイルをコンパイルする */
"savePath": "~/../css" /* scssフォルダと同改装にあるcssフォルダに入れる場合 */
}
],
}
.classname{
color:#F00;
font-size:2em;
span{
padding:3px;
}
}
/* expandedに設定したときの出力 */
.classname {
color: #F00;
font-size: 2em;
}
.classname span {
padding: 3px;
}
/* nestedに設定したときの出力 */
.classname {
color: #F00;
font-size: 2em; }
.classname span {
padding: 3px; }
/* compactに設定したときの出力 */
.classname { color: #F00; font-size: 2em; }
.classname span { padding: 3px; }
/* compressedに設定したときの出力 */
.classname{color:#F00;font-size:2em}.classname span{padding:3px}
nested: 改行を詰めたcss
compact: セレクタごとの波括弧が1行になる。改行が入る
compressed: どこにも改行がない形式、で出力されます。
にあるsettings.jsonを編集をクリック
{
"liveSassCompile.settings.generateMap": false
}
同じファイルになる場合は以下のように記述
{
"liveSassCompile.settings.formats": [
{
"format": "nested",
"extensionName": ".css",
"savePath": "~/../css"
}
],
"liveSassCompile.settings.generateMap": false,
その他設定A...,
その他設定B...,
}
7. 画面下に表示される「Watch Sass」をクリックすると、scssファイルを保存すると同時に、 cssファイルをコンパイルし生成されます。
#5 SCSSの使い方
SCSSにより変数と関数を使えるようになり非常に便利です。変数を使う
変数という箱に色や数値を入れておき、各プロパティの値に変数名で指定することで、変数に代入している値を変えるだけで変数を使っているすべての箇所変わります。
$colorA:#f3bebe; /* 文字列の頭に$をつけて変数の扱いになる */
$sizeB:12px;
.bg{
background-color:$colorA;
}
.area{
font-size:$sizeB;
background-color:$colorA;
}
.navi{
font-size:$sizeB;
}
.bg {
background-color: #f3bebe; }
.area {
font-size:12px;
background-color: #f3bebe; }
.navi {
font-size:12px; }
関数を使う
関数は自分で作る独自関数と、あらかじめ作られているネイティブな（ビルトインされた）関数の2種類があります。 Sassのネイティブ関数
@function 関数名($引数) {
@return 戻り値;
}
@return 戻り値;
}
/*独自関数を作る*/
@function Round-pixel($i) {
@return round($i)+px; /*ネイティブのround関数 = 小数点の四捨五入*/
}
/*使い方*/
.selector{
width: Round-pixel(123.656);
}
.selector {
width: 124px; }
変数とメディアクエリの初期設定
SCSSでメディアクエリを使うときに便利になる書き方の初期設定です。今度コーディングするときにこちらを使ってみましょう。コピーして使ってみてください。
/* マップ $map:(key: value) 各幅の値を登録しておく */
$breakpoints: (
'sm': 340,
'md': 768,
'lg': 1024,
'xl': 1230,
'xxl': 2000,
) !default; /*変数定義前に自動で値を代入させるため*/
@mixin mq($mq, $bp1:lg, $bp2:lg){ /* @mixin = 引数によってスタイルの設定を細かく指示 */
$w1 : map-get($breakpoints, $bp1);
$w2 : map-get($breakpoints, $bp2); /* $breakpoints = マップ、から値を取得(map関数) */
$min1 : 'min-width: #{($w1+1)}px'; /* xxx-width: と1px調整 */
$max1 : 'max-width: #{($w1)}px';
$min2 : 'min-width: #{($w1+1)}px';
$max2 : 'max-width: #{($w2)}px';
@if $mq == min {
@media screen and ($min1) {
@content; /* @includeしたとき「プロパティ:値」をココに挿入させる */
}
}
@else if $mq == max {
@media screen and ($max1) {
@content;
}
}
@else if $mq == min-max {
@media screen and ($min2) and ($max2) {
@content;
}
}
}
#contents_wrap{
margin: 0 auto;
padding:5px;
@include mq('max','md'){ /*769pxまで*/
width:800px;
padding:8px;
position:relative;
border: 1px solid #F00;
}
@include mq('min-max','md','xl'){ /*770px以上、1230pxまで*/
width:95vw;
border: 1px solid #00F;
}
@include mq('min','xl'){ /*1231px以上*/
width:1200px;
padding:10px;
position:relative;
border: 1px solid #FF0;
}
}
#contents_wrap {
margin: 0 auto;
padding: 5px; }
@media screen and (max-width: 768px) {
#contents_wrap {
width: 800px;
padding: 8px;
position: relative;
border: 1px solid #F00; } }
@media screen and (min-width: 769px) and (max-width: 1230px) {
#contents_wrap {
width: 95vw;
border: 1px solid #00F; } }
@media screen and (min-width: 1231px) {
#contents_wrap {
width: 1200px;
padding: 10px;
position: relative;
border: 1px solid #FF0; } }
入門
基礎
応用
実践
デザイン
キッズ