持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情

1.scss是什么

scss是css的一种预处理语言

sass是一款强化css的辅助工具，在css的基础上增加了
变量(variables)、
嵌套(nested nutes)、
混合(mixin)，
导入(inline imports)等高级功能

scss 是sass3.0之后的版本

3.0之后的sass版本后缀名为.scss

2.为什么要使用SCSS

Scss的优势主要包括如下几点。

　　(1) Scss完全兼容所有版本的CSS。

　　(2) 特性丰富，Scss拥有比其他任何CSS扩展语言更多的功能和特性。

　　(3) 技术成熟，功能强大。

　　(4) 行业认可，越来越多的人使用Scss。

　　(5) 社区庞大，大多数科技企业和成百上千名开发者为Sass提供支持。

　　(6) 有无数框架使用Scss构建，如Compass、Bootstrap、Bourbon和Susy。

3.SCSS如何使用

在vscode中下载easy sass插件,可以自动把scss转为css文件

1.$设置变量

1.1定义变量(复用一句代码)

(自定义变量名需要以$开头)

$basic-color: yellowgreen;

// 1.定义变量
$basic-color: yellowgreen;
$highlight-color: #f90;
$basic-border: 1px solid black;

1.2使用变量

使用是直接把对应的变量名拿来代替原来的颜色或者边框等即可

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

2.&父级选择器

用于伪类选择器

&代表了直接父级元素

p {
    color: $highlight-color ;
    // 2.父选择器
    &:hover {
        color: $basic-color;
        font-size: 20px;
    }
}

自动生成的css部分:

p {
  color: #f90;
}

p:hover {
  color: yellowgreen;
  font-size: 20px;
}

3.嵌套语法

直接在父级元素内写子级元素的样式即可,

避免了原始css写太多的父级元素的烦恼

#app {
    background-color: $highlight-color;
    border: $basic-border;
    // 嵌套语法
    .container {
        height: 200px;
        width: 200px;
        background-color: #ff0;
        font-size: 30px;
        border: $basic-border;
    }
}

自动生成的css部分:

#app {
  background-color: #f90;
  border: 1px solid black;
}

#app .container {
  height: 200px;
  width: 200px;
  background-color: #ff0;
  font-size: 30px;
  border: 1px solid black;
}

4.混用(mixins)复用一段代码

4.1定义格式

@mixin 名称 { 代码 }

@mixin container {
  width: 1200px;
  background-color: green;
}

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

4.2使用格式

在对应的元素style中写 @include 混用块名称接口

.div {
  width: 200px;
  @include clearfix;
  @include container;
}

5.模块化

5.1新设模块

可以把变量模块放在一个单独的scss文件,如把所有设定的变量放入文件variables.scss中

// 1.定义变量
$basic-color: yellowgreen;
$highlight-color: #f90;
$basic-border: 1px solid black;

5.2导入模块

在需要使用variables.scss定义的变量的地方导入variables.scss即可

// 导入模块
@import "./varisbles.scss";

4.总结

css的预处理语言可以使我们更便捷的写代码
css的预处理语言有less,sass,scss
.less,.scss,.sass预处理语言只有在开发阶段使用
html无法识别css预处理语言,实际html引入的解析的都是css

SCSS基本介绍和使用