Grundhaltungen von Sass

Was ist SASS?

Traditionelles CSS ist eine einfache Datei mit beschreibendem Stil, aber SASS kann CSS vorkompilieren. Dynamische Sprachfunktionen wie Variablen, Funktionen und Vererbung können im SASS-Quellcode verwendet und in CSS-Dateien kompiliert werden.

Installation und Verwendung

Installation

Da Sass in Ruby geschrieben ist, müssen Sie die Ruby-Umgebung installieren, wenn Sie Sass verwenden möchten. Dann verwenden Sie gem, um Sass zu installieren. Geben Sie den folgenden Befehl ein, um Sass zu installieren:

gem install sass

Sie können den Befehl sass -v verwenden, um die Sass-Version zu überprüfen.

Verwenden Sie

, um eine neue Quellcodedatei mit dem Suffix .scss zu erstellen, und dann können Sie den Sass-Quellcode bearbeiten. Verwenden Sie dann den folgenden Befehl, um die Quellcodedatei zu kompilieren, in CSS zu konvertieren und auf dem Bildschirm anzuzeigen.

sass test.scss

Sie können auch einen Dateinamen mit der Endung .css am Ende hinzufügen, um eine CSS-Datei im aktuellen Verzeichnis zu generieren. Wie folgt:

sass test.scss test.css

Hinweis: Der Unterschied zwischen .sass und .scss besteht darin, dass für .sass-Dateien sehr strenge Anforderungen an das Code-Layout gelten sind keine Klammern oder Semikolons.

Befehlsparameter

--style: Kompilierungsstil Sass bietet vier Kompilierungsstiloptionen:

nested: Verschachtelter eingerückter CSS-Code, der der Standardwert ist.

expanded: Nicht eingerückter, erweiterter CSS-Code.

kompakt: CSS-Code in einem prägnanten Format.

komprimiert: komprimierter CSS-Code.

z.B.

sass test.scss test.css --style komprimiert

--watch: Dateiänderungen überwachen Sass kann Änderungen an Quelldateien überwachen und automatisch kompilierte Dateien generieren Version. z.B.

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

Variablen

SASS verwendet $, um Variablen zu definieren

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

Wenn Sie eine Variable in eine Zeichenfolge einfügen müssen, müssen Sie die Variable hineinschreiben #{}

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

Operationen

SASS ermöglicht die Verwendung von Berechnungen im Code

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

Verschachtelung

SASS ermöglicht verschachtelte Regeln

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

wird im CSS-Stil kompiliert:

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

Inherited

SASS kann @extend verwenden, um von einem anderen Selektor zu erben.

.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);
}