阿呆はすべて理解することができるSassの基礎知識の解析

44235 ワード
study ノート
一、変数の定義
sassでは、変数を定義することで便利です.
sassでは、変数を定義するために**$記号**を使用します.
$primary-color : #FFFFFF;       //      
$peimary-border : 1px solid $primary-color;  //         ，         

div.box {
    background-color : $primary-color;   //             
}
h1.page-head {
    border : $primary-border;   //      border：1px solid #FFFFFF
}

二、Sassの入れ子の書き方
cssでは、セレクタを使用すると、次のようなプロパティが繰り返されることがあります.
.nav {
    height : 100px;
}
.nav ul {
    margin: 0;
}
.nav ul li {
    float : left;
    list-style : none;
    padding : 5px;
}

この例では.navは3回繰り返し,ulは2回繰り返した.
ここでこの例をSassで書き直します
.nav {
    height : 100px;
    ul {
    	margin: 0;
     	li {
    		float : left;
    		list-style : none;
    		padding : 5px;
		}
	}
}

他のセレクタのスタイルをスタイルに直接ネストしているのがわかりますが、Sassはコンパイル時に各ネストの関係を自動的に処理しているので、便利で簡潔だと思いませんか?
三、ネストされた構文で親セレクタを呼び出す
ネストされた構文を使用すると、ネストされた各関係がコンパイルされると、この例のようなスペースがあります.
.nav {
    height : 100px;
    div {
    	margin: 0;
     	a {
    		float : left;
    		list-style : none;
    		padding : 5px;
            :hover {               //           
                background-color : red;
            }
		}
	}
}


//    
.nav {
    height : 100px;
}
.nav div {
    margin: 0;
}
.nav div a :hover {    //     a   :hover        ，   ，         
    float : left;
    list-style : none;
    padding : 5px;
}

この場合、親セレクタに関連付けられた擬似クラスのスタイルを使用するときに親セレクタを呼び出す必要があります.
sassでは、親セレクタを**&シンボル**で呼び出します.
例を書き直しましょう
.nav {
    height : 100px;
    div {
    	margin: 0;
     	a {
    		float : left;
    		list-style : none;
    		padding : 5px;
            &:hover {               //    &  
                background-color : red;
            }
		}
	}
    & &-text {  
        font-size : 15px;
    }
}

//    
.nav {
    height : 100px;
}
.nav div {
    margin: 0;
}
.nav div a:hover {    //    ，a           
    float : left;
    list-style : none;
    padding : 5px;
}
.nav nav-text {   //    &              
      font-size : 15px;
}

これで私たちが望む結果が得られます
四、属性の入れ子
cssでは、選択権が繰り返されることが多いだけでなく、多くの属性も繰り返される場所があります.例えば、次の例です.
body {
    font-family :   ;
    font-size : 15px;
    font-weight : normal;
}

.nav {
    border : 1px solid #FFFFFF;
    border-left : 0;
    border-right :0;
}

fontとborderが何度も繰り返されていることがわかります.sassで書き直すことができます.
body {
    font：{    //          ，       {}，           font 
        family :   ;
    	size : 15px;
    	weight : normal;
        }
}

.nav {
    border : 1px solid #FFFFFF {   //               
        left : 0;
    	right :0;
    }
}

結果はsassのコンパイルを経て、結果は修正していない前と同じですが、コードを書くときは時間と労力を節約することができます.
五、mixin
5.1基本使用
sassではmixin(混入)を定義して名前のある共通のスタイルを書くことができ、どこでも繰り返し使用することができます.
sassでmixinを使用する方法は、@mixin記号を使用してmixinを定義することです.
@mixin   (  1，  2...) {
    . . . 
    (     css  ，      、  、    )
}

jsの関数に似ているように見えますか?
ではmixinを定義してみましょう
@mixin alert {
    background-color : #FFFFFF;
    color : #1b3a4f;
}

