sass基本使用

提示：以下是本篇文章正文内容，下面案例可供参考

一、sass是什么？

Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

Sass 是一个 CSS 预处理器。

Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。Sass 完全兼容所有版本的 CSS。

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

Sass 生成良好格式化的 CSS 代码，易于组织和维护。

Sass 文件后缀为 .scss

二、为什么要使用sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 有助于更好地组织管理样式文件，以及更高效地开发项目。

三、sass的使用

1.sass变量

sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途

1.sass变量声明

sass变量的声明和css属性的声明很像：

$highlight-color: #F90; 

注意：一定不要在变量值上加引号！

$变量名 ： 值

变量引用: $变量名

此变量也有作用域的区别：
1.如果变量定义在{}之中，那么此变量只在此{}内生效；
2.如果变量定在{}之外，那么此变量可以在所有的{}内使用；

2.变量引用

	$color:red
	
	border:1px solid $color
	// 经过css编译后 border :1px solid red

3.sass嵌套

// 普通css写法统一父级下写子元素样式比较繁琐
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em } 
#content aside { background-color: #EEE }

// 使用sass来写，非常方便
#content { 
	article { 
		h1 { color: #333 } 
		p { margin-bottom: 1.4em } 
	} 
	aside { background-color: #EEE }
 } 

嵌套规则

样式可读性更高,为元素容器及其子样式编写特点样式
父选择器标识符:&

群组选择器:.content{
h1,h2,h3{}
}

子代选择器与同层选择器
直接子代选择器
~兄弟选择器
+紧邻兄弟选择器

4.静默注释

静默注释不同于css的标准注释：/…/, 静默注释的内容不会出现最终生成的css文件中，避免一些人可以通过浏览网页源码而查看你注释的内容，静默注释通过 // 实现；

5.混合器

通过使用变量，可以实现某属性的重复使用；但是，当有一大段样式需要重复使用时，独立的变量就没办法应付这种情况了。 那么，可以通过SASS的混合器
实现大段样式的重用；

混合器通过使用 @mixin 标识符定义。如下，定义了一个跨浏览器兼容的圆角边框样式：

@mixin rounded-corners { 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	 border-radius: 5px; 
}

可以通过 @include 标识符来使用混合器，放在你希望的任何位置：

notice { 
	background-color: green; 
	border: 2px solid #00aa00; 
	@include rounded-corners; 
} 

混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性;

5.1混合器传参

混合器可以增加代码的复用性，并且给混合器传参可以增加混合器的灵活性；
可以通过在@include混合器时给混合器传参，来定制混合器生成更灵活精确的样式；

定义混合器

@mixin radius（$size,$color,$bg-color） {
	 -moz-border-radius: $size;
	 -webkit-border-radius: $size; 
	 border-radius $size; 
	 border-color:$color;
	 background-color:$bg-color;
} 

调用混合器并传参：

.box { 
	@include radius(5px,#ff0,#0ff);
 } 

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

注：当你@include 混合器传传参时，可能会忘记每个位置参数的意义，SASS允许通过语法： $name: value 的形式指定每个参数的值，这样就不必在乎参数的位置了

6.继承

.error {
	border: 1px solid red; 
	background-color: #fdd;
 }
.error .link{
	color: #fff;
}
// 继承
 .seriousError {
	 @extend .error;
	 border-width: 3px;
 } 
 
// -> 那么.seriousError下的 .link 也会具有 color: #fff 的样式

什么时候使用继承

当你的某一个类是另一个类的细化时，可以使用继承！
例如.error 是普通错误的通用样式， 当某些严重的错误的时候就使用.seriousError类， 那么.seriousError就是.error的细化，那么.seriousError就可以继承.error，然后在自身在做一些细化处理就可以