一文学会sass常用文法

29655 ワード
css
前言
プロジェクトはずっとscssを使っていますが、sassの使い方をよく勉強していません.定義変数やセレクタのネストなどわずかな機能しか使っていません.それからsass中文网をよく见て、自分が1つの世界を逃したと感じます...
使用法
1.簡単な使い方
$を使用して変数を定義します.
セレクタネストには、要素自体を使用&表示することが含まれます.
2.普段使っている使い方
2.1属性ネスト
同じ接頭辞を持つcssプロパティは、ネストされたルールで書くことができます.
.text-item{
     
	font:{
     
		size:30px;
		weight:bold;
	}
	text:{
     
		align:center;
		indent:2em;
	}
}

//             
.text-container{
     
	font:12px/24px {
     
		weight:600;
	}
}

2.2補間文${}を使用すると、セレクタまたは属性名に変数を使用できます.
$textVar:item
$widthName:width
.text-#{
     $textVar}{
     
	#{
     $widthName}:10px;
}

属性値には#{}を用いることもできるが、変数を直接用いることは容易ではないが、 などの特殊な場合に用いることができる.
2.3数値演算
(+、-、*、/、%)を含む
.text-item{
     
	margin-left:10px+2px;
}

コンパイル
.text-item{
     
	margin-left:12px
}

/それ自体がcssに意味があるため、以下のようなケースしかない/除算として扱われる
  • の値は、1px+10px/2pxのような演算式の一部である.
  • 演算式は、(10px/2px)のように()で包まれる.
  • 演算式には、$width/2
    • のような変数が使用される.
    変数を使用しても演算処理を行わないことが望ましい場合は、#{$ width}/2#{$ width}/#{$ num}のような#{}を使用することができる.
    2.4 @media
    @meidaは元のcssの機能に拡張してセレクタの中でネストして@mediaを書くことができて、正常な書く流れを乱さない
    $mediaDevice :screen;

.text-item{
     
  width:10px;
  @media #{
     $mediaDevice}{
     
    width:20px;
  }
}

    コンパイル後
    .text-item {
     
  width: 10px;
}
@media screen {
     
  .text-item {
     
    width: 20px;
  }
}

    2.5 @extend
    @extendは、1つのセレクタ上で他のセレクタのスタイルを拡張できます.たとえば、
    .text1{
     
  color:red;
  width:100px;
  height:100px;
}
.text2{
     
  color:blue;
}
.text-item{
     
  @extend .text1,.text2;
  line-height:20px;
}

    コンパイル
    .text1, .text-item {
     
  color: red;
  width: 100px;
  height: 100px;
}

.text2, .text-item {
     
  color: blue;
}

.text-item {
     
  line-height: 20px;
}

    @extendのために使用されるスタイルもありますが、コンパイル後のコードのボリュームを増やさないために%selectorで表すことができます.
    %text{
     
  font:12px/24px;
}
.text-item{
     
  @extend %text;
  width:20px;
}

    コンパイル後
    .text-item {
     
  font: 12px/24px;
}

.text-item {
     
  width: 20px;
}

    @mediaで@extendを使用する場合は、注意すべきことがあります.@extendのセレクタも、同じ@mediaでなければなりませんが、別々に書くことは許可されています.
    /*    */
@media screen{
     
  %text{
     
    font:12px/24px;
  }
  .text-item{
     
    @extend %text;
    width:20px;
  }
}

/*    */
%text{
     
    font:12px/24px;
  }
@media screen{
      
  .text-item{
     
    @extend %text;
    width:20px;
  }
}

/*    */
@media screen{
     
  %text{
     
    font:12px/24px;
  }
}
@media screen{
     
  .text-item{
     
    @extend %text;
    width:20px;
  }
}

    2.6制御指令
    1.@if@if命令の後に判断式が続き、式がfalseまたはnullでない場合、後の{}の内容をコンパイルします.
    $text:text1;
.text-item{
     
  @if $text==text {
     border:1px solid red}
  @else if $text==text1 {
     border:1px solid green}
  @else {
     border:1px solid blue}
}

    コンパイル
    .text-item {
     
  border: 1px solid green;
}

    2.@for@for命令は制限された範囲内で出力フォーマットを繰り返し、要求(変数の値)ごとに出力結果を変更し、フォーマットを使用する
    @for$var fromthrough:startとendを含む@for$var fromto:startを含む、endを含まない
    @for $i from 1 through 3{
     
  $num:$i*4;
  .m-t-#{
     $num}{
     
    margin-top:#{
     $num}px;
  }
}

    コンパイル
    .m-t-4 {
     
  margin-top: 4px;
}
.m-t-8 {
     
  margin-top: 8px;
}
/*    through  to,         */
.m-t-12 {
     
  margin-top: 12px;
}

    3.@each@eachはリストの循環出力に用いることができ、式は@each$i inであり、以下の通りである.
    $animals:bird,dog,cat;
