[Day 11] Sass/SCSS 基本介绍

前言

学完css，进阶一点就来学习 CSS 预处理器吧！ 让CSS 可以像一般程序语言一样，有变数、函式、回圈等功能。

刚开始接触sass时，总会觉得很复杂，要先安装SASS、如何引入、变数设定的方式、如何分类档案与功用，每次撰写完还得等他编译转档为CSS，才能显示到画面上。
在利用工作之余学习时，一样采用片段式，在基础语法的部分，就分了4-5天时间看完课程，边笔记课程提供的语法介绍，即便上完课还是不太会使用。直到假日，再次将全部复习，搭配 官方文件 才能够更厘清。

介绍 与 安装

CSS预处理器，增加了一些编写的特性，也可以说是运用程序化的方式写CSS。

其中SASS最广泛使用：Sass包含SASS与SCSS两种
两者之间不同之处有以下两点：
1.文件扩展名不同，Sass 是以.sass後缀为扩展名，而SCSS 是以.scss後缀为扩展名
2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和 CSS 语法书写方式非常类似。

安装SASS

• 在专案底下，安装
  npm install -g sass
  
  • 查寻安装是否完成
    
• 安装後，建立index.scss档案
  
• 手动转挡
  
  • 会出现css档案
    

使用watch，使每次修改sass档案时，会自动编译到css中

• 在package.jason档案中的"scripts"

 "scripts": {
    "watch": "node-sass -o css scss/main.scss -w"
  },

基本语法实作

变数

• 在变数前加上$，来宣告要使用的变数
• 运用抽取变数方式，使运用版面颜色时，可以有一致性，修改版面时也较快速
  • 变数：设定数量不要超过10个，自己在记忆上会混乱

// 创造颜色、字大小的变数
$white:#fff;
$black:#000;
.button{
text-align:center;
background-color:$black;
border:1px solid $black;
color:$white;
}

$font-lg:40px;
$font-md:30px;
$font-sm:20px;

.footer h3{
  font-size: $font-md;
  color: $color-secondary;
  text-align: center;

}

Nested 巢状

是在SASS撰写中，最常运用的方式，也更容易去区分同一个区块将他们放在一起，可以更方便地整理。

针对nav下的ul、li

.nav{
  background-color: $color-primary;
  ul li{
    list-style: none;
  }
  a{
    text-decoration: none;
    font-size: $font-sm;
    color: $color-secondary;
  }
}

• 转换为css

.nav {
  background-color: orange; }
  .nav ul li {
    list-style: none; }
  .nav a {
    text-decoration: none;
    font-size: 20px;
    color: gray; }

@import

• @import 让我们可以拉出特定区块或是根据功能性不同拆成不同区块，来撰写scss，并利用@import放入主要的scss档案，最後汇整到同一个css之中。
• 再用一个css引入(@import)，各个功能
• 要引入的档案命名：在要import的档案要加_

下方：_test.scss为撰写footer样式的档案

.footer h3{
  font-style:italic ;
  border: blue 3px solid;
}

main.scss 要引入档案的主要档案

@import "test";

• 转译为css(main.css)

.footer h3 {
  font-style: italic;
  border: blue 3px solid; }

@mixin 与 @include

• 当在多个地方想使用同一种style的方式。可以组成一组的样式，并於scss中重复使用。
• 以 @mixin 开头，并自定义一个名称
• 需要它的时候就用 @include呼叫

1. 调整字体大小（以带参数的方式）

// 发现h1,h3样式一样
@mixin headingStyles($fontSize){
  //以代参数方式来放入不同字体大小的变数设定
  font-size: $fontSize;
 color: $color-secondary;
  text-align: center;
} 

.banner h1{
 @include headingStyles($font-lg);
}
.footer h3{
  @include headingStyles($font-md);
}

• 在css的地方，可以看到字的大小不同

.banner h1 {
  font-size: 40px;
  color: gray;
  text-align: center; }

.footer h3 {
  font-size: 30px;
  color: gray;
  text-align: center; }

Functions

• 透过函式的建立，可以在需要使用时，不断地呼叫使用
• @function fontSize($size){ @return $size*2; }建立函式

@function fontSize($size){
   @return $size*2;
}

 h1{
   .banner p{
  font-size: fontSize($font-sm);
  //字的大小会变成 20px*2 =>40px
  }

• 转译为css

.banner p {
  font-size: 40px; }

以上为Sass/SCSS 基础介绍，明天就提供我实战练习的课程分享啦～

参考资料：
Day27：小事之 Transition 与 Animation
CSS3 Animation
新手也可以轻松玩转 SASS - @mixin and @include