これでalertというmixinを定義し、今彼を使用します.
sassでmixinを使用するには**@include**でmixinを導入します.
@mixin alert {
    background-color : #FFFFFF;
    color : #1b3a4f;
} 

.alert-warning {
    @include alert    //        alert  mixin
}

解析の結果は次のとおりです.
.alert-warning {
    background-color : #FFFFFF;
    color : #1b3a4f;
}

mixinにスタイルをネストすることもできます.
@mixin alert {
    background-color : #FFFFFF;
    color : #1b3a4f;
    a {
        color : #55a2cb;
    }
} 

.alert-warning {
    @include alert 
}

解析の結果、次のようになります.
.alert-warning {
    background-color : #FFFFFF;
    color : #1b3a4f;
}
.alert-warning  a {
    color : #55a2cb;
}

使いやすいでしょうO(∩∩)O~
5.2パラメータの使用
mixinのパラメータを見てみましょう.上のmixinを書き直しましょう.
mixinのパラメータは$記号で始まる必要があります.変数と同じです.
@mixin alert($background,$text-color) {
    background-color : $background;
    color : $text-color;
    a {
        color : darken($text-color,10%);   //       darken()  ，     $text-color       10%
    }
}

このmixinを使ってみましょう
.alert-warning {
    @include alert (#FFFFFF,#CCCCCC)   //     ，      
}

コンパイルの結果は次のとおりです.
.alert-warning {
    background-color : #FFFFFF;
    color : #CCCCCC;
}
.alert-warning  a {
    color : #5df2c3;   //     10%
}

六、継承
sassでは、@extendを使用して別のスタイルのすべての内容を継承できます.
.alert {
    color : #3d4f5c;    //         
}

.alert-info {
    @extend .alert;    //      @extend   .alert   
     padding : 15px;   //           
}

解析の結果は次のとおりです.
.alert .alert-info {
    color : #3d4f5c; 
}
.alert-info {
    padding : 15px;
}

私たちももう一つの関係を加えることができます.
.alert {
    color : #3d4f5c;    //         
}

.alert a {
    font-weight : bold;
}

.alert-info {
    @extend .alert;    //      @extend   .alert   
     padding : 15px;   //           
}

解析結果は次のとおりです.
.alert .alert-info {
    color : #3d4f5c; 
}

.alert a, .alert-info a {
    font-weight : bold;   //    ，.alert .alert-info  a       
}

.alert-info {
    padding : 15px;
}

七、partialsと@import
@importはモジュール化プログラミングを知っている人はきっとよく知っていると信じています.@importを使って他のファイルをインポートすることができますが、インポートするたびにhttpリクエストを送信し、インポートされたcssファイルをダウンロードします.リクエストするたびにサーバーのリソースが消費されるので、ページが遅くなります.
Sassは@importの機能を拡張し、@importを使用すると他のインポートしたファイルが含まれ、cssファイルにコンパイルされます.これにより、プロジェクトのcssファイルを小さな部分に分割し、@importでファイルにコンパイルすることができます.
これらの小さい部分はsassの中でPartialsになって、それぞれのPartialは1つのファイルで、ファイルの名前は下線を引く必要があります_冒頭、SassはこのファイルがPartial、つまりプロジェクトの一部であることを知っています.このようにSassはこれらのscssファイルを単独でコンパイルすることはありません.Partialは私たちのプロジェクトをモジュール化し、より筋道を立てることができます.
例を見てみましょう.
ここにファイルがあります.scss: 
.alert {
    color : #3d4f5c;    //         
}

.alert a {
    font-weight : bold;
}

.alert-info {
    @extend .alert;    //      @extend   .alert   
     padding : 15px;   //           
}

もう一つ_base.scss: 
body {
    margin : 0;
    padding : 0;
}

今私たちはstyleにいます.scssでインポート_base.scss 
@import "base.scss"    //  ：               

.alert {
    color : #3d4f5c;    //         
}

.alert a {
    font-weight : bold;
}

.alert-info {
    @extend .alert;    //      @extend   .alert   
     padding : 15px;   //           
}

これでインポートが完了し、コンパイル時に2つのscssファイルを1つのcssファイルにコンパイルします.
body {     //   _base     
    margin : 0;
    padding : 0;
}
.alert .alert-info {
    color : #3d4f5c; 
}

.alert a, .alert-info a {
    font-weight : bold;   
}

.alert-info {
    padding : 15px;
}

八、Sassのデータ型
Sassには多くのデータ型があり、コマンドラインでsass-iを使用してsassコンパイルの結果をリアルタイムで見ることができます.
type-of()関数を使用して、さまざまなデータ型を表示します.
type-of( 5 )           //"number"
type-of( 5px )           //"number"
type-of( hello )           //"string"
type-of( "hello" )           //"string"
type-of( 1px solid red )        //"list"
type-of( 5px 10px )           //"list"
type-of( #FF0000 )           //"color"
type-of( red )           //"color"
type-of( rgb(255,0,0) )           //"color"

いろいろなタイプが見られますが、それぞれのタイプについて詳しく説明します
8.1数値number
sassの中の数字は各種の演算を行うことができます
5 + 3          //8
5 * 3          //15
5px + 2    //7px
5px * 2     //10px
5px + 5px   //10px
5px * 5px   //10px*px     ：        10px
8px / 2px   //4     ：   px   
10px / 2    //5px

sassでは,帯上単位でも数学演算が可能であることが分かるが,ここでの単位(例えばpx)は,数学における変数のように,パラメータの両側に単位がある場合に乗算除算を行うと,結果が二乗または消去される点に注意が必要である.
8.2数値関数
sassでは、数値に関する関数がたくさんあります.これらの関数は私たちの演算に多くの便利さを提供します.以下、いくつかの関数を簡単に紹介します.
①abs()という関数は絶対値を出すことができます
②round()sassでの除算は小数を保持し、この関数は四捨五入操作が可能です
③ceil()この関数は、例えばceil(3.2 px)/4 pxのように無条件に上位に整列することができる
④floor()この関数は無条件退位で下向きにfloor(3.8)//3をとる
⑤persentage()演算結果をパーセンテージ形式persentage(650 px/1000 px)/65%に変換
⑥min()max()は最小値取得と最大値min(1,2,3)/1 max()は3
ここではまずこんなにたくさん紹介します.もっと知りたいなら公式サイトで見てください.
8.3文字列string
sassでは、文字列は引用符と無引用符の2種類に分けられ、引用符の違いは文字列にスペースと特殊な記号を付けることができ、引用符を持たないと持つことができないことです.
8.4色color
sassでは、色を表す方法がたくさんあります
例えば赤を表すにはいくつかの方法があります
①キーワードred
②16進#FF 0000
③RGB rgb(255,0,0)
④hsl(0,100%,50%)
8.5リストリスト
sassではlistはリストタイプで、一般的に属性の一連の値を表すために使用され、他の言語の配列に似ています.
リストの値は、スペースで区切ることができます.たとえば、
border : 1px solid #ff0000

カンマで分けることもできます
font-family : "Alicy","  ","  "

8.6 map
mapはキー値ペアのリストで、このように見えます.
$  ：(key1:value1 , key2:value2 , key3:value3...)

オブジェクトと差が少ないように見えます.
次にmapタイプのデータを定義します.
$color:(ligt:#ffffff , dark:#000000)

8.7ブール値Boolean
ブール値は真偽を判断するために使用され、値はtrue/falseです.
九、interpolation
sassではinterpolationを使って注釈や名前を付けるときに変数を使うことができますが、使い方は#{}で、カッコの中に変数名が入っています
いくつかの例を見てみましょう
$version: "0.0.1"  //         

/*               ，     #{$version}*/
         
/*               ，     0.0.1*/

ネーミングでも使用できます
$name : "info";   //      
$attr : "border";

.alert-#{$name} {
    #{$attr}-left : 1px solid red;
}

解析の結果は
.alert-info {
    border-color : red;
}

十、制御指令
sassでは、@if、@for、@each、@whileなどの論理操作をいくつかの制御命令で行うことができます.
これらの単語を見て、あなたはすでに彼らの役に立つことを知っていると信じています.
10.1 @if
sassでは,@ifを用いていくつかの条件判断を行い,条件に合致する属性をロードすることができる.
例を見てみましょう
$theem : dark;     //       

body{
	@if $theem == dark {
    	background-color : black;
	}@else if $theem == light {
    	background-color : white;
	}@else {
    	background-color : gray;
	}
}

解析した結果は
body{
    background-color : black;
}

sassの@ifとjsのif-elseの使い方はほぼ同じで、条件がtrueの場合、対応するcss属性が使用されます.
10.2 @for
sassでは,@forを用いていくつかのサイクル条件を実行することができ,用法は2つある.
①@ for$変数名from開始値through$終了値の変数{
​ . . .
}
②@ for$変数名from開始値to$終了値の変数{
​ . . .
}
2つの方式の違いは,1つがthroughで1つがtoであり,throughであれば実行回数に終了値が含まれるが,toでは含まないという点で抽象的かもしれないが,例を見てみよう
$columns : 4;       //      

@for $i from 1 through $columns {   //      $i，$i   1 4，  4
    .col-#{$i} { 												//        interpolation  #{}     
        width : 100%/$columns * $i		//               
    }
}

解析の結果は
.col-1{
    width : 25%;
}
.col-2{
    width : 50%;
}
.col-3{
    width : 75%;
}
.col-4{
    width : 100%;
}

tghroughをtoに置き換えると、ループには4は含まれません.
$columns : 4;       //      

@for $i from 1 to $columns {   //      $i，$i   1 4，   4
    .col-#{$i} { 												//        interpolation  #{}     
        width : 100%/$columns * $i		//               
    }
}

