Sass – Vielleicht möchtest du mit CSS spielen (Teil 1)

Wir arbeiten hart, wir bleiben hartnäckig und wir ermutigen uns gegenseitig!

Wie wir alle wissen, ist CSS eigentlich keine Programmiersprache. Jeder, der sich mit CSS auskennt, weiß, dass der vollständige Name von CSS Cascading Style Sheets (Cascading Style Sheets) ist. Es handelt sich um eine Anwendung zum Ausdrucken von HTML (Standard Generalized Markup Language). ) oder XML (Standard Generalized Markup Language) und andere dateibasierte Computersprachen. Wir verwenden es, um die Trennung der Präsentationsschicht und der Strukturschicht zu erreichen, dh die Trennung von HTML und Stil. Sie können es zum Gestalten von Webseiten verwenden, aber es kann keine Variablen deklarieren, Funktionen aufrufen oder bedingte Anweisungen wie JavaScript verwenden. Man kann sagen, dass JavaScript flexibel und dynamisch ist, während CSS starr und unveränderlich ist.

Jemand möchte also Programmierideen hinzufügen, damit er über Traversal, Methoden und sogar Vererbung verfügen und Ihnen Grammatikfehler mitteilen kann. Mit der CSS-Vorverarbeitung ist dies der Fall Verwenden Sie zunächst eine neue spezialisierte Programmiersprache, um den Webseitenstil zu entwerfen, und kompilieren Sie ihn dann in CSS. Tatsächlich ist die endgültige Referenz immer noch das kompilierte CSS.

Wenn es um CSS-Vorverarbeitung geht, denken die meisten Leute vielleicht zuerst an Less. Less ist derzeit eine der besseren Sprachen für die CSS-Vorverarbeitung: Sie ist schnell, bequem und einfach zu verwenden. Sass ist die zweite: Relativ gesehen ist sie flexibler und hat mehr Syntax (insbesondere, wenn z. B ). Natürlich viele Leute Der Grund dafür, es nicht zu verwenden, ist, dass es unpraktisch zu installieren ist (zum Glück gibt es einen Taobao-Spiegel). Der dritte Grund ist Stylus: Er ähnelt Sass und ist flexibler und leistungsfähiger. Da ich Sass bevorzuge und glaube, dass es nicht so schnell sterben wird, werde ich Sass hier kurz vorstellen.

Überlegen Sie, wann wir CSS-Vorverarbeitung verwenden können

Es ist wahr, dass die CSS-Vorverarbeitung es uns ermöglicht, Stile programmgesteuerter zu verarbeiten, aber wir müssen trotzdem die Umgebung berücksichtigen, in der sie verwendet wird, denn wir wissen, dass egal wie cool Ihr Sass-Code und wie streng Ihre Logik ist, Es wird am Ende eine CSS-Datei generiert (die Lehren der alten Senioren für das junge Ich).

Wir müssen es also anhand der Größe des Projekts, der Entwicklungszeit und der Teamkosten bestimmen, wenn das Projekt relativ klein ist und nicht zu viel CSS erfordert und die Entwicklungszeit knapp ist und viele Leute im Team dies tun Wenn Sie nicht wissen, wie man es verwendet, ist es möglicherweise möglich, natives CSS besser zu verwenden.

Sass-Grundlagen

Installation~

Ähm, ich muss sagen, dass viele Entwickler ursprünglich Sass verwenden wollten, aber da Sass auf Ruby basiert, gibt es eine hohe Mauer und Ruby kann für längere Zeit nicht installiert werden, also geben sie auf. Es wird empfohlen, dass Sie sich das W3Cplus-Tutorial ansehen und Taobao-Images zur Installation verwenden. Ich habe Taobao-Images verwendet, um einige Pakete einschließlich Node zu installieren.

Kompilieren~

Ähm, viele Freunde haben es installiert, fanden es aber sehr mühsam zu kompilieren. Hier verlinken wir weiterhin auf das Sass-Kompilierungs-Tutorial. Obwohl Koala nicht mehr aktualisiert wird, ist es tatsächlich sehr praktisch, es zu kompilieren und es zu kompilieren.

sass und scss

Werfen wir zunächst einen Blick auf die Unterschiede

<span style="color: #800000;">$color : red;

//sass语法
.box
    color:$color;

//scss语法
.box</span>{<span style="color: #ff0000;">
　　color</span>:<span style="color: #0000ff;">$color</span>;
}

Tatsächlich ist die Sass-Syntax eine Regel, die durch Tabulatoreinrückung implementiert wird. Darüber hinaus ist diese grammatikalische Regel sehr streng Wenn etwas nicht stimmt, wird es während der Kompilierung korrigiert.

Scss ist das neue Syntaxformat von sass. Betrachten Sie es nicht als eine weitere Vorverarbeitungssprache. Tatsächlich handelt es sich um eine neu angepasste Syntax von sass, nachdem festgestellt wurde, dass die vorherige grammatikalische Struktur zu streng und etwas anders war von CSS. Die Struktur ähnelt im Wesentlichen der von CSS und ist sehr locker. Sie können den vorherigen CSS-Code direkt kopieren.

