Sassの勉強(二)

長い間簡単なフロントエンドJSとか基礎的なSQLの部分まで書いていなかったのですが、今回仕事を探していた時に正直に言うと基礎的な問題がたくさんありました.
今回は自分の就活の時間を利用してWeb開発を再体系化して~コードを再構築~()この文集は主にいくつかのWeb開発向けのノートと学習記録、いくつかのライブラリとツールフレームワークの学習です.ほとんどが入門級です.ファイルアドレス
Sassが学んだ第2部(同じくimoocの第2部)は、第1部を見たいなら、私の文集をめくってもいいです.
このセクションは主に一般的な関数とプロセス制御文です.
ロジックとプロセス制御文

@if :

@if文は条件判定に用いられる.条件判断@elseと@else ifとを組み合う

を行うこともできる.

は関数式のパラメータに合わせてtrue|falseの判断を行う.

@for :

ループ文は、col1-col12のようなグリッドシステムを構築するのに便利です.

@for throughは最終的な数を含まないが、@for toは区間数を含む.

@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; }}

@while :

@whileサイクルモードは、条件がtrueの場合、ずっと

サイクルが行われる.

@each

@eachループは、1つのリストを巡回し、対応する値

をリストから取り出す.

$list: adam john wynn mason kuroir;//$list => @each $var in

@ルール

@import

SCSSおよびSassファイル

を導入できる

@importはファイル名に基づいて導入されます.デフォルトでは、Sassファイルを探して直接導入しますが、いくつかの場合、CSSの@importルールにコンパイルされます.

ファイルの拡張子が.css.

ファイル名がhttp://で始まる場合.

ファイル名がurl()の場合.

@importにメディアクエリが含まれている場合.

@media

min-widthなどの異なる設備上の異なるCSSは、適切に座っています.

同様にCSSの使用形態

に対応する.

@extend

@extendは、セレクタまたはプレースホルダを拡張するための

である.

@extendは、拡張クラスセレクタだけでなく、任意のセレクタ

を拡張することもできる.

@at-root

は、ルート要素をスキップし、一部の要素で上位要素をスキップする必要がある場合に使用します.

@debug

@debugは、Sassのソースコードに@debugコマンドが使用された後、コンパイルエラーが発生した場合、コマンド端末に設定したプロンプトBug:

が出力されます.

@warn、@error

@warnと@error、@debugの機能は似ています.Sass

をよりよくデバッグするのに役立ちます.
一般的な関数
文字列

unquote($string):文字列の引用符を削除し、文字の引用符を削除できません.

quote($string):文字列に引用符を付け、自身に引用符を付けると二重引用符に統一的に置き換えられます.

To-upper-case($string)関数は、文字列の小文字を大文字に変換します.

To-lower-case($string)文字列を小文字に変換します.

数値

percentage($value)は、単位を持たない数をパーセント値に変換します.

round($value)は、数値を四捨五入し、最も近い整数に変換する.

ceil($value)は、自分より大きい小数を次の整数に変換する.

floor($value)は、小数部を1つの数で除去します.

abs($value)は、1つの数の絶対値を返します.

min($numbers…)いくつかの数値の間の最小値を見つけます.

max($numbers…)いくつかの数値の間の最大値を見つけます.

random()乱数を取得します.

リスト#リスト#

length($list)は、リストの長さの値を返します.

nth($list, $n)は、リストで指定されたラベル値を返します.

join($list1, $list2, [$separator])は、2つの列を接続してリストにします.

append($list1, $val, [$separator])リストの最後に値を置きます.

zip($lists…)は、いくつかのリストを多次元のリストに結合する.

index($list, $value)は、リスト内の値の位置値を返します.

内省関数

type-of($value)は、値のタイプ

を返す.

numberは数値型

stringは文字列型

である.

boolはブール型

color色型

unit($number)は1つの値の単位を返し、複雑な演算に遭遇し、* or /であれば「多単位の組合せ」を返すが、加減についてはエラー(pxとcm、mmの演算を除く)を報告する.

unitless($number)は、1つの値に単位があるか否かを判断し、戻り値はbool

である.

comparable($number-1, $number-2)は、2つの値が加算、減算およびマージ可能であるか否かを判断し、1つのbool

を返す.
さんげんかんすうif($condition,$if-true,$if-false)関数、すなわち$conditionが成立すると、戻り値が2番目のパラメータ、falseの場合は3番目のパラメータが返されます.
Map関数

//   $map   
$map: (
    key1: value1,
    key2: (
        key-1: value-1,
        key-2: value-2,
    ),
    key3: value3
);

1.map-get($map,$key)は、与えられたkey値に基づいてmapに関連する値を返し、mapにおける値に相当する.2.map-merge($map1,$map2)は、2つのmapを新しいmapに結合する.3.map-remove($map,$key) mapからkeyを削除し、新しいmapを返します.4.map-keys($map)はmap内のすべてのkeyを返す.5.map-values($map)はmap内のすべてのvalueを返します.6.map-has-key($map,$key)は、与えられたkey値に基づいてmapに対応するvalue値があるか否かを判断し、trueが返されている場合、falseを返す.7.keywords($args)は、keyおよびvalueを動的に設定できる関数のパラメータを返す.
カラー関数

rgb($red,$green,$blue)、赤、緑、青の3つの値に基づいて色

を作成します.

rgba($red,$green,$blue,$alpha)赤、緑、青、透明度の値に基づいて色

を作成します.

red($color)は、1つの色から赤色の値を取得する.

green($color)は、1つの色から緑色の値を取得する.

blue($color)は、1つの色から青色の値を取得する.

mix($color-1,$color-2,[$weight])：は2色を混ぜ合わせた.

HSL、Opacity関数:
HSL

hsl($hue,$saturation,$lightness)は、色相(hue)、飽和度(saturation)、輝度(lightness)の値によって色を作成します.2.hsla($hue,$saturation,$lightness,$alpha)色相(hue)、飽和度(saturation)、輝度(lightness)、および透明(alpha)の値により、色

を作成する

hue($color)は、1つの色から色相(hue)値を取得する.

saturation($color)は、1つの色から飽和値を取得する.

lighten($color,$amount)色の輝度値を変更することにより、色を明るくすることにより、新しい色

を作成する.

darken($color,$amount)色の輝度値を変更することで、色を暗くし、新しい色を作成します.

saturate($color,$amount)色の彩度値を変更することにより、色をより飽和させ、新しい色

を作成する.

desaturate($color,$amount)は、色の飽和値を変更することによって、色をより少なく飽和させ、新しい色を作成する.

grayscale($color)は1つの色をグレーに変え、desaturate($color,100%)に相当する.

complement($color)は、adjust−hue($color,180 deg)に相当する補足色を返す.

invert($color)は反転色で、赤、緑、青の値が逆になりますが、透明度は変わりません.

Opacity
1.alpha($color) /opacity($color)色透明度値を取得する.

rgba($color, $alpha)色の透明度値を変更します.3.opacify($color, $amount) / fade-in($color, $amount)色をより不透明にする.

transparentize($color, $amount) / fade-out($color, $amount)は、色をより透明にします.