sass学习

最新推荐文章于 2023-07-17 02:05:45 发布

??or??

最新推荐文章于 2023-07-17 02:05:45 发布

阅读量142

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zhangyr_student/article/details/82417771

版权

前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

sass和css基本一样，增加了一些继承和函数写法

1.变量声明和引用

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

2.嵌套css

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

（1）对于：hover这种前面需要加&

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

（2）使用IE浏览器时，你会通过JavaScript在<body>标签上添加一个ie的类名

#content aside {
  color: red;
  body.ie & { color: green }
}

/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

3.群组选择器的嵌套

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

4.组合选择器的嵌套

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

5.导入sass

@import 'color'

6.继承：何时使用继承

你可以为这两个类分别写相同的样式，但是如果有大量的重复怎么办？使用sass时，我们提倡的就是不要做重复的工作。
你可以使用一个选择器组（比如说.error.seriousError）给这两个选择器写相同的样式。如果.error的所有样式都在同一个地方，这种做法很好，但是如果是分散在样式表的不同地方呢？再这样做就困难多了。
你可以使用一个混合器为这两个类提供相同的样式，但当.error的样式修饰遍布样式表中各处时，这种做法面临着跟使用选择器组一样的问题。这两个类也不是恰好有相同的样式。你应该更清晰地表达这种关系。
综上所述你应该使用@extend。让.seriousError从.error继承样式，使两者之间的关系非常清晰。更重要的是无论你在样式表的哪里使用.error.seriousError都会继承其中的样式。

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

??or??

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
sass学习

sass和css基本一样，增加了一些继承和函数写法1.变量声明和引用$nav-color: #F90;nav { $width: 100px; width: $width; color: $nav-color;}2.嵌套css#content { article { h1 { color: #333 } p { margin-bottom:...
复制链接

扫一扫

专栏目录