SASS预处理语言总结

问题:

问:css 预处理器:
定义一种新的语言将css作为目标生成文件 然后开发者就只要使用这种语言进行编码工作

问:如果最终生成的是css代码 那么为何不直接写css:
1.大型项目 复杂的css文件和模块 不太好维护
2.写多套css麻烦(比如皮肤切换的功能,利用sass可以使用变量和函数写一套就行)

问:为什么使用sass:
使用变量函数
自动装换rgba颜色值
忘记浏览器前缀
嵌套规则
media query更简单
自动压缩css

问:命令行创建工程
直接创建 xxx.scss
compass create 项目名

问:命令行编译sass
sass src.scss dst.css
sass --watch src.scss:dst.css
compass compile
compass watch
compass watch -force -s compact

问:输出风格
nested expanded compact compressed 四种
问:compass配置文件
config.rb

问:支持中文注释
Encoding.default_external = Encoding.find(‘utf-8’)

手册文档

Sass 是一个 CSS 的扩展，它在 CSS 语法的基础上，允许您使用变量 (variables), 嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports)等功能，令 CSS 更加强大与优雅。使用 Sass 以及 Compass 样式库有助于更好地组织管理样式文件，以及更高效地开发项目。

总结:(具体用法请参考手册,这里只做快速查找)

数据类型 (Data Types)(7 种主要的数据类型)参考

• 数字 (例如： 1.2, 13, 10px)
• 文本字符串，带引号字符串和不带引号字符串(例如：“foo”, ‘bar’, baz)
• 颜色 (例如：blue, #04a3f9, rgba(255, 0, 0, 0.5))
• 布尔值 (例如： true, false)
• 空值 (例如： null)
• 值列表 (list)，用空格或逗号分隔 (例如： 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
• maps ，从一个值映射到另一个 (例如： (key1: value1, key2: value2))

//$i -->变量以美元符号开始，赋值像设置CSS属性那样
ex1:
$width: 5em;
你可以在属性中引用他们:
#main {
  width: $width;
}

//#{$i} -->{}外,字符串中要使用变量,就用这样用格式

// !global --> 在这种情况下，变量在任何地方可见(可以理解为全局变量)
ex1:
#main {
  $width: 5em !global;
      width: $width;
}
#sidebar {
  width: $width;
}
编译为：
#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}
// !default --> 如果已经赋值，那么它不会被重新赋值,如果它尚未赋值，
那么它会被赋予新的给定值。如果变量是 null 值时，将视为未赋值
ex1:
$content: "First content";
    $content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
  content: $content;
      new-content: $new_content;
}
编译为：
#main {
  content: "First content";
  new-content: "First time reference"; }

ex2:
$content: null;
    $content: "Non-null content" !default;
#main {
  content: $content;
}
编译为：
#main {
  content: "Non-null content"; }
  
//@import -->  原生和sass中的区别

// - _ -->在变量中没区别  由于历史原因，变量名（以及其他所有Sass标识符）可以互换
连字符（注：-）和下划线（注：_）
例如，如果你定义了一个名为 $main-width，您可以使用 $main_width访问它，反之亦然。

// $at-root --> 跳出


//嵌套属性
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
编译为：
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }
命名空间也可以有自己的属性值。例如：
.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}
编译为：
.funky {
  font: 20px/24px fantasy;
    font-weight: bold;
}


// & -->引用引用父选择器
ex1:
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}
编译为：
a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }


// % -->占位
// @extend -->继承
// @mixin -->片段
// @include -->引入片段
//@media -->有点特殊

//运算符 == != > < + - * / %

// @function getzIndex() {} -->函数
//@if 条件 {} --> 分支结构
//@else if 条件 {} --> 分支结构
//@else {} --> 分支结构
//@for $i from 1 through 5 {} --> 循环结构
//@for $i from 1 to 5 {} -->  不包含5
//@while 条件 {} --> 循环结构
//@each $i in x,x,x {} --> 遍历
//@each $i,$j in (x,y),(x,y),(x,y) {}
//@each $k,$v in (k:v,k:v,k:v) {}

基本使用

@import "_part1.scss";
@import "part1";

//css原生导入
@import "part1.css";

$font-size:12px;
$font-size:14px !default;
$paddings: 3px 10px 5px 10px;
$maps:(color:red,bordercolor:blue);
$className:main;
body{
	$color:red !global;
	color:$color;
	font-size:$font-size;
	padding:$paddings;
	padding-left:nth($paddings,1);
}
footer{
	// $color:green;
	color:$color;
	background:map-get($maps,color);
	border-color:map-get($maps,bordercolor);
}

.#{$className}{
	width:50px;
	height:50px;
}

$text-info:lightgreen;
$text_info:red;
.text-info{
	color:$text-info;
	background:$text_info;
}

函数和编程语言的函数区别:

@function buildLayout($num:5){
	$map:(defaultValue:0);
	$rate: percentage(1 / $num);
	@for $i from 1 through $num{
		$tmpMap:(col#{$i}:$rate * $i);
		$map:map-merge($map,$tmpMap);
	}
	$map:map-remove($map,defaultValue);
	@return $map;
}

// @debug buildLayout();
@mixin buildLayout($num:5){
	$map:buildLayout($num);
	@each $key,$value in $map{
		.#{$key}{
			width:$value;
		}
	}
}

@include buildLayout($num:5);

//sass的函数是不能直接生成样式到css文件里面的(就是不能单独调用,调用的时候要赋给
一个变量或者@debug输出到后台),因为sass文件里面本来就是样式+语法然后转换解析成
css,所以只有样式区域才能直接到css,其他都要经过解析. css里面是没有条件控制这些
逻辑的(有一点点状态逻辑所以才有动画),所以我们要写样式,css才能有东西.而片段和继
承只是为了让样式重复利用.
//这个和我们平常用的那些语言不同,平常语言的函数是可以直接调用输出东西的,因为两种
语言本身的角度就不同,输出的地方也不同,造成了这种用法思维的区别

//例如:
// body{
// 	@function a(){
// 		@return 'width:1';
// 	}
// 	// width:a();//理所当然成功
// 	a();//报错
// }


@function getzIndex($layer:default){
	$zindexMap:(default:1,modal:1000,dropdown:500,grid:300);
	$zindex:1;
	@if map-has-key($zindexMap,$layer){
		$zindex:map-get($zindexMap,$layer)
	}
	@return $zindex;
}

@debug getzIndex('modal1');