sass语法练习解析--实例练习

暂时使用的是：Koala，监测转义
$fff: #ffffff;
$red:red;

h1{
color: $fff;
}
简单调用

#content{
color: $fff;
.con{
content: $red;
}
}
或者：
#content,#nei{
a{
color: $fff;
}
}
#content a{color: #fff; }
#nei a{color: #fff; }
嵌套（css里面嵌套要复制什么的，挺麻烦）

#content a{
color: $fff;
&:hover{
color: $red;
}
}
或者：
#content a{
color:$fff;
body.ie &{
color: $red
}
}
//当body的class为ie的时候，#content a的颜色为red颜色
&是父级标识符~

article{
~article{border-top: 1px dashed #ccc }
>section{background: #eee }
dl>{
dt{color: #333 }
dd{color: #555 }
}
nav+ & {margin-top: 0 }
}
article ~article{border-top: 1px dashed #ccc }
article>section{background: #eee }
article dl>dt{color: #333 }
article dl>dd{color: #555 }
nav+article{margin-top: 0 }

nav{
border:{
color:$fff;
style:solid;
width:1px;
}
}
编译出来后：nav{ border-style: solid; border-width: 1px; border-color: #ccc;}

还有中嵌套方法：
nav{
border:red solid 1px {
left:0px;
right:0px;
}
}
编译出来就是： nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px; }

注：sass的变量是可覆盖的，也就是说可以重复，后面的覆盖前面的

$fancybox-width: 400px !default;
defult相当于css里的!important,不过！defult是应用于变量的，且，其含义是，如果该变量已声明赋值，则无效，否则，就用这个defult的值，也就是设置变量默认值

sass支持局部导入，即是在css规则内导入：例：
a{
background:red;
color:blue;
}
上面这个是theme.scss的内容
.content{
@import "theme";
//只有在content这个类内才会使用theme.scss的样式
}
输出结果：
.content a{
background:red;
color:blue;
}

sass中导入css不会用，

sass中的注释相关：
/*这种注释编译后会显示在css中*/
//这种注释编译后只会显示在scss中而不会显示到css中

body { [b]color /* 这块注释内容不会出现在生成的css中 */: #333; padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0；}[/b]

混合器
@mixin name{
border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
}
.btn{
background:red;
@include name;
}

输出为：
.btn{
background:red;
border-radius:5px；
-webkit-border-radius:5px;
-o-border-radius:5px;
}
这种写法的话好在公用模块，以后调用起来相同样式会很轻松，不过一般是用来处理hack的
还有种技巧是：
@mixin ulPublic{
color:red;
li{
color:blue;
}
}
ul{
@include ulPublic;
}
输出是：
ul {
color: red;
}
ul li {
color: blue;
}

还有下面这种写法：
@mixin olpublic($defult,$hover,$active ){
li a{
color: $defult;
&:hover {color: $hover};
&:active {color: $active };
}
}
ol{
@include olpublic(red,yellow,green);
}
输出：
ol li a {
color: red;
}
ol li a:hover {
color: yellow;
}
ol li a:active {
color: green;
}

（感觉有了sass会快捷很多，同时也会增加模块化的概念）

下面的写法是模块化公用：
@mixin module(
$normal,
$hover: $normal,
$link: $normal
)
{
color: $normal;
&:hover{color:$hover}
&:link{color:$link}

}
.module span{
@include module(yellow);
}
输出为：
.module span {
color: yellow;
}
.module span:hover {
color: yellow;
}
.module span:link {
color: yellow;
}
统一调用

注：混合选择器不仅包含css规则，也包含选择器和选择器中的属性

继承@extend
@mixin name{
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
}
.btn{
background: $fff;
color: $fff;
border: $borderNo;
@include name;
}
.extend span{
@extend .btn;
}

会输出：
.btn, .extend span {
background: #7abbff;
color: #7abbff;
border: none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
}

继承比较高级的应用：
直接继承元素原生属性。。。（不对，只能继承自己写的）
注释：最常用的一种高级用法是继承一个

html

元素的样式。尽管默认的浏览器样式不会被继承，因为它们不属于样式表中的样式，但是你对

html

元素添加的所有样式都会被继承