Was ich hier in einem Codeblock geschrieben habe, ist nur ein Beispiel. Tatsächlich enden ihre Dateinamen mit .sass bzw. .scss.

Variablendeklaration und -aufruf

Dies ist eines der grundlegenden Programmierelemente von Sass. In JS verwenden wir var, um Variablen zu deklarieren. Natürlich werden let und const in ES6 neu hinzugefügt. Die Regeln zum Deklarieren und Aufrufen von Variablen in Sass lauten wie folgt

<span style="color: #800000;">$height: 15px !default;  //声明默认变量
$height: 50px;　　//声明普通变量
body</span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> $height</span>; 
}

Variablen können in Standardvariablen und gewöhnliche Variablen unterteilt werden. Fügen Sie für Standardvariablen einfach !default nach dem Wert hinzu, z. B. !important. Tatsächlich müssen wir im Allgemeinen nur gewöhnliche Variablen deklarieren. Standardvariablen sind bei der Entwicklung von Komponenten bequemer. Ich muss die Variablendeklaration nicht erklären, sie ist wirklich einfach.

Verschachtelte und lokale Variablen, globale Variablen

Ähnlich wie bei JS gibt es in der Sass-Syntax lokale und globale Variablen. Wie unten gezeigt, werden globale Variablen in der äußersten Ebene deklariert und können im globalen Bereich aufgerufen werden. Lokale Variablen von em werden in em{} deklariert und können nur innerhalb von em{} aufgerufen werden.

<span style="color: #800000;">$color:#000;　　//全局变量
.block </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> $color</span>;
}<span style="color: #800000;">
em </span>{<span style="color: #ff0000;">
  $color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">　　//局部变量
  a {    //选择器嵌套
    color</span>:<span style="color: #0000ff;"> $color</span>;<span style="color: #ff0000;">
    font</span>:<span style="color: #0000ff;"> {    //属性嵌套
　　  size: 12px</span>;<span style="color: #ff0000;">
　　  weight</span>:<span style="color: #0000ff;"> bold</span>;
　  }<span style="color: #800000;">
    &:hover </span>{ //伪类嵌套<span style="color: #ff0000;">
     color</span>:<span style="color: #0000ff;"> $color</span>;
    }<span style="color: #800000;">   
  }
}</span>

数据类型

 和JS类似，sass也拥有自己的数据类型分别是

• 数字: 如，1、 2、 13、 10px；
•  字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；
•  颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
•  布尔型：如，true、 false；
•  空值：如，null；
•  值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

混合宏

编程的思想嘛。混合宏是一个类似于函数的存在，当然，他并不是函数。简单来说就是加了参数功能的灵活度提升的可重用的代码块。

<span style="color: #800000;">@mixin border-radius</span>{<span style="color: #ff0000;">
    -webkit-border-radius</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 5px</span>;
}<span style="color: #800000;">

button </span>{<span style="color: #ff0000;">
    @include border-radius;
</span>}

这里是一个简单的混合宏的使用，先是用@mixin定义了一个名叫border-radius的混合宏，然后在代码中利用@include进行调用，其实这样的话并不能太大体现出混合宏的特色。看下面的

<span style="color: #800000;">@mixin border-radius1($radius)</span>{<span style="color: #ff0000;">
  -webkit-border-radius</span>:<span style="color: #0000ff;"> $radius</span>;<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> $radius</span>;
}<span style="color: #800000;">
@mixin border-radius2($radius:5px)</span>{<span style="color: #ff0000;">
  -webkit-border-radius</span>:<span style="color: #0000ff;"> $radius</span>;<span style="color: #ff0000;">
  border-radius</span>:<span style="color: #0000ff;"> $radius</span>;
}<br><br><span style="color: #800000;">
.box1 </span>{<span style="color: #ff0000;">
  @include border-radius(5px);
</span>}<span style="color: #800000;">
.box2 </span>{<span style="color: #ff0000;">
  @include border-radius;
</span>}<span style="color: #800000;">
.box2 </span>{<span style="color: #ff0000;">
  @include border-radius(5px);
</span>}

从代码里可以看出，混合宏可以像函数一样传入参数，并且可以像ES6的函数扩展一样添加参数默认值，如果在调用的时候不传参数，那么就会使用默认的值，这样极大的增加了代码的灵活性，省却很多开发时间。

其实，mixin的灵活还不仅仅如此，它可以传入多个参数，这样我们想到了函数可以根据参数数量的不同来执行不同的代码。yes ！sass也可以做到！

<span style="color: #800000;">@mixin size($width,$height)</span>{<span style="color: #ff0000;">    //两个参数或者多个参数可以这样这样定义
  width</span>:<span style="color: #0000ff;"> $width</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> $height</span>;
}<span style="color: #800000;">

.box-center </span>{<span style="color: #ff0000;">
  @include size(100px,200px);
</span>}

