菜鸡SCSS初体验

还记得前两周我都在学习如何手刻RWD网页，不只有许多的HTML结构要去注意。
就连CSS样式也希望能使用模组化的方式建构。
总之，就是要让code不要太冗长不好管理。

在这个时候就遇到了一个叫做SCSS的好东西！

还记得刚开始碰程序时，有跟着别人使用过一次的经验。
那时候只觉得...
恩？
当工程师觉得一件事很麻烦费时的时候，居然是再用另一种语言去简化它吗？！
在我看起来怎麽变得更麻烦...
然後脑袋还是打结，程序码还是继续看不懂...

之後持续看了各种前端的课程又过了半年，练习了一些版型，开始接触了RWD...
恩！开始操作SCSS的时候真的犹如天降甘霖！！

当我意识到SCSS可以大大简化我写CSS的时间时，我马上自告奋勇地在心里下了决定。
下次再写RWD的时候绝对要用上SCSS！

初期在写css时，越写到後面就越来越长，
选择器也要一直选一直选、选了又选的无奈感...
明明只是简单的一页式网页，都有可能让css变得又臭又长。

当我开始写RWD时，又更难了。因为要设定至少两个断点，
要滑到最下面写pad的宽度，又要滑到更下面写mobile的宽度。
真的深刻体会前人所说，花最长时间的不是写code，是找code和看code。

而SCSS新增了嵌套、变数、混入、共用、函式这几大功能，
就大大解决了很多传统css会遇到的问题。

变数-Variables
有点像是JavaScript一样，可以用＄字号取一个变数名称，然後赋予一个值。
通常会设定颜色、字型，或各种需要重复用到的东西上面。

$font-style: 'Roboto', sans-serif;
$primary:rgb(65, 103, 136);

h1{
    font-family: $font-style;
    color: $primary;
}

SCSS使用＄字号命名变数的写法

h1{
    font-family:"Roboto",sans-serif;
    color:#416788
    }

编译後的css

嵌套-Nesting
嵌套的使用就像我们平常在写HTML的阶层一样，可以更清楚显示阶层，也避免一直重复选择器的困扰。

.nav-link{
    display: flex;
    list-style: none;
    
    li{
        margin-right: 10px;
    }
    a{
        display: block;
        text-decoration: none;
        color: black;
        padding: 5px;
    }
}

SCSS可以将样式用阶层的方式撰写，减少重复选取问题。

.nav-link {
    display: flex; 
    list-style: none; 
}
    
.nav-link li { 
    margin-right: 10px; 
}
    
.nav-link a { 
    display: block; 
    text-decoration: none; 
    color: black; 
    padding: 5px; 
}

编译後的css

混入-Mixin
当一段css会一直被重复使用到，就可以把那段css设定成一个mixin，
可以在其中输入不同的“参数”去做出改变，甚至还可以让RWD撰写起来更加轻松。

@mixin square($W-size, $H-size, $color, $radius: 0) {
    width: $W-size;
    height: $H-size;
    background: $color;

    @if $radius != 0 {
      border-radius: $radius;
    }
}

.box {
    @include square(100px, 100px, red, $radius: 4px);
}  
    
.card {
    @include square(200px, 300px, rgb(220, 223, 220), $radius: 10px);
}

SCSS将类似样式组成@mixin，运用参数去改变不同之处。

.box {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 4px; 
}

.card {
  width: 200px;
  height: 300px;
  background: #dcdfdc;
  border-radius: 10px; 
}

编译後的css

混入-Mixins运用在RWD的写法

@mixin pad{
    @media(max-width:768px){
      @content;
    }
  }
  @mixin mobile{
    @media(max-width:576px){
      @content;
    }
  }
  
.box {
    height: 100px;
    width: 100px;
    background: #000;
    
    @include pad{
        background: red;
    }
    
    @include mobile{
        background: yellow;
    }
  }

SCSS用@Mixin和@content的搭配，
当设定不同断点时可以直接写在要变换的样式之下。
就不用一直把css拉到最下面写样式，或是重复写@midia的断点。

.box {
  height: 100px;
  width: 100px;
  background: #000; 
  }
  @media (max-width: 768px) {
    .box {
      background: red; 
      } 
  }
  @media (max-width: 576px) {
    .box {
      background: yellow; 
      } 
  }

编译後的css

共用-Extends
当选择器中包含了一些相同样式时，又不想重复的写同个样式，就可以使用上这个功能。

%message-shared {
    border: 1px solid rgb(0, 0, 0);
    padding: 20px;
  }
  
  .box {
    @extend %message-shared;
}
  .error {
    @extend %message-shared;
    border-color: red;
}
  .banner {
    @extend %message-shared;
    padding: 50px;
}
  .btn {
    @extend %message-shared;
    border-radius: 20px;
}

SCSS使用%写样式，之後可以重复使用。也可以之後写上另外要更改的样式。

.box, .error, .banner, .btn {
  border: 1px solid black;
  padding: 20px; 
  }

.error {
  border-color: red;
  }

.banner {
  padding: 50px;
  }

.btn {
  border-radius: 20px; 
  }

编译後的css

混入-Mixins 与 共用-Extends
这两个其实有点像，都可以把相同样式打包起来重复使用，
但是mixins是可以加入不同“参数”去做变化，而共用却是比较适用於“一模一样”的样式更加适合。
能理解最後的code会怎麽呈现之後可以更很好理解。

.box {
  border: 1px solid black;
  padding: 20px;
  }

.error {
  border: 1px solid black;
  padding: 20px;
  border-color: red;
  }

.banner {
  border: 1px solid black;
  padding: 20px;
  padding: 50px; 
  }

.btn {
  border: 1px solid black;
  padding: 20px;
  border-radius: 20px; 
  }

Mixin的方式编译出来的css，同样的样式重复再选择器中出现。

.box, .error, .banner, .btn {
  border: 1px solid black;
  padding: 20px; 
  }

.error {
  border-color: red; 
  }

.banner {
  padding: 50px; 
  }

.btn {
  border-radius: 20px; 
  }

共用的方式编译出的css，把相同样式的选择器写在一起，大大省掉了相同的code。
另外修改的样式，也因为权重的先後而有所更改。

函式-Function
最後一个是函式，我并没有使用过。
看起来更像是混入和变数的混合使用方法...
所以这边没办法给大家很好的介绍：（

下方是我学习SCSS时找到的一些参考资料能更好的解说以上内容。
在此附上我在学习SCSS时找到的一些资料。

最後提醒：
SCSS是需要经过编译，HTML才能辨识出样式的，
所以link的是经过编译後的css，并不是SCSS本身。

下方的参考资料也附上了一些如何设定的解说！

那我们就下次见噜～

参考资料：
使用VSCode外挂自动编译SASS/SCSS
SCSS重点笔记
Sass/SCSS 基本语法介绍，搞懂CSS 预处理器
如何利用 Sass 的 @mixin 功能，让撰写 RWD 网站变的轻而易举