【暑期实训】2021-7-1 Sass学习（一）

今日工作

• 初始化前端界面、样式（除了知识图谱相关的其他）
• 学习sass使用
• 深入D3js的了解

Sass学习记录

1、sass概述

浏览器并不支持 Sass 代码。因此，你需要使用一个 Sass 预处理器将 Sass 代码转换为 CSS 代码。

Mac上sass安装

brew install sass/sass/sass

另：
可以将sass转化为css，保存在.css中：

sass runoob-test.scss runoob-test.css

变量

Sass 变量可以存储以下信息：

• 字符串
• 数字
• 颜色值
• 布尔值
• 列表
• null 值

Sass 变量使用$符号：

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

转化为CSS：

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

#container {
  width: 680px;
}

作用域

Sass 变量的作用域只能在当前的层级上有效果。

$myColor: red;

h1 {
  $myColor: green;   // 只在 h1 里头有用，局部作用域
  color: $myColor;
}

p {
  color: $myColor;
}

当然 Sass 中我们可以使用!global关键词来设置变量是全局的.

$myColor: red;

h1 {
  $myColor: green !global;  // 全局作用域
  color: $myColor;
}

p {
  color: $myColor;
}

现在 p 标签的样式就会变成 green。
注意：所有的全局变量我们一般定义在同一个文件，如：_globals.scss，然后我们使用 @include来包含该文件。

Sass 嵌套规则与属性

1.嵌套选择器
Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

对应的css：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

2.嵌套属性
很多 CSS 属性都有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}