SCSS-基本语法

SCSS-基本语法

目标:

学习scss预处理器的基础语法 ；

变量

定义
sass使用$符号来标识变量

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

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

使用

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

我们再来看一下模板中的 styles/variables.scss，这个文件中就是我们本次项目用到的所有scss变量

嵌套语法

和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;
}

&父选择器

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

$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;
    }
  }
}

模块

一个.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;
    }
  }
}

小结

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

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