什么是SASS ?
不管是SASS、SCSS、Stylus等
相信大家一定都有听过,但到底是什么东西?为什么大家都说好用、方便?
其实这部分需要从最一开始CSS设计开始说起。
相信大家一定都有类似这样的经验:
好不容易辛辛苦苦完成一个官方网站,业主看完之后回了一句:「我觉得这些按钮的颜色都太浅了,我希望再深一点;另外背景色太暗了,我想要亮一点。」
好,拿了钱总要做事嘛,花了好多时间把所有按钮颜色加深、背景加亮。
业主看完之后依然回了一句:「原来加深之后这么难看喔?那你再帮我改回来好了,最好可以再深一点点就好。」
相信看到这里的你,拳头大概已经硬了。
这样改了又改,改了又改,钱也没变多。
所以这时候就会开始纳喊许愿:
有没有可能把程式的概念引入到CSS 里面去呢?例如说变数?这样我们就能够用变数来取代写死的颜色,要改的话也很方便,只要改一个地方就好?
这不就是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 的重点功能做一个简单的介绍,方便当字典快速查阅。