sass(1)
发布在Sass 学习2014年4月21日view:3447
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

//声明变量,并使用

$hightlight-color:red;
header{
      $width:100px;
      width:$width;
      color:$hightlight-color;
  } 

//在一个变量中可以使用另一种变量

$hightlight-color:red;
$hightlight-border:1px $hightlight-color solid;
.selected{
border: $hightlight-border;
}

//混入,用@include 指令引入,可以先为参数设置默认值

@mixin horizontal-list($spacing:10px){
      li{
          float: left;
          margin-right: $spacing;
     }
  }
 #header ul.nav{
   @include horizontal-list(20px);
 }

//嵌套sass编写,#content会一层一层与子标签进行解析,如首先解析为#content article{};#content aside{};然后解析为#content article h1{};#content article p;#article aside{};

#content{
 article{
   h1{color:#333};
   p{margin-bottom: 1em};
 }
aside{background: #cccccc}
 }

//父选择器—-&, 例如要匹配a自身,这时需要用&来代替a本身

article a{
 color:blue;
 &:hover{color:red;}
}

//一组选择器的嵌套

//1
.container{
  h1,h2,h3{
    margin-bottom: 1em;
  }
}
//2
nav,aside{
  a{
    color:red;
  }
}

//子选择器和兄弟选择器

article{
  ~ article{border: 1px solid #ccc;}
  > section{color: blue;}
  dl>{
    dt{color: black}
    dd{color: blue}
  }
  nav + &{margin-bottom: 0;}
}

//属性嵌套

nav{
  border: {
    style: solid;
    width: 1px;
    color: #cccccc;
  };
}
评论
发表评论
暂无评论
PUBLISHED IN
Sass 学习

学习sass

友情链接 大搜车前端团队博客
我的收藏