发表于： 2019-03-28 23:08:31
1 825
今天完成的任务
基本完成了任务13 遇到的问题 无
关于博客上很多人不赞成使用选择器嵌套的问题
<body> <div class="container"> <div class="content"> <div class="articles"> <div class="post"> <div class="title"> <h1><a href="#">Hello World</a> </div> <div class="content"> <p></p> <ul> <li>...</li> </ul> </div> <div class="author"> <a href="#" class="display"><img src="..." /></a> <h4><a href="#">...</a></h4> <p> <a href="#">...</a> <ul> <li>...</li> </ul> </p> </div> </div> </div> </div> </div> </body>著作权归作者所有。
这段代码很多嵌套 sass编译成css后变成：
body { ... } body div.content div.container { ... } body div.content div.container div.articles { ... } body div.content div.container div.articles > div.post { ... } body div.content div.container div.articles > div.post div.title { ... } body div.content div.container div.articles > div.post div.title h1 { ... } body div.content div.container div.articles > div.post div.title h1 a { ... } body div.content div.container div.articles > div.post div.content { ... } body div.content div.container div.articles > div.post div.content p { ... } body div.content div.container div.articles > div.post div.content ul { ... } body div.content div.container div.articles > div.post div.content ul li { ... } body div.content div.container div.articles > div.post div.author { ... } body div.content div.container div.articles > div.post div.author a.display { ... } body div.content div.container div.articles > div.post div.author a.display img { ... } body div.content div.container div.articles > div.post div.author h4 { ... } body div.content div.container div.articles > div.post div.author h4 a { ... } body div.content div.container div.articles > div.post div.author p { ... } body div.content div.container div.articles > div.post div.author p a { ... } body div.content div.container div.articles > div.post div.author ul { ... } body div.content div.container div.articles > div.post div.author ul li { ... }
内容引人不适
我个人的理解 一般命名了class的元素别用嵌套了 如 类为main 下的一个元素 一般命名都为 main-child/.../...
如果用嵌套代码应该是这样
.main{
.....;
...;
.main-child{
}
}
编译成css 为 .main .main-child{.....,...,..}
而不使用嵌套我一般直接写 .main-child(...,...,)这样不仅节省了代码 语义也非常清晰啊
对与没有命名class 或者id 的元素 嵌套在sass层面上代码确实少一点 清晰一点 但是也要小心用 因为嵌套多了 生成的css代码真的很蛋疼的！！！
个人理解sass的很多东西不是拿到手就用了 应该在css的代码优化已经达到极致 在考虑css与sass的优劣 进行总结！
返回列表
评论