[書評]Web制作者のためのSassの教科書

Web制作者のためのSassの教科書
Webデザインの現場で必須のCSSプリプロセッサ
を読んだ

マスタカと言えばデザイナー
最近Sassを触ることが出てきたので本書を読んでみた
以下、内容

・本書の内容
Sassの構文について説明した本
cssはわかるけど・・・って方ならとっつきやすいです

nodejs
・npm install
sassが入らない場合は以下の対応を実施してください
＞ To apply this setting go to System Preferences >> Network >> press Advanced >> TCP/IP tab >> on Configure IPv6 select Link-local only and apply
https://www.reddit.com/r/node/comments/z9hsdw/npm_install_stuck_on_idealtree_builddeps/?rdt=46234

css
・media only screen and
mediaクエリの説明は以下
https://sole-color-blog.com/blog/71/
only キーワードは、メディア特性がついたメディアクエリーに対応していない古いブラウザーで、そのスタイルが適用されるのを防ぎます。最近のブラウザーでは効果がありません。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_media_queries/Using_media_queries

・:root
親のhtml要素
https://developer.mozilla.org/ja/docs/Web/CSS/:root

・prefers-color-scheme
ダークモードを指定するときに使う
https://qiita.com/hmmrjn/items/131916f9f4257342b2f2

sass
・&
&を使うと親の要素と同じになる
以下ならa:hover

a{
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}

・top等を子要素で設定
border-bottom-width:3pxになる

border: {
    top: 5px;
    bottom: {
        width: 3px;
    }
}

・変数
5pxで全部を一括で変更できる
#{$IMG}で内容を展開できる

$value: 5px;
border: {
    top: $value;
    bottom: {
        width: $value;
    }
}

$IMG: './img/';
background: url(#{$IMG}aaa.png);
background: url($IMG);

・sassの分割
_をつけるとprivateになる
useを使うと参照できる

//_variables.scss
$color-main: blue;

//sample.sass
@use "variables";
$red: $color-main;
$red: variables.$color-main;

//----
//_global.scss
@forward "variables" as b-*;

//sample.sass
@use "variables";
$color: #{g.$b-a};

・継承
%はエクスエンド専用のプレースホルダーセレクター

a{
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}
.min {
    @extend a
}
//----
%base {
    text-decoration: none;
}
.min {
    @extend %base
}

・mixin

@include boxSet(3px 0);

@mixin boxSet($value: 1px 0) {
    padding: 15px;
    margin: $value;
}

・@content
float:noneが＠contentのところに表示される

@mixin media($width-media: 768px) {
    @media only screen and (max-width: $width-media) {
        @content;
    }
}

.image {
    float: left;
    @include media {
        float: none;
    }
}

・if-else

$getStyle: 0;
@mixin style {
    @if $getStyle == 1 {
        margin: 0 0;
    }
    @else {
        margin: 0 0;
    }
}

・for

@for $value from 1 through 2 {
    .mt_#{$value*10} {
        margin: 10px * $value;
    }
}

・while

$w: 20;
@while $w > 0 {
    .mt_#{$w} {
        margin: $w;
    }
    $w: $w - 10;
}

・map

$nameList: top, about;
@each $name in $nameList {
    .body-#{$name} {
        psdding: 10;
    }
}

・デフォルトの関数を使う

@use 'sass:math'
.boxB {
    width: math.abs(-10);
}

・カスタム関数

@function halfSize($value) {
    @return math.round(math.div($value, 2));
}

・デバック

@debug "a";
@warn "b";

・カスタマイズの例

$theme-colors: (
    background: (
        light: #ffffff,
        dark: #1a1a1a
    ),
    text: (
        light: #000000,
        dark: #ffffff
    ),
    link: (
        light: #002375,
        dark: #cad4ed
    ),
    primary: (
        light: #3498db,
    ),
    secondary: (
        light: #bf4080
    )
);

:root {
    @each $key, $value in $theme-colors {
        --#{$key}: #{map.get($value, light)};
    }
}

@media (prefers-color-scheme: dark) {
    @each $key, $value in $theme-colors {
        @if map.has-key($value, dark) {
            --#{$key}: #{map.get($value, dark)};
        }
    }
}

Web制作者のためのSassの教科書

Pocket

関連記事: