Sass学習

6992 ワード

Sass学習


紹介する


Sassには2つの構文規則(syntaxes)があり、現在の新しい構文規則(Sass 3から)は「SCSS」(モダンなcss(Sassy CSS))と呼ばれている.これはcss 3構文の拡張レベルであり、すなわち、各構文が正しいCSS 3ファイルも合法的なSCSSファイルであり、SCSSファイルが使用する.scssは拡張名として使用されます.2つ目の文法はインデント文法(またはSass)となり、Hamlの簡潔な精錬に啓発され、cssに近いがより簡素な方法でcssを書くことができるように誕生した.カッコ、セミコロンはありません.行のインデントを使用してcssブロックを指定します.sassは最も元の構文ではありませんが、インデント構文はサポートされ続け、インデント構文のファイルでサポートされます.sassは拡張名です.

インストール


1.rvmの取り付け


 1.  rvm$ curl -L get.rvm.io | bash -s stable
 2.  rvm$ source ~/.rvm/scripts/rvm
 3.  2.3.0  ruby$ rvm install 2.3.0
 4. 2.3.0    $ rvm use 2.3.0 --default
 rvm -v

2.rvmでrubyをインストールする


sudo rvm install ruby

3.sassのインストール


 sudo gem install sass 
 
sass -v

4.webStorm構成


設定ページで、「Preferences->Tools->File Watcher構成」を選択します.

きそ


0.コメント


3つの形式があります.
(1)/コメント:このコメントは.scssソースファイルにありますが、コンパイル後のcssファイルにはありません.
(2)/!/:重要な注記は、styleのcssファイルにもありますが、一般的にはcssファイルの著作権説明などの情報が配置されます.
(3)/:このコメントはcompressedのstyleのcssにはなく、他のstyleのcssファイルに含まれています.

1.変数


変数の定義は一般的に$で始まります:$name、ある変数の役割ドメインは定義されたレベルとサブレベルに限られます.
1.1ローカル変数
sassのローカル変数定義は、

 body {
 $color:red;
 color:$color;
 }
などの他の言語定義と同様です.
コンパイル後:

 body {
 color: red;
 }
1.2グローバル変数
サブセレクタで定義した変数がグローバル変数になるようにするには、を使用します.globalキーワード

 body {
 $color:red !global;
 color:$color;
 }
1.3変数のデフォルト
定義した変数のデフォルト値を初期化するには、を使用します.defaultキーワード

 $color:red !default;
1.4多値変数
多値変数は、配列と辞書の2つの形式に分けられます.
配列:

 $paddings:5px 10px 5px 10px;
   nth        ：nth($paddings,1): padding

辞書:

 $maps:(color:red, borderColor:blue);
     map_get($maps,boderColor)       key
1.5変数特殊用法
ネストされた参照は、他のプログラミング言語では文字列補間であり、

 $left:left;
 .div1{
 border-#{$left}-width:5px;
 }
をラップする必要がある
変数定義では、下線は横線と同じです.たとえば、$text_info === $text-info

2.ファイルのインポート


sassでは、定義ファイルの下線""最初は一部のファイルを表し、cssはコンパイルされません.これは表面のために余分なcssを生成します.例えば、定義_part.scssで@import'partを使用してインポート
オリジナルcssインポートを区別する方法
インポートされたファイル名は.css末尾
インポートされたファイルはURLアドレスで
インポートされたファイルはcssのurl()値です.

3.ネスト


3.1セレクタネスト

 body{
 header {
 color: red;
 }
 }
コンパイル結果:

 body header {
 color: red;
 }

3.2属性ネスト


 body{
 header {
 color: red;
 }
 footer {
 background: {
 color: green;
 size: 20%;
 };
 }
 }
コンパイル結果:

 body footer {
 background-color: green;
 background-size: 20%; }
3.3親セレクタを参照&

 body{
 a {
 color: red;
 &:hover{
 color: green;
 }
 }
 }

コンパイル結果:

 body a {
 color: red; }
 body a:hover {
 color: green; }
3.4@at-root,ネストから飛び出す
  • デフォルト@at-rootはセレクタネストからのみ飛び出し、@mediaまたは@supportからは飛び出しません.
  • 飛び出すには@at-root(without:media)|@at-root(without:support)
    • が必要です
  • には、allがすべてを表しています.ruleは従来のcss
    • を表す

     body{ 
 
    header {
    color: red;

    @at-root .container {
        width: 100px;
    }
}
footer {
    background: {
        color: green;
        size: 20%;
    };


}

      
    }  
    コンパイル  :

     body header {
     color: red; }
     .container {
     width: 100px; }
     body footer {
     background-color: green;
     background-size: 20%; }
     
    3.5@at-rootと&  

     .text-info {
     color: red;
     @at-root nav &{
     color: blue;
     }
     }
     
      
    コンパイル  :

     .text-info {
     color: red; }
     nav .text-info {
     color: blue; }
     
    4.  
      
    4.1    

     .A{
     background-color: red;
     }
     .A1 {
     @extend .A;
     color: red;
     }
     
      

     .A, .A1 {
     background-color: red; }
     .A1 {
     color: red; }
     
      
    4.2マルチ  
      な で@entendに ています.A,.B; 
    4.3チェーン   

     .one {
     color: red;
     }
     .two {
     @extend .one;
     size: 100px;
     }
     .three{
     @extend .two;
     border-radius: 10px;
     }
     
      

     .one, .two, .three {
     color: red; } 
 
    .two, .three {
     size: 100px; }
     
 
    .three {
     border-radius: 10px; }
     
      
    4.4  の  
  • セレクタまたは    セレクタを む
    • はサポートされていない.
  •     がaである  、ちょうどこの  aにhover  の  がある  、  hoverも

     a :hover{
     color: red;
     }
     
    •   される.
    .four { @extend a; } 

     a :hover, .four :hover {
     color: red; } 
 
      
    4.5クロス  の  
     じ でない  、クロスコンパイル  

     .five a{
     color: red;
     } 
 
    .six {
     @extend a;
     }
     
    が  されます.

     .five a, .five .six {
     color: red; }
     
      
    4.6  された  ドメイン
      は  に  ドメインの  があり,  は  (@media)  のセレクタでは  できないが,  は  にしか けない.
    4.7  -デューティセレクタ%
    クラス を  したい  もありますが、HTMLで  したくない  は、  できるクラス を きたいだけです. にcssスタイルに  させたくない.  されたスタイル(%oneなど)をプレースホルダで き、@extendで  することで、CSSのルールセットにレンダリングされないようにすることができます.

     .B a%long {
     color: red;
     }
     .C {
     @extend %long;
     }
     
      

     .B a.C {
     color: red; }
     
      
    5.ステップアップ
      
    5.1データ 
    Sassが うデータ は  の りである:Number,String,List,Map,Color,Boolean,Null
      のタイプは   にインスタンスで られますが、あまり  されていません.また、いくつかの  がドキュメントを  すればいいです.
    5.2    
     の  と   に ているので、あまり  しません.
    5.3 Mixin 
    @mixinの び し  は@include,@includeで  されたスタイルはコピーをコピーする  で  し,@extendで  されたスタイルは  せ  の  で  する

     @mixin count($color1:red){
     color: color1;
     } 
 
    body{
     @include count(#fff)
     }
     
 
      #define   
     
     

     body {
     color: #fff; }
     
      パラメータの    

     @mixin count($color1...){
     color: color1;
     }
     
      
    @contentアプリケーション:

     @mixin header{ #header{ @content; } }
     
     

     @include header{ width:1000px; height:200px; .logo{ width:200px; } }
     
    5.4  
  •     ポイントここを いて  で ましょう
  • カスタム  

    •  @function double($width){
     @return $width * 2;
     }
     
      
  • @debug,@error,@warn 
    • をデバッグするために  
    5.5    
      キーワードは  の りで、 に@ifはありません
    @for 
    @while 
    @each 
    リファレンスドキュメント
      
    1.Sassドキュメント
    .netで唯一のログインを実現する方法
    BFCについて例を通して説明する