SASSインストールSASSコンパイルSASS基礎文法

SASSって何?
cssが釘だとしたらlessは釘を生産する機械で、sassは全自動釘生産ラインです......標準の定義を理解しなければならない場合は、外に出て右に曲がって公式ドキュメントを読みます.
SASSインストール
Windowシステムの下をクリックしてRubyインストールSassインストールCompassインストールをインストールしてください
コーディングスタイル

nestedネストインデントcssスタイル、デフォルトフォーマット

expanded拡張cssスタイル、最も一般的なフォーマット

compact概要cssスタイル、注釈なし

compressed圧縮cssスタイル、オンライン時に

を使用
SASSコマンド
gitコマンドラインにindexを自動的にコンパイルできるコードを入力.scssファイルを生成するindex.css

$ sass index.scss index.css

compressedスタイルコマンドの圧縮など、スタイル別にドキュメントをコンパイルします.

sass --style compressed index.sass index.css

変更のたびにこれらのコマンドを実行すると、開発効率に影響します.では、どうすればいいですか.
単一ファイル法を傍受し、自動コンパイルを実現

sass --watch index.scss:index.css

フォルダ法全体をリスニングし、自動コンパイルを実現

sass --watch app/sass:public/stylesheets

!注意!注意!注意:sass watchデフォルト設定は中国語ディレクトリがサポートされていないため、コマンド全体がCompatibilityError on line[87]encodings:GBK and UTF-8と間違えられる可能性があります.英語ディレクトリでプロジェクトを開発することをお勧めします.
くだらないことが多すぎて、SASSの文法を少しください
基本的な使い方
ファイルのインポート

@import "normalize";

変数＃ヘンスウ＃

$error: #f00;　
$left: left;
.test {
　　color : $error;
　　border-#{$left}-color : $error;
}

計算＃ケイサン＃

//       ，      
.box{
    width: (24px/2);
    height: (50px - 2px);
    padding: 1px 0px;
    border-radius:40/80*100%;
}

ネスト

//     
.content{
    color: green;
    .title{
        color: red;
    }
}
//    ,  font     
.box{
    width: 100px;
    font:{
        size: 24px;
        weight: bold;
    }
}
//     &
li{
    margin-left: 100px;
    &.on{
        margin-left: 0px;
    }
    &:hover{
        color:red;
    }
}

コメント
これを知っていれば「！」でいい

/*! 
　　       ，         ！
*/

継承

.error{
  color: red;
}
.serious-error{
  @extend .class-a;//  .class-a  color:red  
  border:1px solid red;
}

混合mixin

//    fatal，   js     
@mixin fatal($color, $size){
  color: $color;
  font-size: $size;
}
// @include  fatal,   js     
.serious-error{
  @include fatal(red,24px);
  border:1px solid red;
}

初級エンジニアとして、上記のいくつかの方法でプロジェクトを開発すれば基本的に十分ですが、複雑なプロジェクトを開発するなら、公式サイトで研究しましょう.sass中国語ドキュメントへ
注意:
ファイルの先頭部分に@charset "UTF-8";を挿入すると、sassデフォルトの符号化方式では中国語が認識されないため、不要な面倒を避けることができる.より効率的で効率的な生産のために、sassはcssと組み合わせて使用することをお勧めします.compassを知りたい場合は、Compassの使い方ガイドをクリックしてください.