菜鸡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 网站变的轻而易举