見出し画像

３５歳から始めるアプリ開発日記　＃５

Takaoka_-_

TODOリスト

  1. progateにアカウント登録

  2. JS(ES6)の確認（ES5とのギャップがないか確認しようかな）

  3. jQueryの確認（シッタカブリな部分がないか確認しようかな）

  4. Gitの確認（シッタカブリな部分がないか確認しようかな）

  5. Sassの学習（中身知らないので）

  6. Reactの学習（中身知らないので）

  7. Node.jsの学習（雰囲気は知ってるけど詳しくないから）



さて次はSassサスについて見ていきます
安定の「progateプロゲート」様


これ未知です
SaaSサースなら知ってますし良く使いますが
これは知らないですね


知らないことってワクワクしませんか？
最高ですね



（わくわく）




ん？

「CSS・・・」

CSS系かぁ・・・・
しかも全1レッスン　Gitと同じか
とりあえずやってみました




45分ぐらいで「1～14」まで読破・検証完了
（途中で実装編があったけど実検証しているのでパス）


知らなかったことだけピックアップ

  1. SassはScss記法が主流（へ～）

  2. 「.scss」拡張子（これはたまに見たことがあった）

  3. 入れ子構造で書ける（これは良い）

  4. &記号（ほへぇ～便利　＆は親に該当するセレクタの置き換えか）

  5. 変数（これはCSSで欲しかったものだな）
    ＞ここから有料なのでスライド確認+VSCodeで検証

  6. mixinミックスイン（面白い　使い方次第で効率の良し悪しが変わりそう）

  7. 関数がある（オリジナル関数も作れるっぽい）

  8. scssを実行するのではなくコンパイルを通してcssに変換し
    アプリはcssを参照する


※VSCodeでSassを使う場合「Live Sass Compiler」をいれましょう
　理由は上の8でコンパイルする必要があるからです


コンパイルできるCSSって欲しかったので
ちょっと刺激的でした

ただ　プログラム言語の基本を知ってると
「あ～　へ～　そっかそっか　分かった　OK」
って感じで少し物足りない感が残る

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script type="module" src='js/main.js'></script>
    <link rel="stylesheet" href="testSass.css">
    <link rel='stylesheet' href='https://unpkg.com/ress/dist/ress.min.css'>

</head>

<body>
    hello
    <h1>h1だよ～～～</h1>
    <h2>h2だよ～～～</h2>
    <h3>h3だよ～～～</h3>
    <h4>h4だよ！！！</h4>
</body>

</html>
//変数使ってみた
$variables-color-blue:#3c58bd;
h1 {
    &:hover {
        //:hoverのローカル変数
        $variables-size:14px;
        color: $variables-color-blue;
        font-size: $variables-size;
    }

    &:active {
        //:hoverのローカル変数はスコープ外
        //font-size: $variables-size;
        font-size: 20px;
    }
}

//mixin使ってみた
@mixin mixin-test {
    font-size: 10px;
    color: #ff9900;
}

h2 {
    @include mixin-test;
    //以下が設定される
    // font-size: 10px;
    // color: #ff9900;
}

h3 {
    @include mixin-test;
    //以下が設定される
    // font-size: 10px;
    // color: #ff9900;
}

// mixin 引数使ってみた
@mixin mixin-test2($size, $color) {
    font-size: $size;
    color: $color;
}

h4 {
    @include mixin-test2(20px, #660011);
    //以下が設定される
    // font-size: 20px;
    // color: #660011;
}


実行結果は　こんな感じ♪（「いい感じ」＠ケツメイシ）


Sassは問題なさそうなので次へ


この記事が気に入ったらサポートをしてみませんか？