【Sass学习笔记（一）快速入门】快速入门Sass工具

Sass中文文档：https://www.sass.hk/guide/

// 1-1. 变量声明;
$color: red;
$blue: blue;
$green: green;
// 1-2. 变量引用;
$border: 1px solid $color;

// 1-3. 变量名用中划线还是下划线分隔;

.content {
	color: $color;
	border: $border;
}

// 2. 嵌套CSS 规则;
// 2-1. 父选择器的标识符&;
#content {
	article {
		h1 {color: $color}
		p {border: $border}
	}
	aside {
		color: $color;
		border: $border;
	}

	&:hover {
		color: $blue;
	}

	body.ie & {
		color: $green;
	}
}

// 2-2. 群组选择器的嵌套;
.container {
	h1, h2, h3 {color: $color}
}

.nav, .aside {
	a {color: $green}
}

// 2-3. 子组合选择器和同层组合选择器：>、+和~;
.article {
  ~ .article { border-top: 1px dashed #ccc }
  > .section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  .nav + & { margin-top: 0 }
}

// 2-4. 嵌套属性;
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

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

// 3-1. 使用SASS部分文件;
// @import "style"

// 3-2. 默认变量值;
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

// 3-3. 嵌套导入;
.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

// 3-4. 原生的CSS导入;


// 4. 静默注释;
body {
  color /* 这块注释内容不会出现在生成的css中 */: #333;
  padding: 1; /* 这块注释内容也不会出现在生成的css中 */
}

// 5. 混合器;
@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;
}

// 5-1. 何时使用混合器;

// 5-2. 混合器中的CSS规则;
@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

// 5-3. 给混合器传参;
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  @include link-colors(blue, red, green);
}

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

// 5-4. 默认参数值;
@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

// 6. 使用选择器继承来精简CSS;
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

// 6-1. 何时使用继承;

// 6-2. 继承的高级用法;

// 6-3. 继承的工作细节;

// 6-4. 使用继承的最佳实践;