从CSS 到SASS (SCSS) 超入门观念引导

什么是SASS ?
不管是SASS、SCSS、Stylus等

相信大家一定都有听过，但到底是什么东西？为什么大家都说好用、方便？

其实这部分需要从最一开始CSS设计开始说起。

相信大家一定都有类似这样的经验：

好不容易辛辛苦苦完成一个官方网站，业主看完之后回了一句：「我觉得这些按钮的颜色都太浅了，我希望再深一点;另外背景色太暗了，我想要亮一点。」

好，拿了钱总要做事嘛，花了好多时间把所有按钮颜色加深、背景加亮。

业主看完之后依然回了一句：「原来加深之后这么难看喔？那你再帮我改回来好了，最好可以再深一点点就好。」

相信看到这里的你，拳头大概已经硬了。

这样改了又改，改了又改，钱也没变多。

所以这时候就会开始纳喊许愿：

有没有可能把程式的概念引入到CSS 里面去呢？例如说变数？这样我们就能够用变数来取代写死的颜色，要改的话也很方便，只要改一个地方就好？

扫描二维码关注公众号，回复： 2168551 查看本文章

这不就是CSS preprocessor 吗？
没错，CSS preprocessor 就这样诞生了。

CSS preprocessor，中文就叫做CSS 「预处理器」，简单来说就是你可以先用程式写一些样式设定的语法，经过这个预处理器之后，就会变成符合标准的CSS。

有了CSS preprocessor之后，就可以把变数也应用到CSS上面，当然程式语法里面的IF、回圈甚至是函式都应有尽有，让你从设计师开始踏入这条程式的不归路。

而 CSS preprocessor 主要提供了以下几个功能：

变数( Variable )、继承( Extend )、函式( Function )、混用( Mixin )
那我们就一个一个来介绍怎么使用吧！

变数( Variable )
有了前面惨痛的经验后，我们体会到，每一次需求一来，改了又改，改了又改，改到最后甚至还忘记哪些地方漏改了，所以我们可以透过变数，来帮我们做集中的管理

只需要改一次，就可以做到全站统一的效果。

$font_style:Microsoft JhengHei;
$body_color: #E1E1E1

body {
 font-family: $font_style;
 color: $body_color; 
}

就像上方的范例程式码一样，我们可以透过变数的方式，来控管字体样式、背景颜色等等。

今天就算要更换样式，我也只需要更改上方变数的值，就可以达到全站统一，这就是—— 变数。

继承( Extend )
有了变数之后，我们可以很快速的将每一个我们所需要的样式，都套用同一个变数来去设定样式。

可是这样还有一个问题：「每一次我样式都还要重复打」

在Alex大的影片当中有提到：通常我们想要将< a > 变成按钮的时候，我们都会固定打上以下的程式码：

a {
  display:block; /*將 a 變成區塊*/ 
  text-decoration:none; /*清除超連結底下的那條底線*/
}

那变成是我们每一次在制作按钮的时候，都需要先打上这两行程式码，之后再根据不同种类的按钮给予不同的宽度、行高等。

那有没有什么方式是可以让我把固定要写的样式集中在一起，未来有需要我只要呼叫就可以？

那就是—— 继承。

%aButton {
  display:block;
  text-decoration:none;
}

a {
 @extend %aButton;
 /*透過上面的extend 我就可以直接使用已經寫好的樣式，接下來下方就可以自定義我其他按鈕樣式*/
 width:100%;
 height:20px;
 line-height:20px;

}

所以看到了这里，我们已经善用了变数以及继承，让我们的SCSS可以做好一个集中式的控管，产生出来的CSS也是干净利落，一举两得。

不过接下来还有一个问题还没解决。

我们很常会去定义每一种不同的类别的字，他的字型大小。

举例来说：
这里写图片描述
上图是我这一次参加六角学院举办的精神时光屋，所提供的一份设计稿。

其中里面定义了Title、Title2、Title3、Subtitle、paragraph、Logo 的字型大小。

如果每一次都要去定义不同类别的字，会有不同的大小，好像也有点累。

要知道，人类是懒惰的，科技始终来自人的惰性。

所以这时候我们的函式就可以派上用场拉！

函式( Function )
我们可以透过函式，来去定义每一个类别的字，他要产生的大小为何。

/*這裡我們用六角學院提供的設計稿來做範例，我們發現他正好是12的倍數*/

$baseSize: 12px;

/*寫一個函數去定義每一種類別的字，它的大小 */
@function font($level: 1) {

  @return $baseSize *$level;
}

/*套用函數 font()*/

.Title {
 font-size:font(6);
 font-family: Roboto-Black;
}

.Title2 {
 font-size:font(4);
 font-family: Roboto-Black;
}

