# Sass

# 文件后缀区别

sass: 缩进语法；
scss: 使用花括号和分号，和 css 相近。

# 使用变量（$）

$ 符号定义，旧版本使用 “!”

$basic-border: 1px solid #ccc;

有作用范围，如果在花括号中定义，則范围只能在花括号内部。

	$width: 100px;
	.nav {
	$width: 20px;
	width: $width;
	}

中划线和下划线相互兼容。

	$hightlight-color: red;
	.nav {
	color: $hightlight_color;
	}

# 嵌套

俄罗斯套娃

	#content {
	#article {
	p1 {
	font-size: 20px;
	}
	a {
	color: blue;
	}
	}

	#aside {
	p1 {
	font-size: 16px;
	}
	}
	}

$ 连接父级选择器，用于伪类

	// 直接连接
	#content a {
	color: blue;
	&:hover {
	color: red;
	}
	}
	// 前缀连接（连接其它的选择器）
	#content a {
	body.ie & {
	color: red;
	}
	}
	// 编译后：body.ie #content a {color: red;}

群组选择器嵌套

	.container {
	h1, h2, h3 {
	margin-bottom: .8em;
	}
	}
	.nav1, .nav2 {
	h1 {
	margin-bottom: .8em;
	}
	}

子代选择器，同级选择器: >, +, ~

	article {
	~ article { border-top: 1px dashed #ccc }
	> section { background: #eee }
	dl > {
	dt { color: #333 }
	dd { color: #555 }
	}
	nav + & { margin-top: 0 }
	}
	// > 后代选择器
	// + 兄弟选择器：A + B，同级，B 紧邻 A
	// ~ 兄弟选择器：A ~ B，同级，所有在 A 后面的 B

	# 编译后
	article ~ article { border-top: 1px dashed #ccc; }
	article > section { background: #eee; }
	article dl > dt { color: #333; }
	article dl > dd { color: #555; }
	nav + article { margin-top: 0; }

嵌套属性：用 - 连接，比如 border-style

	// 全部
	nav {
	border: {
	style: solid;
	width: 1px;
	color: #ccc;
	}
	}
	// 部分
	nav {
	border: 1px solid #ccc {
	left: 0px;
	right: 0px;
	}
	}

# 导入（@import）

与 css 的 @import 不同，直接编译成同一个文件不用再次请求一次文件；
可以省略后缀；
可以导入不同语法的文件：scss, sass
!default 设置默认变量值

	$link-color: blue !default;
	//import 该文件后，如果有设置 $link-color，则用设置的值；否则用该默认值

嵌套导入

	// file1.scss
	$hightlight: red;
	#aside {
	color: red;
	}
	// file2.scss
	.theme {
	@import "file1"
	}
	//file1 的变量和 mixins 作用范围也会在嵌套内部有效

原生导入

	//css 文件结尾
	@import "1.css";
	// url
	@import "http://localhost/1.scss"
	// url()
	@import url("1.scss")

# 注释

	// 注释类型 1，不会出现在 css 中
	/* 注释类型 2，不会出现在 css 中 */

# 混合器（@mixin, @include）

使用 @mixin 定义 mixin

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

使用 @include 引入 mixin

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

传参

	@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
	);
	}

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

# 继承选择器（@extend）

重复类，所以会比 mixin 占用体积更小！不要用在后代选择器！

	.error {
	border: 1px red;
	background-color: #fdd;
	}
	.seriousError {
	@extend .error;
	border-width: 3px;
	}

# Less

# 变量

只能定义一次，相当于常量。

	@nice-blue: #5B83AD;
	@light-blue: @nice-blue + #111;

	#header {
	color: @light-color;
	}

# 变量插值

选择器

	// 变量
	@mySelector: banner;

	// 插值
	.@{mySelector}: {
	font-weight: bold;
	line-height: 40px;
	margin: 0 auto;
	}

URLs

	// 变量
	@images: "../images";

	// 插值
	body {
	background: url("@{images}/bg.jpg");
	}

Import 语句

	// 变量
	@themes: "../themes";

	// 插值
	@import "@{themes}/variables.less";

属性

	// 变量
	@property: color;

	// 插值
	.widget {
	@{property}: blue;
	backgroud-@{property}: white;
	}

变量名

# 懒加载

可以先使用变量，再定义！

# 默认变量

变量可以重载，加上懒加载，所以以下代码运行良好。

	// library.less
	@base-color: green;
	@dark-color: darken(@base-color, 10%);

	// use of library
	@import “library.less”;
	@base-color: blue;

# extend 继承

	.nav ul {
	&: extend(.inline);
	background: blue;
	}
	.inline {
	color: red;
	}

输出

	.nav ul {
	background: blue;
	}
	.inline,
	.nav ul {
	color: red;
	}

# Sass

# 文件后缀区别

# 使用变量（$）

# 嵌套

# 导入（@import）

# 注释

# 混合器（@mixin, @include）

# 继承选择器（@extend）

# Less

# 变量

# 变量插值

# 懒加载

# 默认变量

# extend 继承

CSS介绍

NLP基本概念