scss入门

写在前面

现在很多招聘信息上都要求会scss,sass,less等预处理语言。这些语言确实比CSS用起来效率更高、更爽一些。如果你也是scss的小白，希望这篇文章可以给你一定的参考~

注： 本篇文章默认你已经下载了gitbash、nodeJS

---

1.什么是scss？scss和sass的关系

2.如何使用scss

3.scss常用功能

——————————————————————————

1.什么是scss？scss和sass的关系

首先介绍一下Sass:

Sass是类css语言，语法十分简练，几乎不含{ }。 可以简单理解为去掉分号、冒号、大括号的css。但是有一些弱鸡前端攻城狮表示不用{ }看不懂，于是Sass的开发者在此基础上又提供了Scss,含括号的，然后那些弱鸡前端攻城狮表示能看懂了 - -。
sass中文网 https://www.sasscss.com/docs/#css-extensions

Scss和Sass的关系：

可以简单理解成scss是sass的一个升级版本，它完全兼容Sass之前的功能。语法形式上有些不同，最主要的就是sass是靠缩进表示嵌套关系，scss是靠花括号，并且里面可以嵌套元素

//下面代码是sass  通过缩进表示嵌套关系
.parent
  height 100px
  .child
    height 50px

// 下面是scss 含有{ }的
.parent{
    width:100px;
    .child{
        width:50px;  //表示 .parent下的.child
    }
}

为什么要学习sass

因为他们有很强大的功能：支持变量、嵌套、混入（Mixin）、选择器继承等（后面会讲）。他们比传统的css 用起来更有效率，所以如果你是个有追求的前端一定要学习它。

2.如何使用scss

创建一个目录 新建index.html 和 style.scss 然后让html通过Link标签引入style.scss
编辑style.scss

body{
  h1{
    color:red
  }
}

用GitBash 输入以下命令
npm init -y
npm i -D parcel
npx parcel index.html

之后打开这个网址，就可以看到效果了

image.png

3.scss常用功能（嵌套选择器、变量）

1.嵌套选择器

.nav{
    border: 1px solid red;
    > ul{
        background: #000;
        > li{
            border: 1px solid green
        }
    }
}

2.变量

$grey: #666;
$gray: $grey;
$border-width: 2px;

.nav{
    border: 1px solid $gray;
    > ul{
        background: #000;
        > li{
            border: $border-width solid green;
        }
    }
}

3.混入 mixin

$grey: #666;
$gray: $grey;
$border-width: 2px;
@mixin debug{
    border: 1px solid red;
}

.nav{
    @include debug;
    > ul{
        background: #000;
        > li{
            border: $border-width solid green;
        }
    }
}

传入参数

$grey: #666;
$gray: $grey;
$border-width: 2px;
@mixin debug($border-color){
    border: 1px solid $border-color;
}

.nav{
    @include debug(red);
    > ul{
        background: #000;
        > li{
            border: $border-width solid green;
        }
    }
}

默认参数

$grey: #666;
$gray: $grey;
$border-width: 2px;
@mixin debug($border-color:red){
    border: 1px solid $border-color;
}

.nav{
    @include debug;
    > ul{
        background: #000;
        > li{
            border: $border-width solid debug(green);
        }
    }
}

简写

@mixin box{
     ...
}

@include box

可以简写为

%box{
    ...
}

@extend %box