SASS

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*

 

 

 

 

 

 

转载于:https://www.cnblogs.com/alicezq/p/4967040.html