关于sass的一些用法

1. 嵌套选择器

允许将一套css样式嵌套到另一套样式中，内层的样式将它外层的样式当做父选择器

HTML

<div><p>Hello scss</p></div>

scss

div {
    p {
        color: red
    }
}

编译为css

div p {
    color:red
}

父选择器还可以用&来代替，下面一段代码实例

编译后

总之嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理,还可以有更加复杂的嵌套

2. 变量

scss最普遍的就是声明变量,然后在其他的文档中引入,这样方便修改整体的样式,声明变量的方式就是使用$来声明变量.

scss

$red:color
$green:green

p {
    color:$red
}
span {
    color:$green
}

编译后的css

p {
    color:red
}
span {
    color:green
}

关于变量的类型有以下6种

1. 数字，1, 2, 13, 10px

2. 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz

3. 颜色，blue, #04a3f9, rgba(255,0,0,0.5)

4. 布尔型，true, false

5. 空值，null

6. 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif

7. maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

3. mixin

定义指令混入@mixin 可以将定义的指令混入到一个元素的样式里面去,混入的方式是使用@include 来混入

@minxin

@include

其中mixin还可以定义为函数，还可以传递参数

SCSS

@mixin mix($width) {
  border: $width solid red;
}

body {
  p {
    @include mix(2px);
    color: red;
    &:hover {
      color: green;
      @include mix(6px);
    }
  }
}

编译为css

body {
  p {
    border: 2px solid red;
    color: red;
    p:hover {
      color: green;
      border: 6px solid red;
    }
  }
}

@mixin和@include一般也可以用代码复用

4. placeholder

placeholder跟mixin差不多,但是其中的实现原理却不相同,还是相同的代码,我们使用placeholder来定义一下

scss

%mix {
  border: 1px solid red;
}

body {
  p {
    @extend %mix;
    color: red;
    &:hover {
      color: green;
      @extend %mix;
    }
  }
}

我们通过%来定义,通过extend来引入,这看起来跟mixin的作用相同,甚至还不能像mixin一样写成函数,但是它的编译后的代码却跟mixin不同

编译后css为

body p:hover, body p {
  border: 1px solid red;
}

body p {
  color: red;
}
body p:hover {
  color: green;
}

可以发现，我们通过mixin定义的内容会复制到标签中,而通过placeholder定义的内容不会引入到标签中,而是将元素中有extend的那个选择器放到placeholder上。

以上就是我对scss用法的总结，如有不足之处望请指出。