Sass的嵌套

最新推荐文章于 2024-02-07 19:27:07 发布

BraveWangDev

最新推荐文章于 2024-02-07 19:27:07 发布

阅读量1.1k

点赞数 2

分类专栏：【完结】Sass基础知识与应用文章标签： sass

本文链接：https://blog.csdn.net/ABAP_Brave/article/details/54728968

版权

【完结】Sass基础知识与应用专栏收录该内容

12 篇文章 1 订阅

订阅专栏

前边大概说了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:
修改错别字 : 自合->组合

BraveWangDev

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
Sass的嵌套

前边大概说了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"
复制链接

扫一扫