sass

1.安装 http://www.w3cplus.com/sassguide/install.html

2.
 gem sources --remove https://rubygems.org/
 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

原文地址:https://www.cnblogs.com/love9happy/p/5382958.html