Scss的基本语法及使用

前言

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。

1.注释
2.嵌套规则
3. 变量： $
4.运算
5.合并文件：@import
6.继承：@extend
7.混入指令
8.判断：@if 和循环：@for
9.自定义函数

注释

在scss中有单行注释和双行注释，多行注释会被保留在输出的CSS中，而单行注释会被删除。

在scss中

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */

//abc

/*!This comment is important*/
.text {
    background-color: #fff;
}

在css中

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
/*!This comment is important*/
.text {
  background-color: #fff;
}

嵌套规则

scss 允许将一个 CSS 样式嵌套进另一个样式中，内层样式仅适用于外层样式的选择器范围内

1.基本操作

在scss中：

#main{
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

在css中：

#main{
  color: #00ff00;
  width: 97%; 
}
#main .redbox {
   background-color: #ff0000;
   color: #000000; 
  }

2.引用父选择器:&

在scss中

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
 }

在css中

a {
  font-weight: bold;
  text-decoration: none; 
  }
a:hover {
    text-decoration: underline;
  }

3.嵌套属性

  CSS中有一些属性遵循相同的“命名空间”；比如，font-family, font-size, 和 font-weight都在 font 或 background 命名空间中。在CSS中，如果你想在同一个命名空间中设置一串属性，你必须每次都输出来。Scss为此提供了一个快捷方式：只需要输入一次命名空间，然后在其内部嵌套子属性
在scss中

.text {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

在css中

.text{
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
  }

变量: $

1.基本操作

在scss中

$width: 5em;

在css中

#main {
  width: $width;
}

2.在后面加 !global 标志

在scss中

#main {
  $width: 5em !global;
      width: $width;
}
#sidebar {
  width: $width;
}

在css中

#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}

运算

在scss中

.text {
    $a: 50px;
    margin: (14px/3);  //margin: (14/3)+px;
    padding: round($a/3);
    top: 50px + 100px;
    left: $a * 2;
}

在css中

.text {
  margin: 4.66667px;
  padding: 17px;
  top: 150px;
  left: 100px;
}

scss中的数学函数

• percentage(value)：将一个不带单位的数转换成百分比值；
• round(value)：将数值四舍五入，转换成一个最接近的整数；
• ceil(value)：将大于自己的小数转换成下一位整数；
• floor(value)：将一个数去除他的小数部分；
• abs(value)：返回一个数的绝对值；
• min(numbers…)：找出几个数值之间的最小值；
• max(numbers…)：找出几个数值之间的最大值；
• random(): 获取随机数

合并文件 @import

@import "./reset.scss";
@import "./common.scss";

继承 @extend

在scss中

.wh {
    width: 100px;
    height: 100px;
}
.bgcRed {
    background-color: red;
}
#main {
    @extend .wh;
    @extend .bgcRed;
    border: 1px solid #ccc;
}

在css中

.wh, #main {
  width: 100px;
  height: 100px;
}
.bgcRed, #main {
  background-color: red;
}
#main {
  border: 1px solid #ccc;
}

混入指令

### 1.定义一个混入@mixin 在scss中

@mixin fontstyle {
    font: {
        family: '楷体';
        size: 10px;
        weight: 600;
    }
    color:red;
}

2.引用混合样式:@include

在scss中

.text {
    @include fontstyle;
    margin: 10px;
}

在css中

.text {
  font-family: '楷体';
  font-size: 10px;
  font-weight: 600;
  color: red;
  margin: 10px;
}

3.mixin的强大之处，在于可以指定参数和缺省值

@mixin left($value: 10px){
    float: left;
    margin-right: $value;    
}
div{
    @include left(20px);
}

判断和循环

在scss中

li {
    @for $i from 1 to 6 {
        &:nth-child(#{$i}) {
            .img {
                background-image: url("../img/shop#{$i}.jpg");
            }
            @if $i>3 {
                background-color: #fff;
            }
        }
    }
}

在css中

li:nth-child(1) .img {
  background-image: url("../img/shop1.jpg");
}
li:nth-child(2) .img {
  background-image: url("../img/shop2.jpg");
}
li:nth-child(3) .img {
  background-image: url("../img/shop3.jpg");
}
li:nth-child(4) {
  background-color: #fff;
}
li:nth-child(4) .img {
  background-image: url("../img/shop4.jpg");
}
li:nth-child(5) {
  background-color: #fff;
}
li:nth-child(5) .img {
  background-image: url("../img/shop5.jpg");
}

自定义函数

在scss中

@function double($n) {
    @return $n * 2;
}
.text {
    width: double(5px);
}

在css中

.text {
  width: 10px;
}