05月17, 2016

【Sass-03】Sass官网文档

关于嵌套


  1. 嵌套可以帮助像命名空间一样,控制不同页面的css样式。这样就不用绞尽脑汁想不同的名字来区分类了,在嵌套里面可以取一样的名字。
  2. 在嵌套里面如果需要用到父元素,可以用&来代替,如:
    #main{
    border:1px solid #eee;
    &-sidebar{border:1px solid;}
    a{
        &:hover{color:blue;}
    }
    }
    
    #main {
    border: 1px solid #eee; }
    #main-sidebar {
    border: 1px solid; }
    #main a:hover {
    color: blue; }
    
  3. 有些css里面命名有很多重复,使用嵌套可以节省工作量:
.funny{
  font:{
    size: 15px;
    color:#fa5611;
    weight: bold;
  }
}

编译之后

.funny {
  font-size: 15px;
  font-color: #fa5611;
  font-weight: bold; }

注释


  1. /\这里可以注释长长长**/
  2. //这样的注释只是在scss中注释,在生成的css中不会出现
$comments:"haha";
/*#{$comments}.*/

编译后:

/*haha.*/

本文链接:http://fengbaiyang.cn/post/sass-03.html

-- EOF --

Comments

暂不支持评论,如有问题,请发邮件至baiyang.feng@outlook.com。 望不吝赐教~