Sass 用法小结

sass 是 css 的扩展语言。

    sass 有两种后缀名

  • .sass:对空格敏感,不使用花括号,不使用分号,语句之间通过换行来分隔,语法风格类似 Ruby。
  • .scss:与传统 css 文件有很大的相似之处,容易上手。

使用 koala 直接对 sass 文件进行实时编译。

语法介绍

变量:
变量定义在文件的行首,格式如下:
$name: value;
例:

...
header-ff: Microsoft YaHei;
...
.header {
	font-family:header-ff;
	color:#f00;
}
...

这样以后可以直接在变量中修改。

所有变量可以保存在一个统一的文件中,文件格式是 .scss ,如果是局部文件,则在名字前面加下划线“_” 。
例:_all-value.scss

引入文件的方法: @import "all-value";
需要注意的是:

  • 当文件没有后缀名的时候,sass 会尝试为其添加 .sass 或 .scss 的后缀名,路径中存在的文件所决定
  • 同一个目录下,局部文件和非局部文件不能重名,所以可以省略前面的下划线

在 css 中也存在 @import 指令,但是 css 原生引入指令有两大弊端:

  • 必须在代码最前边,否则将不起作用
  • 浏览器按顺序下载解析,延长渲染时间,影响性能

sass 对指令进行了改进:

  • 编译阶段将被引入文件合并,并输出到了相应的 css 文件
  • @import 指令可以用在文档的任何地方

但是,sass 如何分辨这里的指令是不是原生的 @import 呢?sass 有一套规则来使用 css 原生 @import :

  • 当 @import 后面文件的后缀名是 .css 的时候
  • 当 @import 后面是以 http:// 开头的时候
  • 当 @import 后面是一个 url() 函数的时候
  • 当 @import 后面带有 media queries 的时候

满足以上任意一条,sass 就使用原生 css 原生指令。

注释:
sass 支持/* 块注释 */// 行注释
块注释会在 css 文件中体现
行注释只会有一个提示信息,告诉注释内容在原 scss 文件中的位置

嵌套写法:

.header {
	width: 1000px;
	height: 100px;
	position: relative;

	.nav {
		width: 100%;
		height: 50px;
		position: absolute;
		bottom: 0;
	}
}

:hover 样式:
错误写法:

a {
	hover {
		color: f00;
	}
}

这样写所生成的内容是 a *:hover ,意思是 a 链接中所有元素的 hover 效果。

正确写法应该是:

a {
	&:hover {
		color: f00;
	}
}

&代表父选择器

属性嵌套:
css 写法:

a {
	font-family: Microsoft YaHei;
	font-size: 12px;
}

sass 嵌套写法:

a {
	font:{
		family: Microsoft YaHei;
		size: 12px;
	}
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注