サスの基本姿勢

SASS とは

従来の CSS は単純な説明的なスタイル ファイルですが、SASS は CSS をプリコンパイルできます。 変数、関数、継承などの動的言語機能は、SASS ソースコードで使用でき、CSS ファイルにコンパイルできます。

インストールと使い方

インストール

sassはrubyで書かれているため、sassを使いたい場合はruby環境をインストールする必要があります。次に、gem を使用して sass をインストールします。 次のコマンドを入力して Sass をインストールします:

gem install sass

sass -v コマンドを使用して Sass バージョンを表示できます。

を使用して、接尾辞 .scss が付いた新しいソース コード ファイルを作成すると、sass ソース コードを編集できます。 次に、以下のコマンドを使用してソースコードファイルをコンパイルして CSS に変換し、画面に表示します。

sass test.scss

ファイル名に接尾辞 .css を追加して、現在のディレクトリに CSS ファイルを生成することもできます。以下の通り:

sass test.scss test.css

注: .sass と .scss の違いは、.sass ファイルにはコード レイアウトに関する非常に厳しい要件があり、中括弧やセミコロンがないことです。

コマンドパラメータ

--style: コンパイルスタイル Sass は 4 つのコンパイルスタイルオプションを提供します:

nested: ネストされたインデントされた CSS コード。これがデフォルト値です。

expanded: インデントされていない、展開された CSS コード。

compact: 簡潔な形式の CSS コード。

compressed: 圧縮された CSS コード。

例:

sass test.scss test.css --style COMPLEX

--watch: ファイルの変更を監視 Sass はソースファイルの変更を監視し、コンパイルされたバージョンを自動的に生成できます。例:

//监听单个文件sass --watch test.scss:test.css
//监听目录sass --watch sassFileDirectory:cssFileDirectory

変数

SASS は $ を使用して変数を定義します

$white:#FFFFFF;body{   
 color: $white;
}

文字列に変数を挿入する必要がある場合は、変数を #{} に記述する必要があります

$imgUrl:"../img/test.png";body{ 
   background-image: url(#{$imgUrl});
}

Operation

SASS では計算を使用できますコード

$min-left:10px;body{   
 margin-left:$min-left+20px;
}

ネスト

SASS はネストされたルールを許可します

div{
    //选择器嵌套
    p{
        color:#FFFFFF;
    }
    //属性嵌套
    margin:{
        left:10px;
    }
    //伪类嵌套
    &:hover{
        color:#F4F4F4;
    }
}

CSS スタイルにコンパイルされます:

div {
  margin-left: 10px;
}
div p {
  color: #FFFFFF;
}
div:hover {
    color: #F4F4F4;
}

継承

SASS は @extend を使用して別のセレクターから継承できます。

.page{
    background-color:#F7F7F7;
}
.div1{
    @extend .page;
    color:#FFFFFF;
}

Mixin

SASS提供Mixin类似“函数”的重用代码块。 使用@mixin定义样式代码块，然后使用@include调用该样式。 不同于@extend的是Mixin定义样式不会编译输出在CSS样式中，并且可以指定参数和默认值。

//不带参数的mixin
@mixin page{
    background-color:#F7F7F7;
}
//带参数的mixin
@mixin setDefMargin($left, $right, $bottom: 10px,$top: 10px){
    margin:$top $right $bottom $left;
}
.test{
    @include page;
    @include setDefMargin(20px,30px);
    color:#FFFFFF;
}

需要注意的是，必须先定义没有默认值的参数，后指定有默认值的参数。

Import

sass可以使用@import语句，来引用指定的外部文件。

//引入scss文件
@import "variable.scss";
//引入css样式文件
@import "style.css";

条件语句

使用@if和@else语句可以用来做条件判断

$min-margin: 10px;
@mixin init-margin($left){
    //判断传入的参数是否大于最小值
    @if $left > $min-margin {
        margin-left: $left;
    } @else {
        margin-left: $min-margin;
    }
}
body {
    @include init-margin(5px);
}

循环语句

FOR循环

使用@for来定义循环体。 $i表示循环变量，from 后面跟上开始数值，to后面跟结束数值。

@for $i from 1 to 20 {
    .page-index#{$i} {
        color: #FFFFFF;
    }
}

WHILE循环

使用@while定义循环体，后面跟循环条件

//循环变量
$i: 2;
@while $i<10{
    page-index#{$i} {
        color: #F4F4F4;
    }
    $i=$i=1;
}

自定义函数

使用@function语句可以自定义函数，@return表示函数的返回值

@function calcNumber($num) {
    @return $num+10;
}body {    margin-left: calcNumber(20px);
}