SCSS之基础全解

herzorf

一个热爱生活的平平无奇小天才

SCSS是一门很好用的类CSS,在平时的工作中几乎都不用CSS,而是使用类CSS语言,比如:SCSS,LESS,Stylus,所以学会一门类CSS语言是必须的.所以我在这里介绍一下SCSS的用法,我之所以选择SCSS是因为它看起来比较圆润(嘿嘿~~~)

嵌套选择器
变量
mixin
placeholder

1.嵌套选择器

SCSS的入门就是使用嵌套选择器,SCSS 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器.

例如:

HTML

 <body>
    <p>你好</p>
 </body>

Scss

body {
    color: red;
}

上面的代码中HTML中body下面只有一个p标签,我们通过Scss的标签嵌套来为p标签添加样式,这样能够选择页面中的p标签并为它添加样式

编译后的代码为:

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

#main {
  width: 97%;
  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  pre { font-size: 3em; }
}

编译后为:

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

有时候嵌套需要使用到父元素的选择器(添加hover样式,或者伪元素的时候),父元素选择器可以使用&来代替

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

编译后为

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

属性可是可以嵌套的,有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Scss 允许将属性嵌套在命名空间中，例如：

body {
    font: {
      size: 34px;
      family: "Courier";
      weight: bold;

编译后为:

body p {
  font-size: 34px;
  font-family: "Courier";
  font-weight: bold;
}

2.变量

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

$red: red;
$g: green;
body {
    color: $red;
    &:hover {
      color: $g;
}

上面的代码中声明了两个变量 $red 和 $g ,分别是红色和绿色,然后在赋值的时候跟css的属性一样赋值

编译后为:

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

变量的类型有六种:

数字， 1, 2, 13, 10px
字符串，有引号字符串与无引号字符串， "foo", 'bar', baz
颜色， blue, #04a3f9, rgba(255,0,0,0.5)
布尔型， true, false
空值， null
数组 (list)，用空格或逗号作分隔符， 1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, 相当于 JavaScript 的 object， (key1: value1, key2: value2)

声明的变量可是有作用域的,但是可以在声明的变量后面加上 !global 来把它变成全局的变量

body {
    $red: #f60 !global;
    font: {
      size: 34px;
      family: "Courier";
      weight: bold;
  div {
    color: $red;

在上面的代码中,理论上在p标签里面声明的变量 $red 在div里面是无法使用的,但是在设置了 !global 之后就可以访问了,但是注意,只有在声明的下面才能访问到,如果在 $red :#f60 !global 之前使用 $red 则会报错.

SCSS中还可以使用变量的计算,其实这个在CSS中也是支持的 width:cale(200px / 2)
可以使用cale关键字来计算,而在SCSS的计算则不用使用cale

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

大家注意看,我上面的注释是单行注释,而传统的CSS注释都是单行注释 /**/ ,这是因为SCSS支持了单行注释.

不仅数子可以相加,颜色也可以

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

颜色相加其实是颜色的十六进制相加,而超过的部分都是f

关于颜色的相关运算其实有很多,将近三十种,我这里就不一一说明了,给个链接

关于变量还有字符串插值跟js中的 ${variable} 差不多,SCSS使用 #{variable} ,用的不多

body { $content: "---"; &:before { content: "[#{$content}"; &:after { content: "#{$content}]";

结果

3.mixin

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

@mixin mix { border: 1px solid red; body { @include mix; color: red; &:hover { color: green;

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

@mixin mix($width) { border: $width solid red; body { @include mix(2px); color: red; &:hover { color: green; @include mix(6px);

编译后:

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

从上面的代码可以看出通过 @mixin 定义的指令,通过 @include 引入后定义的指令会混入到引入的元素中,相当于把mixin中的代码复制了一份写入了

4.placeholder

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

%mix { border: 1px solid red; body { @extend %mix; color: red; &:hover { color: green; @extend %mix;

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

编译后:

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