sass学习笔记

scss基础知识学习笔记

1. 使用变量

1.1、声明变量与使用变量

变量名以$开头，名字自定义。
$font-size: 14px;
$border: 1px solid violet;
使用方法

	$font-size: 14px;		/* 声明变量 */
	.violet {
		font-size: $font-size;	/* 使用变量 */
		$width: 15px;	/* 声明变量 */
		width: $width;	/* 使用变量 */
	}

1.2、变量名使用中划线和下划线是一样的

	$color: violet;
	div {
		color: $color;
		$font-size: 50px;	/* 以中划线声明 */
		font-size: $font_size;		/* 取值时用下划线也可以访问 */
	}

2、嵌套css规则

	div {
		color: violet;
		$font-size: 50px;
		font-size: $font_size;
		span {	/* 子元素的css嵌套在父元素中 */
			color: pink;
		}
	}

2.1、父选择器的标识符&

	.inner {
		color: violet;
		$font-size: 50px;
		font-size: $font_size;
		span {
			color: pink;
		}
		&:hover {	/* 表示父元素hover时的样式，不会传递到子元素 */
			color: red;
		}
		.outer & {	/* 可以在父选择器上再加上父选择器 */
			border: 1px solid violet;
		}
	}

2.2、群组选择器的嵌套

	/**
	 *  css写法
	 *  .container h1, .container h2, .container h3 { margin-bottom: .8em }	
	 * 以下为scss写法
	 */
	.container {
		h1, h2, h3 {margin-bottom: .8em}
	}
	/**
	 * css写法
	 * nav a, aside a {color: blue}
	 * 以下为scss写法
	 */
	nav, aside {
		a {color: blue}
	}

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

	.inner {
		color: violet;
		$font-size: 50px;
		font-size: $font_size;
		> span {	/* 选中直接子元素中的span元素 */
			color: pink;
		}
		+ .next {	/* 同级元素中紧挨着的下一个.next元素 */
			color: skyblue;
		}
		~ label {	/* 选中同级元素中所有的label元素 */
			font-size: 40px;
		}
	}

2.3、嵌套css属性

	.outer & {
		/**
		 *  css写法，以下为scss嵌套属性写法
		 *  border-width: 2px;
		 *	border-style: dashed;
		 *	border-color: violet;
		 */
    border: {	
      width: 2px;
      style: dashed;
      color: violet;
    }
		border: 1px solid red {
			left: 0;
			right: 0;
		}
  }

3.导入sass文件

使用@import来导入scss文件，可以省略文件后缀.scss或.sass，被导入的文件中所有的变量，函数，mixin等都可以直接使用。

3.1、使用sass部分文件

通过@import导入的文件并不会生成独立的css文件，这些文件被称为局部文件。
如图所示，.scss文件编译后会生成对应的.css文件和其他的一些文件，编译时被导入的文件并没有生成相应的.css文件。

对局部文件有一些特殊约定，即用文件名以下划线开头，如：_other.scss，而导入这个.scss文件时可以省略下划线，如下图：

3.2、默认变量值

	/* 给变量赋予默认值，如果其他地方对这个变量声明赋值red，就采取那个值red，否者就使用默认值violet */
	$leona-color: violet !default;

3.3、嵌套导入

sass允许@import命令直接写在css规则内，生成.css文件时，局部文件会直接嵌套到它导入的地方

	/* 在css规则内导入.sass文件，局部文件中的样式会嵌套在导入的地方,局部文件中的变量和混合器也只会在该范围内生效 */
	.annie {
		@import 'annie';
	}

3.4、原生css导入

sass兼容原生的css，所以它也支持原生的css@import。
在下列的三种情况下会发生原生的css@import，这回造成浏览器解析css的额外下载：
* 被导入文件的名字以.css结尾；
* 被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
* 被导入文件的名字是CSS的url()值

4、静默注释

sass中有两种注释方式：

	.leona {
		border: $leona-border;	// border	这种注释在生成的.css文件中不会显示，即静默注释
		color: $leona-color;	/* font color 这种注释会在生成的.css文件中显示 */
	}
	
	// 生成的.css文件中可以看到注释
	.leona {
	  border: 1px solid violet;
	  color: pink;
	  /* font color */ }

5、混合器

混合器使用@mixin标识符来定义，用来给一大段代码赋予一个名字。这样就可以通过引用这个名字来实现代码重用。

	// 使用@mixin为一段代码赋予名字
	@mixin border-round {
		-moz-border-radius: 5px;
	  -webkit-border-radius: 5px;
	  border-radius: 5px;
	}
	
	.leona {
		border: $leona-border;	// border
		color: $leona-color;	/* font color */
		@include border-round;	// 使用@include 来引用，@mixin中定义的代码就会嵌入这里
	}

混合器使用过量会导致生成的样式表过大，代码加载缓慢。

5.1、何时使用混合器

当你能为混合器起一个合适的名字的时候那么就应该使用混合器，如：

	// 混合器就是用来描述文本样式的，可以起一个直观的名字
	@mixin text-style {
		color: violet;
		font-size: 16px;
		line-height: 32px;
		font-style: normal;
		font-weight: bold;
	}
	.ahri {
		@include text-style;
	}

5.2、给混合器传参

混合器并不总是生成相同的样式，通过给混合器传参数来生成更加精确的样式。语法规则类似javascript的function

	// 定义混合器时制定需要哪些参数
	@mixin text-style($color,$font-size,$line-height,$font-weight) {
		color: $color;
		font-size: $font-size;
		line-height: $line-height;
		font-style: normal;
		font-weight: $font-weight;
	}
	.ahri {	
		@include text-style(violet,20px,40px,normal);		// 调用混合器时传入参数
	}

5.3、默认参数值

使用混合器时有时也不需要传入所有的参数，可以给参数制定默认值。

	// 定义混合器时给所有的参数都指定了默认值
	@mixin border-style($width: 2px,$color: violet,$style: dashed) {
		border: $width $style $color;
	}
	.annie {
		@include border-style;	// 无参调用，全部使用默认值
		@include border-style(5px);	// 只有width使用自定义值
		@include border-style(5px,red);	// 只有style使用默认值
		@include border-style(5px,red,solid);	// 全部使用自定义值
	}

6、使用选择器继承来精简css

使用sass的时候，最后一个减少重复的主要特性就是选择器继承。

	// 定义选择器样式
	.border-style {
		border-width: 2px;
		border-style: dashed;
		border-color: red;
	}
	.annie {
		@extend .border-style;	// 继承选择器样式
	}

6.1、继承的高级用法

任何css规则都可以继承其它规则，几乎任何css规则都可以被继承。所以你可以继承一个html元素的样式。
默认的浏览器样式不会被继承，因为它们不属于样式表中的样式，但是你对html元素添加的所有样式都会被继承。

我特么照着例子写怎么都报错？？？html元素继承还需要定义？？

6.2、继承的工作细节

• 跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。
• 继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。