解析結果は
.col-1{
    width : 25%;
}
.col-2{
    width : 50%;
}
.col-3{
    width : 75%;
}

10.3 @each
リストがある場合は、リストの内容に基づいてセレクタを生成したい場合は、@eachを使用します.
@eachの使い方は次のとおりです.
@each $    in $    {
    . . . 
}

例を直接見てみましょう
$icons : success error warning;     //     list

@each $icon in $icons {     //      icon        
    background-image : url(../images/icons/#{$icon}.png)    //    interpolation  #{}        icon
}

解析結果は
.icon-success {
     background-image : url(../images/icons/success.png) 
}
.icon-error {
     background-image : url(../images/icons/error.png) 
}
.icon-warning {
     background-image : url(../images/icons/warning.png) 
}

10.4 @while
@whileは以前の@forと少し似ていて、条件によって出力を循環しています.@whileの書き方は比較的簡単です.
@while    {
    . . .
}

循環体の中で条件を変える必要があります
直接例を見てみましょう
$i : 6;    		//      

@while $i >0 {
    .item-#{$i} {
        width : 5px * $i
    }
    $i = $i -2;   //             
}

解析結果は
.item-6 {
    width : 30px;
}
.item-4 {
    width : 20px;
}
.item-2 {
    width : 10px;
}

十一、カスタム関数
以前はsassが持っている関数をいくつか使っていましたが、自分で関数を書くこともできます.
sassでは、@functionを使用してカスタム関数を記述し、
@function    （  1，  2...）{
    . . .
}

たとえば
@function color($light) {
    @return darken($light,10%)			//      @return    
}

.item {
    background-color:color(#ff0000);   //        10%   
}

まとめ
本文はいくつかのよく使うSassの基础知识を列挙して、ちょうどSassの子供靴に接触することに适して、更に多くのSassの関连する知识を理解したいならば详しく公式のドキュメントを见ることができます～
phpサイクル略記
nginx phpプロジェクトプロファイルを構成!