sass 基础认识

标签：

/** 很多知识，当你在学习的时候都会了，可是再过段时间就全忘了。好记性不如烂笔头。从长远来看，记录很重要。从学习速度来看，不记当然学得快，但忘得也快 **/

sass的变量也是有作用域的，定义在规则块内的，只能在规则块内使用。

凡是CSS标准值存在的地方，都可能使用sass变量。

$border: border;

div{
#{$border}-color: red; //变量如果出现在字符串中，需要用#{}包起来
}

The key to success is to start before you are ready.

1. 嵌套

#content {
article {
h1 { color: gray; }
p { margin-bottom: 1px; }
}
aside { background-color: white; }
}

//生成如下的CSS规则，sass优点：避免重复写CSS选择器

#content article h1 {
color: gray;
}
#content article p {
margin-bottom: 1px;
}
#content aside {
color: red;
}

1.1 SASS父选择器 &，尤其在处理伪元素，伪类时特别有用

article a{
display: block;

&:hover{ color: red; }
}

article a {
display: block;
}
article a:hover {
color: red;
}

父选择器还有另外一种用法，可以在其之前添加选择器

#content aside{
color: red;
body.ie & { color: green; }
}

#content aside {
color: red;
}
body.ie #content aside {
color: green;
}

1.2 群组选择器

//群组选择器
.container{
h1, h2, h3 { margin-bottom: 10px}
}

.container h1, .container h2, .container h3 {
margin-bottom: 10px;
}

//使用群组选择器要注意，不要过度使用，否则最终生成的CSS文件可能会很大，影响性能。

sass 基础认识

标签：

原文地址：http://www.cnblogs.com/elm5280/p/4279602.html