1.安装 http://www.w3cplus.com/sassguide/install.html
gem sources -a http://gems.ruby-china.org/
或
gem update遇到这个问题,原来是ruby没有包含SSL证书,Https的链接被服务器拒绝。
解决方法:下载证书(http://curl.haxx.se/ca/cacert.pem), 然后环境变量里设置SSL_CERT_FILE环境变量,并把value指向这个文件
3.
uby环境sass编译中文出现Syntax error: Invalid GBK character
http://www.tuicool.com/articles/f2YVRv
4.
sass --watch sass:css
nested
compact
compressed
expanded
sass --watch sass:css --style nested
.sass
3.0+ Sassy css
.scss
&:hover
&引用父选择器
嵌套:选择器嵌套,属性嵌套
例一
ul{
border: 1px solid #000;
font:{
family:Arial;
size: 19px;
weight:600;
}
}
例二
li{
border: 1px solid #ccc {
left: 0;
right: 0;
}
}
mixin
案例:
@mixin alert($text-color,$background){
color: $text-color;
background-color:$background;
a{
color: darken($text-color,10%);
}
}
.alert-warning{
@include alert(#f60,#ccc);
}
.alert-info{
@include alert($background:#333,$text-color:#fff);
}
@extend
4.数据类型
abs()
round()
ceil()
floor()
percentage(600px/1200px)
min(1,2,3)
max(1,2,3)
to-upper-case()
to-lower-case()
str-length()
str-index(,)第一个参数是要检查的字符串,第二个参数就是要判断位置的那个字符串
str-insert(,,)第一个参数是要插入字符串的字符串,第二个参数是要插入的字符串,最后还要指定一下插入的位置(字符位置,如5个字符后面,为6)
Hex,RGB,String
rgb()
rgb()
hsl()
hsla()
adjust-hue(,)第一个参数是要调整的颜色,第二个参数是要调整的度数deg
lighten()
darken()
saturate()
desaturate()
transparentize()
opacify()
list,如
bodrder:1px solid #ccc,
font:italic bold 12px/20px arial,sans-serif
padding:5px 10px,5xp 0
padding:(5px 10px) (5xp 0)
>>length(5px 10px);
2
>>nth(5px 10px,1)
5px
>>index(1px solid red,solid)
2
>>append(5px 10px,5px)
(5px 10px 5px)
>>join(5px 10px, 5px 0)
(5px 10px 5px 0)
>>join(5px 10px, 5px 0, comma)
(5px, 10px, 5px, 0)
map
map-get(,)
map-keys()
map-values()
map-has-key(,)
map-merge(,)
map-remove(,)
boolean
interpolation,#{} 例如:/*当前版本:#{$version}*/
5.控制指令
@if 条件{
}@else if 条件 {
}@else{
}
@for $var from <开始值> through <结束值>{
}
@for $var from <开始值> to <结束值>{
}
@each $var in $list {
}
@while 条件{
}
6.函数
@function 名称(参数1,参数2){
}
@warn
@error