Sass/Scss 基础知识 学习笔记

Sass/Scss是一个非常好用的预处理器，所谓预处理器，就是可以在我们转变成CSS之前，
更有结构性写、简洁、清晰且好维护的 CSS 程式码，在大型专案中可说是一大救星。

但我们无法使用写好的Sass/Scss直接进行使用，因为浏览器会看不懂，所以在写完之后，可以利用
Vs code的插件 live sass compiler 将Sass/Scss额外转成CSS，而其流程如下:

而我们用下面的小例子来学习一些Sass/Scss之基础知识、语法:

我们先写一个简单的HTML。

    <div class="tabList">            <header>            <ul>                <li><a href="javascript:;">A</a></li>                <li><a href="javascript:;">B</a></li>                <li><a href="javascript:;">C</a></li>                <li><a href="javascript:;">D</a></li>                <li><a href="javascript:;">E</a></li>                <li><a href="javascript:;">F</a></li>            </ul>        </header>                <div>            <img src="xxx.jpg" alt="">            <ul>                <li>                    <h3>啤酒</h3>                    <p>买一送一</p>                    <p>$123</p>                </li>                <li>                    <h3>啤酒</h3>                    <p>买一送一</p>                    <p>$123</p>                </li>                <li>                    <h3>啤酒</h3>                    <p>买一送一</p>                    <p>$123</p>                </li>            </ul>        </div>            </div>    

在我们使用 live sass compiler 并写Sass/Scss之后即会产生额外两个folder，
一个是dist是我们的产品区，当要将网站发布时就会用产品区，另一个则是style也就是我们的开发区。
Sass/Scss样式，简单来说Sass/Scss就是将程式的概念引入至Css。

1.我们可以在里面创建变数:$为宣告的变数

// 创建变数$width:100%;$buttonNumber:6;

2.继承(extend):所谓继承就是共用的意思，全部样式都可以共用一个样式。%指专门被继承的样式(一般放在最上面)，想让多个 class 使用相同样式，就可以用它，以便减少代码重複性。

利用@extend来引用。

    %aBt {        text-decoration: none;        display: block;    }    .tabList {            li {                >a {                                此处aBt的样式等同                (                                .aBt , li>a{                   样式...                }                                )                    @extend %aBt;                    width: 100%;                    height: 1rem;                    line-height: 1rem;                }               }             }            

此时我们看转成css的style为

      .tabList > header li > a {        text-decoration: none;        display: block;        }      .tabList > header li > a {        width: 100%;        height: 1rem;        line-height: 1rem;        }

3.巢状的概念，也就是父层、子层的关係，可一层一层的写下去。

补充:注解几乎都放在工作(dev)区，也就是style里面，而不是产品(prod)dist，
注解尽量用双斜线(只有自己看的到)不建议用 /* */(会增加css大小，但可给其他人看到)。

.tabList {    >header {        >ul {            margin: 0;            padding: 0;            list-style: none;            font-size: 0px;        }        li {            display: inline-block;            font-size: 16px;            // calc() 是一个 CSS function 作用于属性设定是数值的时候可以进行加减乘除的运算            // width: calc(100%/6);            // 利用变数达到相同效果            width: $width/$buttonNumber;            >a {                // 继承(共用)aBt的样式)                @extend %aBt;                width: 100%;                height: 1rem;                line-height: 1rem;            }        }    }    >div {        color: red;    }}

4.函数的概念:@是sass辨识程式，$为宣告的变数，而$count:后为预设值

@function line($count: 1, $baseLineHeight:10px) {    @return $baseLineHeight * $count;}.a {    // 都不加就为预设值    padding: line();}

5.mixin:当有一个css设定常被用到，就可以用它，用来集合变数、extend、function...的组合

利用@include来引用。

// mixin会产生多份样式，用来集合变数、extend、function...的组合        @mixin aBt() {            text-decoration: none;            display: block;        }        #a {            @include aBt();        }        #b {            @include aBt();        }        #c {            @include aBt();        }

在转成css之后。

        #a {          text-decoration: none;          display: block;        }        #b {          text-decoration: none;          display: block;        }        #c {          text-decoration: none;          display: block;        }

mixin & extend 比较，mixin会产生多行，extend只会产生一行，且mixin有使用参数的功能，
能使整体操作性更为弹性及多样，类似函数的传入参数。

        %aBt {            text-decoration: none;            display: block;        }        @mixin aBt() {            text-decoration: none;            display: block;        }        .a {            @extend %aBt;        }        .b {            @extend %aBt;        }        .c {            @extend %aBt;        }        #a {            @include aBt();        }        #b {            @include aBt();        }        #c {            @include aBt();        }

在转成css之后。

        .a, .b, .c {          text-decoration: none;          display: block;        }        #a {          text-decoration: none;          display: block;        }        #b {          text-decoration: none;          display: block;        }        #c {          text-decoration: none;          display: block;        }

6.import的概念:可将我们所写好的function给封装，并在要使用的地方给引入。

注意封装好的Sass/Scss要以_xxx命名，否则会再被转为css

此为封装好的Sass/Scss(包括function,mixin等)，用来设置字体样式及行高。

        $sizeLevel: 4px;        $paddingLevel: 1.5;        $baseSize: 12px;        $baseLineSize: 10px;        // 设置字体大小的函数        @function font($level: 0) {            @if $level < 0 {                $level: 0;            }            // round取四捨五入            @return $baseSize+$sizeLevel * round($level);            // 依照优先性(+ > *)            // 12px + 4px * 1 =16px        }        // 设置行高的函数        @function rhythm($size) {            // ceil取大于等于之整数            @return ceil($size * $paddingLevel / $baseLineSize) * $baseLineSize;            // ceil ( 16 * 1.5 / 10px ) = ceil(2.4) => 3 , 3*10=30px        }        // 尽量设计三个参数内的mixin函数，否则会太难用        @mixin font($level: 1, $line-height: auto) {            $size: font($level); // 16            $line: rhythm($size); // 30            font-size: $size;            // 如果lh没给(auto)，或给予的参数，比运算出来的小，就取运算出来的            @if $line-height==auto or $line-height < $line {                line-height: $line;            }            @else {                line-height: $line-height;            }        }        @function line($count: 1, $baseLineHeight: 10px) {            @return $baseLineHeight * $count;        }        @for $i from 0 through 5 {            .level#{$i} {                @include font($i);                margin: line($i/2) auto;            }        }

从其他地方引入这个封装好的_xxx

        // 将mixin及函数给导入进来        @import "./fucntion";        .a {            @include font(1);        }        .b {            @include font(2);        }        .c {            @include font(3);        }

转为Css之后。

        .a {          font-size: 16px;          line-height: 30px;        }        .b {          font-size: 20px;          line-height: 30px;        }        .c {          font-size: 24px;          line-height: 40px;        }