Begegnung mit Sass und Compass – Sass-Kapitel

Für einen Webentwickler, der vom Backend zum Frontend wechselt, ist das Schreiben von CSS das größte Problem. Jeder, der CSS kennt, weiß, dass es zwar Webseitenstile entwickeln kann, es jedoch nicht zum Programmieren verwendet werden kann Wenn Sie die zukünftige Wartung erleichtern möchten, können Sie nur einen erheblichen Teil des CSS Satz für Satz ändern oder sogar neu schreiben. Mit dem Zustrom von Back-End-Mitarbeitern in die Front-End-Branche hat CSS neues Leben eingehaucht. Die Menschen haben begonnen, CSS, dem „CSS-Präprozessor“, Programmierelemente hinzuzufügen. Die Grundidee besteht darin, eine spezielle Programmiersprache zum Entwerfen von Webseitenstilen zu verwenden und diese dann in eine normale CSS-Datei zu kompilieren. Im Folgenden kombinieren wir die offizielle Dokumentation und den Nutzungsleitfaden des Lehrers Ruan Yifeng, um die Hauptverwendung von Sass systematisch zusammenzufassen.

1.Sass-Installation

Sass ist in der Ruby-Sprache geschrieben. Wir müssen Ruby installieren, bevor wir Sass installieren. Nach der Installation von Ruby können Sie den folgenden Befehl direkt in der Befehlszeile eingeben )

<code>gem install sass
</code>

2.Verwendung von Sass

Sass-Dateien sind gewöhnliche Textdateien mit zwei Suffixen: .sass und .scss. Für den Codierungsstil von Dateien mit dem Suffix .sass ist das Hinzufügen von geschweiften Klammern nicht erforderlich, es müssen jedoch Einrückungen und andere Vorgänge wie folgt verarbeitet werden

<code>*
    margin:0;
    padding:0;
</code>

Der Codierungsstil von Dateien mit dem Suffix .scss ist wie folgt auf den normalen CSS-Stil ausgerichtet:

<code>*{
    margin:0;
    padding:0;
}
</code>

Sass wird beide Stile offiziell parallel aktualisieren. Welchen Stil Sie also bevorzugen, hängt von Ihren persönlichen Vorlieben ab. Da ich das Dateisuffix .scss bevorzuge, basieren die folgenden Beispiele auf dem Dateistil .scss.

Mit dem folgenden Befehl kann das aus der .scss-Datei konvertierte CSS auf dem Bildschirm angezeigt werden (vorausgesetzt, der Dateiname lautet test)

<code>sass test.scss
</code>

Wenn Sie die .scss-Datei direkt in eine CSS-Datei konvertieren möchten, müssen Sie ihr den Namen der .css-Datei hinzufügen

<code>sass test.scss test.css
</code>

Sass bietet vier Kompilierungsstiloptionen

<code>* nested: 嵌套缩进的css的代码，默认
* expanded：没有缩进、扩展的css代码
* compact：简介格式的css代码
* compressed：压缩后的css代码
</code>

Mit dem folgenden Befehl können wir den Kompilierungsstil ändern

<code>sass --style compressed test.scss test.css
</code>

Wir können Sass auch eine bestimmte Datei oder ein bestimmtes Verzeichnis überwachen lassen und sobald sich die Quelldatei ändert, wird automatisch eine kompilierte Version generiert

<code>//  watch a file

sass --watch test.scss:test.css

//  watch a direcoty

sass --watch app/sass:public/stylesheets
</code>

Wenn Sie Schüler haben, die webStrom zum Entwickeln verwenden, können Sie File Watchers hinzufügen, aber ich denke, das ist nicht so gut wie das Einschalten des gesamten Verzeichnisses zur Überwachung. Zu beachten ist, dass unterschiedliche Batch-Prozesse unterschiedlichen Dateisuffixen entsprechen , das heißt, sass.bat entspricht der .sass-Datei, scss.bat entspricht der .scss-Datei

3.Grundlegende Verwendung von Sass

3.1 Importieren

Die Importregeln (@import) von Sass unterscheiden sich von denen von CSS. Sehen wir uns die Mängel des CSS-@import-Imports an: Wenn CSS eine Datei importiert, wird sie nicht sofort importiert, sondern erst danach Nachdem die CSS-Datei heruntergeladen und analysiert wurde, erkennt der Browser, dass ein weiteres CSS heruntergeladen werden muss, und lädt es dann herunter. Nach dem Herunterladen startet er eine Reihe von Vorgängen wie Parsen und Erstellen Der Renderbaum führt dazu, dass das CSS nicht parallel heruntergeladen werden kann. Wenn Sass jedoch importiert wird (@import), wird die SCSS-Datei von @import während der Kompilierung nur in einer einzigen CSS-Datei zusammengeführt. Wenn Sie jedoch eine CSS-Datei wie @import 'reset.css' in eine Sass-Datei importieren, ist der Effekt derselbe wie bei einer gewöhnlichen CSS-importierten Stildatei. Die importierte CSS-Datei wird nicht in die kompilierte Datei eingefügt, sondern ist vorhanden im @import-Modus.

