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. Installation von Sass

Sass ist in der Sprache Ruby geschrieben, bevor wir Ruby installieren können Sie können den folgenden Befehl direkt in der Befehlszeile eingeben (Windows in cmd)

gem install sass

2. Verwendung von Sass

Sass-Dateien sind gewöhnliche Textdateien mit zwei Suffixen: .sass und .scss . Für den Codierungsstil der Datei mit dem Suffix .sass sind keine Klammern erforderlich, er muss jedoch Einrückungen und andere Vorgänge wie folgt verarbeiten:

*
    margin:0;
    padding:0;

Der Codierungsstil der Datei mit dem Suffix .scss wird bevorzugt Der normale CSS-Stil lautet wie folgt:

*{
    margin:0;
    padding:0;
}

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

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

sass test.scss

Wenn Sie die .scss-Datei direkt in konvertieren möchten Folgen Sie einer CSS-Datei. Darauf muss der Dateiname von .css folgen

sass test.scss test.css

Sass bietet vier Optionen für den Kompilierungsstil

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

Wir können den folgenden Befehl verwenden, um zu wechseln Kompilierungsstil

sass --style compressed test.scss test.css

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

//  watch a file

sass --watch test.scss:test.css

//  watch a direcoty

sass --watch app/sass:public/stylesheets

Wenn Schüler mit webStrom entwickeln Sie können Dateibeobachter hinzufügen, aber es fühlt sich nicht so gut an, als würde man das gesamte Verzeichnis zur Überwachung einschalten. Zu beachten ist, dass unterschiedliche Batchprozesse unterschiedlichen Dateierweiterungen entsprechen, d. h. sass.bat entspricht .sass-Dateien. und scss.bat entspricht .scss-Dateien

3. Grundlegende Verwendung von Sass

3.1 Import

Die Importregeln (@import) von Sass unterscheiden sich von denen von CSS Lassen Sie uns die Mängel des CSS@import-Imports überprüfen: CSS importiert eine Datei. Erst nachdem die darauf verweisende CSS-Datei heruntergeladen und analysiert wurde, erkennt der Browser, dass es ein anderes CSS gibt Es muss heruntergeladen, dann heruntergeladen und nach dem Herunterladen des Baums und einer Reihe anderer Vorgänge mit dem Parsen und Erstellen des Renderings begonnen werden, was dazu führt, dass 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 mixin.scss. Diese Art von Datei muss beim Import nicht unterstrichen werden, sondern kann als @import „mixin“ geschrieben werden.

Die importierte Sass-Datei a.scss:

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

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

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

Der übersetzte b.css-Stil :

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

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 Kommentare

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 solche einzeiligen Kommentare werden nicht übersetzt. Standard-CSS-Kommentare

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

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 .

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

3.3 变量

sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。

3.3.1 普通变量

定义之后可以在全局范围内使用。

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

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

3.3.2 默认变量

sass的默认变量仅需要在值后面加上!default即可。

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

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

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可

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

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

可以看出现在编译后的line-height为2，而不是我们默认的1.5。默认变量的价值在进行组件化开发的时候会非常有用。

3.3.3 特殊变量

一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

//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;
}

3.3.4 多值变量

多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像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即可） 定义

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

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

使用

//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;
}

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即可） 定义

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

使用

//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; 
}

3.4 嵌套(Nesting)

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

3.4.1 选择器嵌套

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

//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;
}

3.4.2 属性嵌套

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

//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; 
}

3.5 混合(mixin)

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

3.5.1 无参数mixin

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

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

3.5.2 有参数mixin

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

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

3.5.3 多个参数mixin

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

//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;
}

3.5.4 多组值参数mixin

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

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

3.5.5 @content

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

//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 }
}

3.6 继承

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

3.6.1 普通继承

//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;
}

3.6.2 占位选择器%

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

//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;
}

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

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

3.7 函数

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

//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;
}

3.8 运算

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

$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

3.9 条件判断及循环

3.9.1 @if判断

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

//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; 
}

3.9.2 三目判断

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

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

3.9.3for循环

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

//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; 
}

3.9.4 @each循环

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

3.9.4.1 单个字段list数据循环

//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'); 
}

3.9.4.2 多个字段list数据循环

//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; 
}

3.9.4.3多个字段map数据循环

//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; 
}