<span style="color: #800000;">@mixin box-shadow($shadows...)</span>{<span style="color: #ff0000;">    //参数过多可以使用...来代替
  @if length($shadows) >= 1 {
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> $shadows</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> $shadows</span>;
  }<span style="color: #800000;"> @else </span>{<span style="color: #ff0000;">
    $shadows</span>:<span style="color: #0000ff;"> 0 0 2px rgba(#000,.25)</span>;<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> $shadow</span>;<span style="color: #ff0000;">
    box-shadow</span>:<span style="color: #0000ff;"> $shadow</span>;
  }<span style="color: #800000;">
}<br></span>

.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

上面两个代码块第一个比较简单，就是增加参数数目。下面的代码块我们利用sass的if else方法来实现了判断，如果参数数目大于等于1，也就是传了参数，那么我们执行上面的代码，如果没有传参我们执行下面的代码，设置默认的$shadows值生成代码块。

但是混合宏也有不足之处：那就是调用一个混合宏生成的css代码并不会进行合并，这也是因为他能够传参所设置的，所以对于复用性很强的代码块不推荐使用混合宏。

继承和占位符

sass允许你使用@extend继承别的代码块，并且通过@extend所继承的代码块会在生成css的时候进行合并~哈哈，完美解决了上面的问题

<span style="color: #800000;">.btn1 </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 6px 10px</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>;
}<span style="color: #800000;">

%btn2 </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 6px 10px</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>;
}<span style="color: #800000;">
<br></span>

%btn3 {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

<span style="color: #800000;">
.btn-primary1 </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
  @extend .btn1;
</span>}<span style="color: #800000;">

.btn-primary2 </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
  @extend %btn2;
</span>}

上面的代码中.btn1是预先定义好的类，然后我们在.btn-primary1中继承他的所有代码块，而%btn2就是在标题里所提到的占位符，占位符的代码块如果不被继承在生成的css中是不会显示出来的，所以如果你是用sass编译css的话，公共类使用占位符来定义是一个很不错的选择。为了加深理解我们看下上面的代码所生成的css代码。

<span style="color: #800000;">.btn1, .btn-primary1 </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 6px 10px</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>; }<span style="color: #800000;">

.btn-primary2 </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 6px 10px</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 14px</span>; }<span style="color: #800000;">

.btn-primary1 </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>; }<span style="color: #800000;">

.btn-primary2 </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>; }

继承btn1的btn-primary1他和btn1进行了合并，而我们使用占位符定义的%btn2，%btn3在生成代码里没有显示，因为btn-primary2继承了%btn2，所以他继承的公共部分被单独拿出来，如果有多个代码块继承%btn2，他们会进行合并。

 

占位符还是混合宏，主要还是看你的代码怎么使用，如果只是静态的代码公共块，那么占位符会比较适合，而如果是可变的代码例如写一个复杂的css3动画之类的，可能混合宏比较适合了。

 

插值#{}

如果接触过jade模板的朋友会比较熟悉，这里的插值和它用法是基本一致的。让我们来看一个复杂的代码块

<span style="color: #800000;">$properties: (margin, padding);
@mixin set-value($side, $value) </span>{<span style="color: #ff0000;">
    @each $prop in $properties {
        #{$prop</span>}<span style="color: #800000;">-#</span>{<span style="color: #ff0000;">$side</span>}<span style="color: #800000;">: $value;
    }
}
.login-box </span>{<span style="color: #ff0000;">
    @include set-value(top, 14px);
</span>}

首先我们声明了一个$properties的变量，里面是一个值列表里面两个字符串，@mixin方法里我们通过@each方法循环出值列表里面的字符串然后利用插值的方法将字符串插入进去，我们看下生成的css代码

<span style="color: #800000;">.login-box </span>{<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
  padding-top</span>:<span style="color: #0000ff;"> 14px</span>; }

这里只是做一个示例，正常情况下我们不会用这么复杂的方法来生成这么短的css代码，那样才是真正的浪费开发时间，当然茶余饭后做个组件开发的话，还是很有用的。

运算

sass允许我们做一些基本的运算：加减乘除，但是我要说的是：注意单位！注意单位！注意单位！当然如果你异想天开em+px，px*px，px/rem。。。我表示。。。

需要知道的是sass里允许进行颜色运算，也就是说 #222222 * 2你将会得到 #444444，其实颜色的运算机制是分段运算也就是说如果22*2  22*2  22*2然后在进行合并的。

字符串运算：

字符串可以通过+来进行链接，放心减号是不管用的。。。需要注意的是因为sass的字符串有两种类型，带引号和不带引号，相同相加当然出来的是一致的。如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串，其实就是谁在左边就跟着谁。

<span style="color: #800000;">p:before </span>{<span style="color: #ff0000;">
  content</span>:<span style="color: #0000ff;"> "Foo " + Bar</span>;<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> sans- + "serif"</span>;
}<span style="color: #800000;">
//生成的css如下
p:before </span>{<span style="color: #ff0000;">
  content</span>:<span style="color: #0000ff;"> "Foo Bar"</span>;<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> sans-serif</span>; }

 

上面的内容就是sass的上篇。都是一些基础的东西，下篇的话会整理一下说到函数和方法规则相关的东西。