<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bingxiaoxiao</title>
<link rel="stylesheet" href="../css/demo.css">
</head>
<body>
<!-- 使用变量 -->
<div class="selected">使用变量</div>
<!-- 嵌套CSS 规则 -->
<div id="content">
<article class="article ">
<h1>我就是标题</h1>
<p class="">bingxiaoxiao , hello word</p>
</article>
<aside class="footer">
版权 2010-2019
</aside>
</div>
<!-- 子组合选择器和同层组合选择器：>、+和~;
article section { margin: 5px }
article > section { border: 1px solid #ccc }
你可以用子组合选择器>选择一个元素的直接子元素。上例中，第一个选择器会选择article下的所有命中section选择器的元素。
第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。
可以用同层相邻组合选择器+选择header元素后紧跟的p元素：header + p { font-size: 1.1em }
你也可以用同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：article ~ article { border-top: 1px dashed #ccc } -->
<!-- css中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你并不希望每个浏览网站源码的人都能看到所有注释。
sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScriptJava等类C的语言中单行注释的语法相同，
它们以//开头，注释内容直到行末。
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
} -->
<!-- 混合器 -->
<div class="notice">我是混合器</div>
<ul class="plain"><li>当一个包含css规则的混合器通过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则</li></ul>
<!-- 继承 -->
<div class="seriousError">我要继承</div>
</body>
</html>
demo.sass
// 1.使用变量
// sass使用$符号来标识变量
// sass并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
// 2.嵌套CSS 规则
$nav-color: #F90;
$color-theme:red;
#content {
article {
h1 { color: $nav-color }
p { font-size:18px;background: $nav-color}
// 父选择器的标识符&;
&:hover { color: $color-theme }
}
aside { background-color: gold ;color: $color-theme;text-decoration:underline }
}
// 4. 静默注释;
// body {
// color: #333; // 这种注释内容不会出现在生成的css文件中
// padding: 0; /* 这种注释内容会出现在生成的css文件中 */
// }
// 5.混合器 混合器使用@mixin标识符定义 样式表中通过@include来使用这个混合器，放在你希望的任何地方。
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
ul.plain {
color: red;
@include no-bullets;
}
//6.通过选择器继承继承样式 @extend 继承
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