Alle Sass-Importdateien können das Suffix .scss ignorieren. Im Allgemeinen beginnt die grundlegende Dateibenennungsmethode mit

, beispielsweise mixin.scss. Diese Art von Datei muss beim Import nicht unterstrichen werden, sondern kann als @import „mixin“ geschrieben werden.

Importierte Sass-Datei a.scss:

<code>//a.scss
//-------------------------------
body {
  background: #eee;
}
</code>

Sass-Datei b.scss, die importiert werden muss:

<code>@import "reset.css";
@import "a";
p{
  background: #0982c1;
} 
</code>

Übersetzter B.CSS-Stil:

<code>@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}
</code>

Wie aus dem obigen Code ersichtlich ist, wird nach der Kompilierung von b.scss weiterhin reset.css importiert, während a.scss integriert wird.

3.2 Hinweise

Sass verfügt über zwei Kommentarmethoden, eine ist die Standard-CSS-Kommentarmethode /* */ und die andere ist ein einzeiliger Kommentar in Form von // doppelten Schrägstrichen, aber dieser einzeilige Kommentar wird nicht übersetzt. Standard-CSS-Kommentare

<code>/*
 *我是css的标准注释
 *设置body内距
 */
body{
  padding:5px;
} 
</code>

Einzeilige Kommentare mit doppeltem Schrägstrich Einzeilige Kommentare sind mit Kommentaren in der JavaScript-Sprache identisch und verwenden Schrägstriche (//). Einzeilige Kommentare werden jedoch nicht in CSS eingegeben.

<code>//我是双斜杠表示的单行注释
//设置body内距
body{
     padding:5px; //5px
} 
</code>

3.3 Variablen

Sass-Variablen müssen mit $ beginnen, gefolgt vom Variablennamen, und der Variablenwert und der Variablenname müssen durch einen Doppelpunkt (:) getrennt werden (genau wie CSS-Eigenschaftseinstellungen, wenn dem Wert ein ! folgt). der Standardwert.

3.3.1 Gewöhnliche Variablen

Nach der Definition kann es global verwendet werden.

<code>//sass style
//-------------------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}

//css style
//-------------------------------
body{
    font-size:12px;
}
</code>

3.3.2 Standardvariablen

Die Standardvariable von Sass muss nur !default nach dem Wert hinzufügen.

<code>//sass style
//-------------------------------
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//css style
//-------------------------------
body{
    line-height:1.5;
}
</code>

Die Standardvariablen von Sass werden im Allgemeinen verwendet, um Standardwerte festzulegen und diese dann je nach Bedarf zu überschreiben. Sie müssen lediglich die Variable vor der Standardvariablen neu deklarieren

Sie können sehen, dass die kompilierte Zeilenhöhe jetzt 2 beträgt, nicht unsere Standardeinstellung 1,5. Der Wert von Standardvariablen kann bei der Komponentenentwicklung sehr nützlich sein.

<code>//sass style
//-------------------------------
$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//css style
//-------------------------------
body{
    line-height:2;
}
</code>

3.3.3 Spezielle Variablen

Im Allgemeinen sind die von uns definierten Variablen Attributwerte und können direkt verwendet werden. Wenn die Variablen jedoch als Attribute oder unter bestimmten Umständen verwendet werden, müssen sie in der Form #{$variables} verwendet werden.

3.3.4 Mehrwertige Variablen

<code>//sass style
//-------------------------------
$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;

//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

//css style
//-------------------------------
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}
</code>

Mehrwertige Variablen werden in Listentyp und Kartentyp unterteilt. Einfach ausgedrückt ist der Listentyp ein bisschen wie ein Array in js, und der Kartentyp ist ein bisschen wie ein Objekt in js.

3.3.4.1 list

list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，具体可参考sass Functions（搜索List Functions即可） 定义

<code>//一维数据
$px: 5px 10px 20px 30px;

//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
</code>

使用

<code>//sass style
//-------------------------------
$linkColor:         #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
  color:nth($linkColor,1);

  &:hover{
    color:nth($linkColor,2);
  }
}

//css style
//-------------------------------
a{
  color:#08c;
}
a:hover{
  color:#333;
}
</code>