@each $item in $animals{
     
  .item-#{
     $item}{
     
    background:url($item);
  }
}

    コンパイル後
    .item-bird {
     
  background: url(bird);
}
.item-dog {
     
  background: url(dog);
}
.item-cat {
     
  background: url(cat);
}

    複数のリストを一度にループすることもできますが、ループルールは次のとおりです.
    @each $item,$index in (bird,1),(dog,2){
     
  .item-#{
     $index}{
     
    background:url($item);
  }
}

    maplistをループすることもできます
    $mapList:(1:dog,2:cat,3:bird);
@each $index,$item in $mapList{
     
  .item-#{
     $index}{
     
    background:url($item);
  }
}

    2.7混合指令
    1.mixinはmixinを使用して繰り返し使用するスタイルを定義し、繰り返し操作を避けることができます.使用は@includeによって導入され、使用方法は以下の通りです.sass構文の大部分をサポートします.
    @mixin errText{
     
  color:red;
  text-decoration:underline;
}
.text-item{
     
  @include errText;
}

/*      */
.text-item {
     
  color:red;
  text-decoration:underline;
}

    2.パラメータ入力は分かりやすいですが、@includeリファレンスを使用するときに特定のパラメータを入力することで、対応するスタイルを生成します.
    @mixin btnStyle($color,$width,$lineHeight){
     
  color:$color;
  width:$width;
  line-height:$lineHeight;
};
.text-btn{
     
  @include btnStyle(blue,100px,20px)
}
/*      */
.text-btn {
     
  color: blue;
  width: 100px;
  line-height: 20px;
}

    もちろんmixinではデフォルト値を使用できます(デフォルト値を使用するパラメータはパラメータの後ろに置くのが望ましいです)
    @mixin btnStyle($color:red,$width:200px,$lineHeight:20px){
     
  color:$color;
  width:$width;
  line-height:$lineHeight;
};
.text-btn{
     
  @include btnStyle()
}
/*      */
.text-btn {
     
  color: red;
  width: 200px;
  line-height: 20px;
}

    指定した変数を使用してパラメータを渡すこともできます
    @mixin btnStyle($color:red,$width:200px,$lineHeight:20px){
     
  color:$color;
  width:$width;
  line-height:$lineHeight;
};
.text-btn{
     
  @include btnStyle($color:green)
}
/*      */
.text-btn {
     
  color: green;
  width: 200px;
  line-height: 20px;
}

    box-shadowのような未知数のパラメータが存在する場合、 ...の定義方式を用いて、入力パラメータをlistとして処理することを示すことができ、ここではES 6の拡張演算子...に似ている.
    @mixin boxShadow($shadow...){
     
  box-shadow:$shadow;
}
.text-item{
     
  @include boxShadow(0px 4px 5px #666, 2px 6px 10px #999)
}
/*      */
.text-item {
     
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
    ...を使用して変数を展開することもできます
    @mixin btnStyle($color,$width,$height){
     
  color:$color;
  width:$width;
  height:$height;
}
$style:(red,100px,200px);
.text-btn{
     
  @include btnStyle($style...);
}
/*      */
.text-btn {
     
  color: red;
  width: 100px;
  height: 200px;
}

    2.8関数
    関数の存在は繰返し式演算を減らすためであり,関数の定義方式は以下の通りであり,パラメータの使用方法はmixinと同様である.
    @function functionName($var1...){
     
	@return    	
}

    使い方は以下の通り
    @function getNum($num){
     
  @return $num*2/5*10
}
.text-item{
     
  width:#{
     getNum(0.1)}px;
}
/*      */
.text-item {
     
  width: 0.4px;
}

    まとめ
    sassの機能はまだたくさんありますが、ここではいくつかの一般的な文法だけをフィルタします.具体的にはsass中国語ドキュメントを参照してください.
    自動化テストプラットフォーム化[v 1.0.0][イベントリソースロック]
    RxSwift学びの過程〜直列処理編〜