sass技术是Syntactically Awesome Stylesheete Sass的缩写,Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易。

1.sass有两种后缀名.sass.scss一般习惯于使用.scss

//文件后缀名为sass的语法 body background: #eee font-size:

              12px p background: #0982c1

//文件后缀名为scss的语法   body { background: #eee; font-size:12px; }

               p{ background: #0982c1; }

 

scss变量:$变量名

eg:$color:blue;

     p{color:$color;}

!default:在模块化中,运用别人的模块scss,就可以使用$color:blue !default;

特殊变量:#$变量名

eg:    $direct:top;

       .border-#$direct{border-top:1px solid red;}

编译后css:  border-top{border-top:1px solid red;}

多值变量:通过nth($变量名,第几个)函数取值

$num:1px 2px 3px 2px;

div{padding:$num; margin,:nth($num,键);

$map:(a1:10em,a2:15em,a3:20em);

body{width:map_get($map,a1);}

 

选择器嵌套

#top_nav{ line-height: 40px;

      text-transform: capitalize;

        background-color:#333;

        li{ float:left; }

       a{ display: block; padding: 0 10px; color: #fff;

     &:hover{ color:#ddd; } } }

 

属性嵌套:

.fakeshadow {

    border: { style: solid;

      left: { width: 4px; color: #888; }

   right: { width: 2px; color: #ccc; } } }

 

 

*参考资料http://www.w3cplus.com/sassguide/syntax.html*

 

 

 

 

 

 

posted on 2015-11-15 18:43  相约梦想  阅读(200)  评论(0编辑  收藏  举报