3.3.4.2 map

map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等，具体可参考sass Functions（搜索Map Functions即可） 定义

<code>$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);
</code>

使用

<code>//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}
</code>

3.4 嵌套(Nesting)

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

3.4.1 选择器嵌套

所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。 在选择器嵌套中，可以使用&表示父元素选择器

<code>//sass style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
  li{
    float:left;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }
}

//css style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
}  
#top_nav li{
  float:left;
}
#top_nav a{
  display: block;
  padding: 0 10px;
  color: #fff;
}
#top_nav a:hover{
  color:#ddd;
}
</code>

3.4.2 属性嵌套

所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。拿个官网的实例看下：

<code>//sass style
//-------------------------------
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

//css style
//-------------------------------
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; 
}
</code>

3.5 混合(mixin)

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

3.5.1 无参数mixin

<code>//sass style
//-------------------------------
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

//css style
//-------------------------------
.demo{
    margin-left:auto;
    margin-right:auto;
}
</code>

3.5.2 有参数mixin

<code>//sass style
//-------------------------------   
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

//css style
//-------------------------------
.opacity{
  @include opacity; //参数使用默认值
}
.opacity-80{
  @include opacity(80); //传递参数
}
</code>

3.5.3 多个参数mixin

调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

<code>//sass style
//-------------------------------   
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;  
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
    @include horizontal-line($padding:15px);
}

//css style
//-------------------------------
.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.imgtext-h--product li {
    border-bottom: 1px dashed #cccccc;
    padding-top: 15px;
    padding-bottom: 15px;
}
</code>

3.5.4 多组值参数mixin

如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables...。

<code>//sass style
//-------------------------------   
//box-shadow可以有多组值，所以在变量参数后面添加...
@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}

//css style
//-------------------------------
.box{
  border:1px solid #ccc;
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
  box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}
</code>

3.5.5 @content

@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。

<code>//sass style
//-------------------------------                     
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

//css style
//-------------------------------
@media only screen and (max-width: 480px) {
  body { color: red }
}                     
</code>

3.6 继承

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

3.6.1 普通继承

<code>//sass style
//-------------------------------
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

//css style
//-------------------------------
h1,.speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}
</code>

3.6.2 占位选择器%

从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。

<code>//sass style
//-------------------------------
%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
%clearfix{
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}

//css style
//-------------------------------
#header h1,
.ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header h1{
  width:300px;
}
</code>

如上代码，定义了两个占位选择器%ir和%clearfix，其中%clearfix这个没有调用，所以解析出来的css样式也就没有clearfix部分。占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。

ps：在@media中暂时不能@extend @media外的代码片段，以后将会可以。

3.7 函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。

<code>//sass style
//-------------------------------                     
$baseFontSize:      10px !default;
$gray:              #ccc !defualt;        

// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}

//css style
//-------------------------------
body{
  font-size:10px;
  color:#E6E6E6;
}
.test{
  font-size:1.6rem;
  color:#B3B3B3;
}
</code>

3.8 运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

<code>$baseFontSize:          14px !default;
$baseLineHeight:        1.5 !default;
$baseGap:               $baseFontSize * $baseLineHeight !default;
$halfBaseGap:           $baseGap / 2  !default;
$samllFontSize:         $baseFontSize - 2px  !default;

//grid 
$_columns:                     12 !default;      // Total number of columns
$_column-width:                60px !default;   // Width of a single column
$_gutter:                      20px !default;     // Width of the gutter
$_gridsystem-width:            $_columns * ($_column-width + $_gutter); //grid system width
</code>

3.9 条件判断及循环

3.9.1 @if判断

@if可一个条件单独使用，也可以和@else结合多条件使用

<code>//sass style
//-------------------------------
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//css style
//-------------------------------
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green; 
}
</code>

3.9.2 三目判断

语法为：if($condition, $iftrue, $iffalse) 。三个参数分别表示：条件，条件为真的值，条件为假的值。

<code>if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px
</code>

3.9.3for循环

for循环有两种形式，分别为：@for $var from through 和@for $var from to 。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

<code>//sass style
//-------------------------------
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//css style
//-------------------------------
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}
</code>

3.9.4 @each循环

语法为：@each $var in 。其中$var表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。

3.9.4.1 单个字段list数据循环

<code>//sass style
//-------------------------------
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}
.salamander-icon {
  background-image: url('/images/salamander.png'); 
}
</code>

3.9.4.2 多个字段list数据循环

<code>//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; 
}
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; 
}
</code>

3.9.4.3多个字段map数据循环

<code>//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}
</code>

（完）