Sass的嵌套

来源：互联网发布：excel建立数据库编辑：程序博客网时间：2024/05/29 08:50

前边大概说了sass的集成和使用方法,现在开始说Sass的功能

1,sass的标签嵌套

先写一个列表sass.html页面

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="style/common.css" type="text/css"></head><body>   <ul class="list">        <li>            <a href="#">dsadasdasdsadsad</a>            <span>2017-01-01</span>        </li>       <li>           <a href="#">dsadasdasdsadsad</a>           <span>2017-01-01</span>       </li>       <li>           <a href="#">dsadasdasdsadsad</a>           <span>2017-01-01</span>       </li>       <li>           <a href="#">dsadasdasdsadsad</a>           <span>2017-01-01</span>       </li>       <li>           <a href="#">dsadasdasdsadsad</a>           <span>2017-01-01</span>       </li>       <li>           <a href="#">dsadasdasdsadsad</a>           <span>2017-01-01</span>       </li>   </ul></body></html>

常规的.css样式写法

.list{}.list li{}.list li a{}.list li span{}

sass写法-嵌套式,相比纵深式的写法省去了很多重复书写,将重复的.list写在外层

.list{  li{  }  a{  }  span{  }}

我们加入一些样式,如下:
经典的列表布局,使用sass变量自动计算,实现纵向居中

li {  list-style: none; }body, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select {  margin: 0;  padding: 0; }.list{  $li_h:30px;  li{    height: $li_h;    line-height: $li_h;  }  a{    float: left;  }  //sass处理字体居中显示的计算逻辑  span{    font-size: small;    float: right;    width: 100px;    height: 12px;    background-color: yellow;    margin-top: ($li_h - 12px) / 2; //CSS3规则 前后必须有空格  }}

sass编译成.css文件后输出:

li {  list-style: none; }body, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select {  margin: 0;  padding: 0; }.list li {  height: 30px;  line-height: 30px; }.list a {  float: left; }.list span {  font-size: small;  float: right;  width: 100px;  height: 12px;  background-color: yellow;  margin-top: 9px; }

运行查看

sass

当li发生变化时,只需要修改sass变量值即可,无需重新计算间距

2,sass的属性嵌套

1,复合属性的嵌套

例如:font-style,font-weight,font-size,font-family

$ms: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;.box{  //复合样式  font:{    style: normal;    weight: bold;    size: 14px;    family: $ms;  }}

编译后

.box {  font-style: normal;  font-weight: bold;  font-size: 14px;  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif; }

2,对于更多更复杂的情况,如忽略根命名的嵌套,合并嵌套,组合嵌套的实现如下

.news{  //忽略root嵌套  @at-root    .news_title{      width: 10px;    }  // 合并嵌套  .news_content{    width: 20px;  }  //组合嵌套  &_content1{    width: 20px;    &_content2{      width: 20px;    }  }}

编译结果:

.news_title {                   // 忽略了根标签 .news  width: 10px; }.news .news_content {           // 在根节点.news下  width: 20px; }.news_content1 {                // 组合了根节点.news成为当前标签的一部分  width: 20px; }  .news_content1_content2 {     // 多层组合&值为上一层的标签名称    width: 20px; }

这样通过sass的语法,使用更少的代码实现了可配置的css样式,接下来我们还要谈一下sass的混合和继承

修改记录

20170125:
对于忽略根命名,合并,组合的嵌套,编译结果添加sass语法的注释
20170427:
修改错别字 : 自合->组合

0 0