关于SCSS你知道多少？了解和基本使用/语法（教程）

目录

写在前面

一、了解SCSS

1、是什么？

2、sass、scss、less、css的区别

3、小结

二、SCSS-基本语法

1、变量

2、嵌套语法

3、&父选择器

4、模块

5、小结

总结

---

写在前面

        哈喽呀大家，又见面了，新的一天新的知识。今天来讲讲scss，如果你想要知道更多的scss的知识，欢迎访问它的官方文档，可以更全面详细的了解这门css的预处理语言~贴在下面啦：

https://www.sass.hk

        但是你要是不想花那么多的时间的话，欢迎你来看这篇文章，我会带你初步了解并且简单使用^_^

一、了解SCSS

1、是什么？

        Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。

        CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。

2、sass、scss、less、css的区别

        less, sass, scss都是css预处理语言（也是对应的文件后缀名），它们的语法功能比css更强大。

        预处理语言使用是：开发时用预处理语言，在打包上线时，用webpack再配合loader工具给转成css（Cascading Style Sheets）给浏览器使用。

        细节：

1. 后缀名：SASS（Syntactically Awesome StyleSheets）版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss

2. 语法规范：

   sass没有{}和;, 有严格的缩进规范 ;

   scss和css的缩进规范是一致的

        我们在实际开发过程中，scss是常用写法~        

3、小结

        scss和less一样，是预处理语言；

        在vscode中有现成的插件可以把它转成css。（easy sass）

---

二、SCSS-基本语法

1、变量

定义:

  sass使用$符号来标识变量

$highlight-color: #f90;
$basic-border: 1px solid black;

        上面我们声明了名为$highlight-color 和$basic-border的变量, 随后我们就可以使用变量了。

使用:

#app {
    background-color: $highlight-color;
    border: $basic-border;
}     

2、嵌套语法

        和less一样，scss同样支持嵌套型的语法

// scss语法
$highlight-color: #f90;
$basic-border: 1px solid black;
​
#app{
  background-color:  $highlight-color;
  border:$basic-border;
  .container{
    font-size:30px;
  }
}

        转化成css后

#app {
  background-color: #f90;
  border: 1px solid black;
}
​
#app .container {
  font-size: 30px;
}

3、&父选择器

        假如你想针对某个特定子元素 进行设置

$highlight-color: #f90;
$basic-border: 1px solid black;
​
#app{
  background-color:  $highlight-color;
  border:$basic-border;
  .container{
    font-size:30px;
  }
  a{
    color:blue;
    &:hover{
      color: red;
    }
  }
}

4、模块

        一个.scss文件就是一个模块，多个.scss文件之间可以相互引用。例如：在一个.scss文件(base.scss)定义多个变量，然后在另一个.scss（test.scss）中引入这个文件，就可以使用其中定义的变量了

格式

@import './xxxx.scss';

示例

        新建base.scss，并定义变量

$base-color: green;

        在test.scss中引入base.scss

@import './base.scss';
$highlight-color: #f90;
$basic-border: 1px solid black;
#app{
  background-color:  $base-color;
  border:$basic-border;
  .container{
    font-size:30px;
  }
  a{
    color:blue;
    &:hover{
      color: red;
    }
  }
}

5、小结

        scss与less类似，只是一种css样式的预处理语言 (浏览器不能直接使用的，需要转成css)

        很多用法都与less类似（变量，嵌套，模块化）不需要花太多精力去学习它。

---

总结

        以上就是今天的全部内容啦，下期见~