.Title3 {
 font-size:font(2);
 font-family: Roboto-Black;
}

.Subtitle {
 font-size:font(2);
 font-family: Roboto-Black;
}

.Paragraph {
 font-size:font(1.3);
 font-family: Roboto-Black;
}

这样今天我如果我希望整个baseSize调整成10的倍数，那么也只要改最上面的$baseSize，就可以达到全站统一的效果。

是不是很简单很开心？

好的~终于到最后一个重点了。

刚刚前面我们有讲到：对于相同的、重复的样式，我们可以透过继承(Extend)来帮我们完成。

透过SASS，我们可以将共同的样式写在一起，之后使用@extend就可以直接载入样式：

%aButton {
  display:block;
  text-decoration:none;
}

.successBtn {
 @extend %aButton;
 /*透過上面的extend 我就可以直接使用已經寫好的樣式，接下來下方就可以自定義我其他按鈕樣式*/
 width:100%;
 height:20px;
 line-height:20px;

}

.errorBtn {
 @extend %aButton;
 /*透過上面的extend 我就可以直接使用已經寫好的樣式，接下來下方就可以自定義我其他按鈕樣式*/
 width:80%;
 height:20px;
 line-height:20px;

}

/*產生出來的 CSS */

.successBtn,.errorBtn {
  display:block;
  text-decoration:none;
}
.successBtn {
  width:100%;
  height:20px;
  line-height:20px;
}
.errorBtn {
 width:80%;
 height:20px;
 line-height:20px;
}

但是遇到有字级的这种该怎么办？
这里写图片描述
不同种类的文字，有自己对应的字级大小，也不是像刚刚function一样是走一个倍数成长的概念。

那我要如何针对不同的字级，正确给予不同的大小呢？

那就是使用—— 混用( Mixin )。

混用( Mixin )
正如刚刚前面所说，针对每一种不同的文字种类，我希望大小要能不一样（如：Title:36px, Subtitle:28px,content:16px）

但是使用extend 我们会发现到：「extend会将共同拥有的样式集中管理」。也就是一个样式，只会产生出一份Code

那Mixin呢？

他会这样子：

@mixin aButton() {
  display:block;
  text-decoration:none;
}

.successBtn {
 @include aButton();
 /*透過上面的include 我就可以直接使用上方寫好的mixin樣式，產出屬於他自己的Code*/
 width:100%;
 height:20px;
 line-height:20px;

}

.errorBtn {
 @include aButton();
 /*透過上面的include 我就可以直接使用上方寫好的mixin樣式，產出屬於他自己的Code*/
 width:80%;
 height:20px;
 line-height:20px;

}

/*產生出來的 CSS */

.successBtn {
  display:block;
  text-decoration:none;
  width:100%;
  height:20px;
  line-height:20px;
}
.errorBtn {
 display:block;
 text-decoration:none;
 width:80%;
 height:20px;
 line-height:20px;
}

没错，它不像extend一样，会将共同的样式集中在一起，而是产生出两份一模一样的程式码。

而这一点，正好就可以应用在我们的字级上。

虽然说相对的产生出来的样式会很大一包，因为每include一次，就会产生一组样式。

但相对的，就能够拥有客制化的效果。

我们来看看Alex大提供的字级样式：

$baseSize:14px;
$sizeLevel:2px;

@function font($level: 0) {
  @if $level < 0 {
    $level:0 
  }
  @return $baseSize + $sizeLevel * round($level);
}

@function rhythm($size) {
  @return ceil($size * $paddingLevel / $baseLineSize) * $baseLineSize;
}

@mixin font($level: 1, $line-height: auto) {
  $size: font($level);
  $line: rhythm($size);

  font-size: $size;
  @if $line-height == auto or $line-height < $line {
    line-height: $line;
  } @else {
    line-height: $line-height;
  }
}


.aaa {
  @include font(2);
}

.bbb {
  @include font(4);
}

.ccc {
  @include font(2);
}

/* 產生出來的 CSS */

.aaa {
  font-size:20px;
}

.bbb {
   font-size:28px;
}

.ccc {
  font-size:16px;
}

透过Mixin 我们就可以将不同类别的字级，给予不同的字体大小，就是这么简单。

注意： Mixin 是跟extend 做比较，一个是产生多个样式；一个是将样式全部集中管理。请不要将Minxin与Function搞混做比较。

看完上面介绍的这几种SCSS功能，有没有更加了解呢？希望今天的笔记能带给你/妳不一样的CSS 体验。

当然，笔者只将SCSS 的重点功能做一个简单的介绍，方便当字典快速查阅。

从CSS 到SASS (SCSS) 超入门观念引导

猜你喜欢