scss的基本语法的使用

scss

1、声明变量

[声明变量符 变量名称 : 变量值] eg: $width300:300px;

2、变量调用

$width300:300px; //声明
.main{
  width:$width300; //调用
}

3、局部变量和全局变量

定义在局部的变量不会影响其他的元素，注意：在局部变量后面加上!global，在其声明的下面的代码才能访问到。

$width300:300px; //声明全局变量
.main{
  width:$width300; //调用全局变量
}
//----------------
em{
  $colorRed:red; //声明局部变量
  a{
    color:$colorRed; //调用局部变量
  }
}
//----.box中声明了global变量，那么，在其下面的bottom样式中能够调用$colorRed，top中不能调用$colorRed2----------
span{
  .top{
    color:#fff
  }
  .box{
    $colorRed2:red !global; //声明局部变量
    a{
      color:$colorRed2; //调用局部变量
    }
  }

  .bottom{
    color:$colorRed2;
  }
}

4、嵌套

Sass 提供了选择器嵌套功能，但这也并不意味着你在 Sass 中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深，不易维护。

4.1. 选择器嵌套

Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

4.2. 属性嵌套

嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}
//-------------------
.box {
  border: {
  top: 1px solid red;
  bottom: 1px solid green;
  }
}
//  对于属性的缩写形式，你甚至可以像下边这样来嵌套，指明例外规则
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

4.3. 伪类嵌套

借助 & ,“&”——父选择器： 符号通常用来代替父元素选择器。

span{
  color:red;
}
span:hover{
  color:green;
}
//------------------
span{
  color:red;
  &:hover{
    color:green;
  }
}

5、混合器

如果页面中有几处样式类似，比如字体颜色，在scss中就可以使用变量来统一处理。

5.1. 声明

使用 “@mixin” 声明一个混合器。

5.1.1 不带参数的混合器

@mixin border-radius{
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

5.1.2 带参数的混合器

@mixin border-radius($radius:5px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

5.2. 调用

在 Sass 中通过 @mixin 关键词声明了一个混合器，其匹配了一个关键词“ @include ”来调用声明好的混合器。

// 声明
@mixin border-radius{
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
//调用
button {
  @include border-radius;
}

5.3. 混合器的参数

5.3.1 传一个不带值的参数

// 传一个不带值的参数时,则会在调用的时候可以给这个混合器传一个参数值
@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
.box {
  @include border-radius(3px);
}

5.3.2 传一个带值的参数

给参数赋值了一个初始值。

@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
// 如果其中一个地方不一样则可以指定给混合器传值
.box {
  @include border-radius(10px);
}

5.3.3 混合器的不足

生成冗余的代码块。

6、继承

scss中是通过关键词 “@extends” 来继承已存在的类样式。

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

7、占位符 %placeholder

通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起，提高编译速度，优化网站。

// SCSS
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

8、计算、

在css中通常使用calc()来进行数值计算，在scss中则不用。不仅可以对数值进行计算，颜色也可以。

  width: 100px + 100px + 100px; //加法
  width: 100px - 100px + 100px; //减法
  width: 100px * 100 //乘法,注scss的乘法和除法是带单位的
  width: (100px/3)  //注意这里需要带括号,如果不带括号会当场分割数值
  width: $width / 3 //也可以不带括号,但是里面计算的一定要有声明的变量,因为这个语法css不认识,那么就会被解析成SCSS
  width: 100 % 3px //SCSS也支持取模运算

  $red:#ff0000;
  p{
    color : $red + #888; //#ff8888
  }
  div{
    color :$red + #111;  //#ff1111
  }