sass document(1)
## sass
- sass是一种更优雅的css拓展语言,允许你使用变量,嵌套,混合,导入,
并且完全支持css的所有语法,SASS有助于样式表更好的组织,并且更小的样式表和更快的运行速度,
尤其在compass样式库的帮助下
## 特性
- 完整的css兼容
- 语言扩展包括变量,嵌套和混合
- 更多有用的函数去计算颜色和其他值
- 高级特性例如Control directive
- 好的格式 ,自定义输出形式
## SASS和SCSS的区别
- scss:
- 每一个css文件都可以看作是scss文件
- scss 了解更多的css 的hack和特殊语法
- SASS
-使用缩进缩进而不是括号来表示选择器的嵌套
- 新行使用分号分割属性
相互转换
sass 转换为 scss
- sass-convert style.sass style.scss
scss 转换为 sass
- sass-convert style.scss style.sass
css 扩展:
嵌套:nested rules:可以避免重复父选择器
#main p{
color: #000;
.red{
background-color: #FFF;
}
}
编译结果:
#main p{
color:#000;
}
#main p .read{
background-color: #FFF;
}
-------
引用父级选择器: & 将替代父级选择器出现在css中
注意:不可以直接写& 然后就不写后面的了,否则会报错
a{
color:#fff;
&:hover{
color: #000;
}
}
编译结果:
a{
color:#fff;
}
a:hover{
color:#000;
}
-------
嵌套属性:
如果一个属性的其他属性在它的命名空间中,则其他 属性可以写在这个命令空间中
.box1{
font{
size:10px;
style:normal;
}
}
编译结果:
.box1{
font-size:10px;
font-style:normal;
}
------
占位符选择器 placeholder selectors:%
使用占位符%代替#和.,编译的时候不会输出,作用是在@extend引入对应的写好的样式
%extreme{
display: none;
}
.notice{
@extend %extreme;
}
编译结果:
.notice{
display:none;
}
-------
注释comments /**/ 和//
多行注释使用/**/,编译之后的结果会保留注释
单行注释使用//,编译之后不会保留
注意:当在多行注释那边使用! ,注释将在压缩的编译模式下也是不会被删除的
/* ! this is a comments.*/
-------
SASS script
sass -i 打开Shell交互显示结果
"hello"
1px+1px+10px
#777+#777
-------
变量$
变量开始必须用$开头,然后写上属性和属性值
$width:5px;
#main{
width:$width;
}
变量也可以定义！global，将在全局使用
#main{
$width:5em !global;
width:$width;
}
变量名可以使用连接符和下划线互相替换
$main-width 等价于 $main_width
-------
数据类型
- 数字类型（1，2，3，10px）
- 字符串类型，有引号和没有引号的
- 颜色 ，（blue，#cccccc，rgba(0,0,0,0,)）
- 布尔值 （true，false）
- nulls （null）
- 列表值，用空格或则逗号分割开的 （1.5em 1em,Helvetica,Arial）
- 映射值，（key1:value1,key2:value2）
- 函数引用
- sassScript支持所有css的属性值,包括!important
-------
strings
- 编译的时候会保留对应的引号和没有引号
除了下面的这个例外使用#{} interpolation在@mixin,双引号要被当作没有引号的值传递
@mixin abc($border){
.box{
#{$border}-width:1px;
}
}
@include abc("border");
-----
列表
- 列表展示为像margin:1px 1px 1px 1px;或则font-face:Helvetica,Sans-serif
用空格或则逗号分开,单独的值 也可以被当作列表,不过列表值只有一个而已
<<<<<列表函数有很多,迟点再更新>>>>>
- 列表里面也可以包含其他列表,如果列表的值用相同的分隔符输出的话,你可以使用括号
包括里面的值,例如(1px 2px)(5px 6px),编译完成的时候用空格分割代替逗号
------
Maps(映射)
$map:(key1:value1,key2:value2)
- 映射必须用括号包括并且使用逗号分开
- <<<<<<同样的 映射也是具有很多的函数,迟点再更新>>>>>
------
color(颜色)
- 在压缩模式下的,会被编译成最小的颜色表达式,例如:#ff0000 编译会变成red
- 提示,在压缩模式.颜色最好使用字符串的颜色,避免编译时出错
-----
First Class Functions
函数返回通过使用get-function($function-name);
-----
操作符
- 所有的类型都支持相等操作符(== !==)
- 数字操作符
- 数字操作符+ - * / ,同时运算的时候保留相关的单位,单位会叠加的
- / 默认表示为除法,但是下列情况不是
- 值被作为 变量 或则被函数返回
- 值被括号包着,除非这些被列表包着并且值在里面
- 值之前被用来操作了另外一种算术表达式
p {
font: 10px/8px; // Plain CSS, no division
$width: 1000px;
width: $width/2; // Uses a variable, does division
width: round(1.5)/2; // Uses a function, does division
height: (500px/2); // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
font: (italic bold 10px/8px); // In a list, parentheses don't count
}
编译结果是：
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px; }
当使用一个变量在css连接中，需要使用#{}
p{
$font-size:12px;
$line-height:30px;
font:#{$font-size}/#{$line-height};
}
- 颜色操作符
p{
color:#000000 + #cccccc;
}
- 字符串操作符
p{
cursor: e + -resize;
}
# 变量默认值
- $new_content :"First time reference" !default;
#main{
new_content:$new_content;
}
编译结果是：
#main{
new_content:"First time reference";
}
#@import
@import 导入文件 @import "foo";
当你想导入scss文件,但是不想编译输出为css文件的时候,可以使用_下划线,_color.scss,这样可以 导入进来
但是不会被编译
# @media
.sidebar{
width:30px;
@media screen and (max-width:600px){
width:50px;
}
}
编译结果是：
.sidebar{width:30px;}
@media screen and (max-width:600px){
.sidebar{
width: 50px;
}
}
# @extend
.error1{
border-style:dotted;
}
.error{
border-width:14px;
@extend .error1;
}
编译结果是:
.error{
border-width:14px;
}
.error1,.error{
border-style:dotted;
}
注意:继承的时候,有关系的类也会被继承
.error {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion {
background-image: url("/image/hacked.png");
}
.seriousError {
@extend .error;
border-width: 3px;
}
编译结果是：
.error, .seriousError {
border: 1px #f00;
background-color: #fdd; }
.error.intrusion, .seriousError.intrusion {
background-image: url("/image/hacked.png"); }
.seriousError {
border-width: 3px; }
