[sass/scss]Sass関数機能概要

51984 ワード
CSS メモ
ここでは、Sassが用意した文字列関数、数値関数、リスト関数、Introspection関数、三元関数などについて説明します.
Sass関数
  • 1. 文字列関数
  • unquote($string)文字列の引用符
    • を削除
  • quote($string)文字列に引用符
    • を追加
  • to-upper-case($string)文字列小文字を大文字
    • に変換
  • to-lower-case($string)文字列の大文字を小文字に変換
  • 2. 数値関数
  • percentage($value):単位を持たない数をパーセント値
    • に変換します.
  • round($value):数値を四捨五入し、最も近い整数
    • に変換します.
  • ceil($value):
    • を上へ
  • floor($value):
    • を下に取ります.
  • abs($value):取数の絶対値
  • min($numbers...):いくつかの数値の間の最小値
    • を見つけます.
  • max($numbers...):いくつかの数値の間の最大値
    • を見つけます.
  • random():乱数
    • を取得
  • 3. リスト関数
  • length($list)は、リストの長さ値
    • を返します.
  • nth($list,$n)は、リストで指定するラベル値
    • を返します.
  • join($list 1,l i s t 2,[list 2,[list 2,[separator])は2つの列を接続し、1つのリスト
    • になる.
  • append($list 1,v a l,[val,[val,[separator])リストの最後の
    • に値を置く
  • zip($lists...)いくつかのリストを1つの多次元のリスト
    • に結合する
  • index($list,$value)は、リスト内の値の位置値
    • を返します.
  • 4. 内省関数
  • type-of($value)は、値のタイプ
    • を返します.
  • unit($number)は、値の単位
    • を返します.
  • unitless($number)は、1つの値に単位がないかどうかを判断する
  • comparable($number-1,$number-2)は、2つの値が加算、*減算、および
    • をマージできるかどうかを判断する.
  • 5. 三元条件関数
  • if($condition, $if-true, $if-false)
  • 6. Mapの関数
  • map-get(m a p,map,map,key)は、与えられたkey値に基づいて、mapに関連する値
    • を返す.
  • map-has-key(m a p,map,map,key)は、与えられたkey値からmapに対応するvalue値があるか否かを判断し、trueが返されている場合、false
    • を返す.
  • map-keys($map)はmapのすべてのkey
    • を返します.
  • map-values($map)はmapのすべてのvalue
    • を返します.
  • map-merge(m a p 1,map 1,map 1,map 2)は、2つのmapを新しいmap
    • に統合する.
  • map-remove(m a p,map,map,key)mapからkeyを削除し、新しいmap
    • を返す
  • keywords($args)は、keyとvalue
    • を動的に設定できる関数のパラメータを返します.
  • 7.カラー関数
    • 1.文字列関数
    unquote($string)文字列の引用符を削除
  • 二重引用符でも単一引用符でも包まれた文字列でも、引用符は削除されます.
  • 文字列の一番前と最後の辺の引用符しか削除できず、真ん中の引用符は削除できません.
  • 文字列に引用符がない場合は、元の文字列を返します.
  • 引用符には、ペアにならない引用符が半分あります.
    • /* scss */
.demo1 { content: unquote('Hello Sass') ; }
.demo2 { content: unquote("Hello Sass"); }
.demo3 { content: unquote("Hello' Sass"); }
.demo4 { content: unquote("'Hello Sass'"); }
.demo5 { content: unquote('"Hello Sass"'); }
.demo6 { content: unquote(Hello Sass);}

    /* css */
.demo1 { content: Hello Sass; }
.demo2 { content: Hello Sass; }
.demo3 { content: Hello' Sass; }
.demo4 { content: 'Hello Sass'; }
.demo5 { content: "Hello Sass"; }
.demo6 { content: Hello Sass; }

    quote($string)文字列に引用符を付ける
  • 文字列自体に引用符が付いている場合は、追加しません.
  • 文字列に一重引用符が付いている場合は、二重引用符に置き換えます.
  • 二重引用符に一重引用符があれば、変わらず、一重引用符は影響を受けない.
  • 文字列の間にスペースまたは半ブロックの単一引用符、二重引用符がある場合は、単一引用符または二重引用符で囲む必要があります.そうしないと、コンパイルが間違ってしまいます.
  • は特殊な記号に出会って、例えば:!、?、>など、中折り返し記号を除く-下線_コンパイラはコンパイル時に同じようにエラーを報告します.
    • /* scss */
.demo1 { content: quote('Hello Sass') ; }
.demo2 { content: quote("Hello Sass"); }
.demo3 { content: quote("Hello' Sass"); }
.demo4 { content: quote("'Hello Sass'"); }
.demo5 { content: quote('"Hello Sass"'); }
.demo6 { content: quote(HelloSass);}

    /* css */
.demo1 { content: "Hello Sass"; }
.demo2 { content: "Hello Sass"; }
.demo3 { content: "Hello' Sass"; }
.demo4 { content: "'Hello Sass'"; }
.demo5 { content: '"Hello Sass"'; }
.demo6 { content: "HelloSass"; }

    to-upper-case($string)文字列小文字を大文字に変換
    /* scss */
.demo { content: to-upper-case('Hello Sass'); }

    /* css */
.demo { content: "HELLO SASS"; }

    to-lower-case($string)文字列の大文字を小文字に変換
    /* scss */
.demo { content: to-lower-case('Hello Sass'); }

    /* css */
.demo { content: "hello sass"; }

    2.数値関数
    percentage($value):単位なしの数をパーセント値に変換
    /* scss */
.demo {
  width : percentage(.2);
  height: percentage(2px / 10px);
  margin: percentage(2em / 10em);
}

    /* css */
.demo {
  width: 20%;
  height: 20%;
  margin: 20%;
}

    round($value):数値を四捨五入し、最も近い整数に変換します.
    /* scss */
.demo {
  //     ，          
  width: round(12.3px); 
  height: round(2px / 3px);
  margin: round(2.2%);
}

    /* css */
.demo {
  width: 12px;
  height: 1;
  margin: 2%;
}

    Ceil($value):上向きに整列
    /* scss */
.demo {
  width: ceil(2.3px);
  height: ceil(2px / 3px);
  margin: ceil(2.8%);
}

    /* css */
.demo {
  width: 3px;
  height: 1;
  margin: 3%;
}

    floor($value):下向きに整列
    /* scss */
.demo {
  width: floor(2.3px);
  height: floor(2px / 3px);
  margin: floor(2.8%);
}

    /* css */
.demo {
  width: 2px;
  height: 0;
  margin: 2%;
}

    abs($value):取数の絶対値
    /* scss */
.demo {
  width: abs(2.3px);
  height: abs(-2.3px);
}

    /* css */
.demo {
  width: 2.3px;
  height: 2.3px;
}

    min($numbers...):いくつかの数値の間の最小値を探し出す
    /* scss */
.demo {
  height: min(1,2,1%,3,300%); 
}

    /* css */
.demo {
  height: 1%;
}

    max($numbers...):いくつかの数値の間の最大値を見つけます.
    /* scss */
.demo {
  margin: max(1px,5px);
}

    /* css */
.demo {
  margin: 5px;
}

    random():乱数の取得
    /* scss */
.demo {
  padding:random();
}

    /* css */
.demo {
  padding: 0.4669285352;
}

    3.リスト関数
    length($list)は、リストの長さ値を返します.
    /* scss */
$arr: 1, 2, 3, 4;
$arr2: 1 2 3 4;
$arr3: (border 1px solid);
.demo {
  content: length($arr);
  content: length($arr2);
  content: length($arr3);
}

    /* css */
.demo {
  content: 4;
  content: 4;
  content: 3;
}

    nth($list,$n)は、リストで指定したラベル値を返します.
    /* scss */
$arr: 1px, 2px;
.demo {
  width: nth($arr, 1);
  height: nth($arr, 2);
}

    /* css */
.demo {
  width: 1px;
  height: 2px;
}

    join($list 1,l i s t 2,[list 2,[list 2,[separator])は2つの列を接続し、1つのリストになります.
    /* scss */
.demo {
  margin: join((10px 20px),(30px 40px));
}

    /* css */
.demo {
  margin: 10px 20px 30px 40px;
}

    append($list 1,v a l,[val,[val,[separator])リストの最後に値を配置
    /* scss */
.demo {
  padding: append((10px,20px,20px),30px);
}

    /* css */
.demo {
  padding: 10px, 20px, 20px, 30px;
}

    zip($lists...)いくつかのリストを多次元のリストに結合
    /* scss */
.demo {
  border: zip(1px 2px 3px,solid dashed dotted);
}

    /* css */
.demo {
  border: 1px solid, 2px dashed, 3px dotted;
}

    index($list,$value)は、リスト内の値の位置値を返します.
    /* scss */
.demo {
  //                ,      1,    。
  width: index(1px solid red, 1px);
  //            ，        false
  height: index(1px solid red, yellow)
}

    /* css */
.demo {
  width: 1;
}

    4.内省関数
    type-of($value)は値のタイプを返します.
    /* scss */
.demo {
  content:type-of(100);
  content:type-of(100px);
  content:type-of(abcd);
  content: type-of(blue);
}

    /* css */
.demo {
  content: number;
  content: number;
  content: string;
  content: color;
}

    unit($number)は値の単位を返します.
    /* scss */
.demo {
  content: unit(10px);
  content: unit(10px * 3em);
  content: unit(10px * 2em / 3cm / 1rem);
}

    /* css */
.demo {
  content: "px";
  content: "em*px";
  content: "em/rem";
}

    unitless($number)は、値に単位がないかどうかを判断します.
    /* scss */
.demo {
  content: unitless(100px);
  content: unitless(100);
}

    /* css */
.demo {
  content: false;
  content: true;
}

    comparable($number-1,$number-2)は、2つの値が加算、*減算、マージできるかどうかを判断します.
    /* scss */
.demo {
  content: comparable(2px, 1px);
  content: comparable(2px, 1em);
}

    /* css */
.demo {
  content: true;
  content: false;
}

    5.三元条件関数
    if($condition, $if-true, $if-false) 
    /* scss */
.demo {
  width: if(true, 8em, 20em);
  height: if(false, 8em, 20em);
}

    /* css */
.demo {
  width: 8em;
  height: 20em;
}

    6.Mapの関数
    map-get(m a p,map,map,key)は、与えられたkey値に基づいてmapに関連する値を返す
    /* scss */
$map: ( a: hello, b: world );
.demo {
  content: map-get($map, a);
}

    /* css */
.demo { content: hello; }

    map-has-key(m a p,map,map,key)は、与えられたkey値からmapに対応するvalue値があるか否かを判断し、trueが返されている場合、falseを返す
    /* scss */
$map: ( a: hello, b: world );
.demo {
  content: map-has-key($map, a);
  content: map-has-key($map, c);
}

    /* css */
.demo {
  content: true;
  content: false; 
}

    map-keys($map)はmap内のすべてのkeyを返します.
    /* scss */
$map: ( a: hello, b: world );
.demo {
  content: map-keys($map);
}

    /* css */
.demo {
  content: a, b;
}

    map-values($map)はmap内のすべてのvalueを返します.
    /* scss */
$map: ( a: hello, b: world );
.demo {
  content: map-values($map);
}

    /* css */
.demo {
  content: hello, world;
}

    map-merge(m a p 1,map 1,map 1,map 2)は、2つのmapを新しいmapに結合する
    /* scss */
$map: ( padding: 10px, margin: 10px );
$map2: ( font-size: 14px );
.demo {
  @each $key, $value in map-merge($map, $map2) {
    #{$key}: $value;
  }
}

    /* css */
.demo {
  padding: 10px;
  margin: 10px;
  font-size: 14px;
}

    map-remove(m a p,map,map,key)mapからkeyを削除し、新しいmapを返します.
    /* scss */
$map: (
  padding: 10px,
  margin: 10px,
  font-size: 14px
);
.demo {
  @each $key, $value in map-remove($map, padding) {
    #{$key}: $value;
  }
}

    /* css */
.demo {
  margin: 10px;
  font-size: 14px;
}

    keywords($args)は、keyとvalueを動的に設定できる関数のパラメータを返します.
    関数はmapを動的に作成する関数と言える.マクロまたは関数のパラメータをブレンドしてmapを作成できます.パラメータもペアで表示され、a r g sはk e y(argsを自動的に削除してkeyになります(argsを自動的に削除してkeyになります(記号を自動的に削除します)、$argsに対応する値はvalueです.
    /* scss */
@mixin map($args...){
    @debug keywords($args);
}

@include map(
  $dribble: #ea4c89,
  $facebook: #3b5998,
  $github: #171515,
  $google: #db4437,
  $twitter: #55acee
);

    // sh
DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)

    7.色関数
  • rgb(r e d,red,red,green,$blue):赤、緑、青の3つの値に基づいて色を作成します.
  • rgba(r e d,red,red,green,b l u e,blue,blue,alpha):赤、緑、青、透明度の値に基づいて色を作成します.
  • red($color):1つの色から赤色の値を取得します.
  • green($color):緑の値を1つの色から取得します.
  • blue($color):青色の値を1つの色から取得します.
  • mix(c o l o r−1,color−1,color−1,color−2,[$weight]):2色を混ぜ合わせる.
    • /* scss */
.demo1 {
  color: rgb(100, 148, 210);
  background-color: rgba(255, 43, 75, 0.8);

}
.demo2 {
  content: red(#f36);
  @if red(#f36) > 50 {
    color: #fff;
  } @else{
    color: #000;
  }
}
.demo3 {
  color:mix(#f00, #00f);
  color: mix(#f00, #00f, 25%)
}

    /* css */
.demo1 {
  color: #6494d2;
  background-color: rgba(255, 43, 75, 0.8);
}
.demo2 {
  content: 255;
  color: #fff;
}
.demo3 {
  color: purple;
  color: #4000bf;
}
    仮想マシンの下でwindows浸透環境DVWAの構築とファイル共有
    他人の先端を自分のプロジェクトに使う