Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Knowledge BBQ VOL.3

TAK WAT
January 18, 2017

Knowledge BBQ VOL.3

TAK WAT

January 18, 2017
Tweet

More Decks by TAK WAT

Other Decks in Programming

Transcript

  1. もともとインデントで構文でした $blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue,

    10%) .border padding: $margin/2 margin: $margin/2 border-color: $blue 厳密にSass といえば↑ みたいな書き方のことらしく ※Python やYAML みたい
  2. 見慣れたブロック構文にスクリプ ト言語みたいな要素も入れて $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue;

    color: darken($blue, 10%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; } 現在の.scss に落ち着く
  3. SASS のコード例(1) 入れ子 /* 感 書 */ .items{ font-size: 1vw;

    h2{ font-size: 4vw; strong{ font-weight: bold; } } }
  4. SASS のコード例(2) プロパティ /* font-* 書 */ h1{ font:{ family:

    '......'; size: 1vw; weight: normal; } } セレクタは .example{} で まとめる場合のプロパティは font: {} とJSON 記法になるのがはまりどころ ※ 個人的にはあんまりオススメはしないですがmargin や padding 指定したいときは便利かも
  5. SASS のコード例(3) 疑似要素 /* a 設定 疑似要素 含 感 */

    a{ text-decoration: none; /* 自分自身 指 "&" */ &:hover{ text-decoration: underline; } }
  6. SASS のコード例(4) 変数 /* 共通部分 変数化 */ $small-font-size: 1vw; $medium-font-size:

    2vw; $larger-font-size: 4vw; $large-font-size: 8vw; h1{ font-size: $large-font-size; }
  7. SASS のコード例(5) 継承 $mycolor: rgb(31,31,31); .alpha{ font-size: 2vw; color: $mycolor;

    } .beta{ @extend .alpha; border: 1px solid $mycolor; } .alpha の中身(font-size とcolor) を.beta にそっくりそのまま 引き継いだ上でborder を追加指定 ※ これも意外とハマるのであまりオススメしないです (後述の@mixin のほうが使い勝手がよさげなんで)
  8. SASS のコード例(6) 条件分岐 /* 当然if文 */ $type: ocean; p{ @if

    $type == ocean { color: blue; } @else { color: black; } } /* if/else 1対 書 方 (Excel MySQL IF関数 近 ) */ h1{ /* type ocean blue, ocean以外 black */ color: if($type == ocean, blue, black); }
  9. ( 余談) 変数と条件分岐をメディアク エリと組み合わせ /* 組 合 */ $device-display: wide;

    @media only screen and (max-width: 60rem) { $device-display: narrow; } /** 後 */ h1{ font-size: if($device-display == narrow, 8vw, 2vw); }
  10. SASS のコード例(7) ループ /* 使 */ /* <li> 1~6番目 連番

    名 別 背景 適用 */ li{ @for $i from 1 through 6{ &:nth-child(#{$i}){ background: linear-gradient( to bottom, rgba(255, 255, 255, 0.6), rgba(0, 0, 239, 0.1)), url('./img/button#{$i}.png' ) no-repeat; background-size: contain; background-position: center center; } } }
  11. SASS のコード例(8) 関数(MIXIN) /* 一部 違 共通部分 */ /* $width:

    1px, $color: #000 値 */ @mixin text-border($width: 1px, $color:#000){ text-shadow: 0 $width 0 $color, $width 0 0 $color, 0 (-$width) 0 $color, (-$width) 0 0 $color, (-$width) (-$width) 0 $color, $width (-$width) 0 $color, (-$width) $width 0 $color, $width $width 0 $color; } h1{ @include text-border(2px, #fff); /* 周辺2 白 縁取 */ }
  12. SASS のコード例(9) PARTIAL と IMPORT 例えば、共通で使う変数やmixin などを $box-large-size: 40vw; $color-normal:

    black; $color-warning: orange; $color-danger: red; のように定義し、_variables.scss として保存しておいて @import "variables"; .content{ width: $box-large-size; } のように複数の.scss で使いまわしができる
  13. PARTIAL 関連 _ ではじまるファイル名はpartial として扱われる partial は他のファイルから@import される前提のファ イルで単独では変換処理の対象にはされない つまり、_variables.css

    みたいなものは生成されない @import は拡張子不要 partial の場合、_ も不要 _variables.scss とvariables.scss が同時にあったら @import はどうなるんでしょうね→ 警告出ました