SASS 基础语法（二）

官方文档解释 SCSS 与 Sass 异同
。。。反正这个东西都这么叫，sass

快速入门

快速入门参考 sass 中文文档，大量的语言描述与讲解会被省略。

变量

变量声明

/* sass 使用 $ 符号来标识变量 */
$basic-border: 1px solid black;
$highlight-color: #F90;
$nav-color: #F90;

nav {
  $width: 100px;
  width: $width; /* $width 只能在 nav 内部使用，声明时不限位置，引用时受限与声明时的位置 */
  color: $nav-color;
}
复制代码

变量引用

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}
复制代码

变量名

/* 下划线中划线通用 */
$link-color: blue;
a {
  color: $link_color;
}
复制代码

嵌套CSS 规则

/* 下划线中划线通用 */
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  #content aside { background-color: #EEE }
}

/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
复制代码

父选择器的标识符&

article a {
  color: blue;
  &:hover { color: red }
}

/* 编译后 */
article a { color: blue }
article a:hover { color: red }
复制代码

群组选择器的嵌套

nav, aside {
  a {color: blue}
}

/* 编译后 */
article a { color: blue }
article a:hover { color: red }
复制代码

子组合选择器和同层组合选择器：>、+和~

article > section { border: 1px solid #ccc } /* 直接子元素选择器> */
header + p { font-size: 1.1em } /* 同层相邻组合选择器+ */
article ~ article { border-top: 1px dashed #ccc } /* 同层全体组合选择器~ */

/* 嵌套使用~ */
article { 
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
复制代码

嵌套属性

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}
复制代码

导入文件

使用SASS部分文件

/* 无太大差异 */
@import './base.scss'
复制代码

默认变量值

/* 反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值 */
$link-color: blue;
$link-color: red;
a {
    color: $link-color; /* red */
}

/* default 若是有重复声明则会阻止重复声明 */
$link-color: blue;
$link-color: red !default;
a {
    color: $link-color; /* blue */
}
复制代码

嵌套导入

/* _blue-theme.scss */
aside {
  background: blue;
  color: white;
}
复制代码

.blue-theme {@import "blue-theme"}

/* 至关于 */
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}
复制代码

原生的CSS导入

原生的 css 也有 @import 但这直接写在文件中的一段代码，浏览器解析
css 文件时，遇到了 @import 会暂停继续解析后面的代码转而去向服务
器发起一个请求，因此在 .scss 文件中 @import './xxx.css' 会被当成
原生 css 的 @import，若是你想用 sass 的导入，就必须把你的文件
改为 xxx.scss