翻译网站建设,网站建设公司企业模板下载,网页美工设计素材,网站推广策划方案模板文章目录 前言父选择器的标识符群组选择器的嵌套子组合选择器和同层组合选择器#xff1a;、和~嵌套属性后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;Sass和Less #x1f431;#x1f453;博主在前端领域还有很多知识和… 文章目录 前言父选择器的标识符群组选择器的嵌套子组合选择器和同层组合选择器、和~嵌套属性后言 前言 hello world欢迎来到前端的新世界 当前文章系列专栏Sass和Less 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 父选择器的标识符
一般情况下sass在解开一个嵌套规则时就会把父选择器(#content)通过一个空格连接到子选择器的前边(article和aside)形成(#content article和#content aside)。这种在CSS里边被称为后代选择器因为它选择ID为content的元素内所有命中选择器article和aside的元素。但在有些情况下你却不会希望sass使用这种后代选择器的方式生成这种连接。
最常见的一种情况是当你为链接之类的元素写:hover这种伪类时你并不希望以后代选择器的方式连接。比如说下面这种情况sass就无法正常工作:
article a {color: blue;:hover { color: red }
}这意味着color: red这条规则将会被应用到选择器article a :hoverarticle元素内链接的所有子元素在被hover时都会变成红色。这是不正确的你想把这条规则应用到超链接自身而后代选择器的方式无法帮你实现。
解决之道为使用一个特殊的sass选择器即父选择器。在使用嵌套规则时父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的符号且可以放在任何一个选择器可出现的地方比如h1放在哪它就可以放在哪。 其实就是外面父元素谁包裹着 那么就是什么
article a {color: blue;:hover { color: red }
}当包含父选择器标识符的嵌套规则被打开时它不会像后代选择器那样进行拼接而是被父选择器直接替换:
article a { color: blue }
article a:hover { color: red }在为父级选择器添加:hover等伪类时这种方式非常有用。同时父选择器标识符还有另外一种用法你可以在父选择器之前添加选择器。举例来说当用户在使用IE浏览器时你会通过JavaScript在标签上添加一个ie的类名为这种情况编写特殊的样式如下:
#content aside {color: red;body.ie { color: green }
}/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }sass在选择器嵌套上是非常智能的即使是带有父选择器的情况。当sass遇到群组选择器(由多个逗号分隔开的选择器形成)也能完美地处理这种嵌套。
群组选择器的嵌套
在CSS里边选择器h1,h2,h3会同时命中h1元素、h2元素和h3元素。与此类似.button,button会命中button元素和类名为.button的元素。这种选择器称为群组选择器。群组选择器的规则会对命中群组中任何一个选择器的元素生效。
.button, button {margin: 0;
}当看到上边这段代码时你可能还没意识到会有重复性的工作。但会很快发现——如果你需要在一个特定的容器元素内对这样一个群组选择器进行修饰情况就不同了。css的写法会让你在群组选择器中的每一个选择器前都重复一遍容器元素的选择器。
.container h1, .container h2, .container h3 { margin-bottom: .8em }非常幸运sass的嵌套特性在这种场景下也非常有用。当sass解开一个群组选择器规则内嵌的规则时它会把每一个内嵌选择器的规则都正确地解出来:
.container {h1, h2, h3 {margin-bottom: .8em}
}首先sass将.container和h1.container和h2.container和h3分别组合然后将三者重新组合成一个群组选择器生成你前边看到的普通css样式。对于内嵌在群组选择器内的嵌套规则处理方式也一样:
nav, aside {a {color: blue}
}首先sass将nav和aaside和a分别组合然后将二者重新组合成一个群组选择器:
nav a, aside a {color: blue}处理这种群组选择器规则嵌套上的强大能力正是sass在减少重复敲写方面的贡献之一。尤其在当嵌套级别达到两层甚至三层以上时与普通的css编写方式相比只写一遍群组选择器大大减少了工作量。
有利必有弊你需要特别注意群组选择器的规则嵌套生成的css。虽然sass让你的样式表看上去很小但实际生成的css却可能非常大这会降低网站的速度。
关于选择器嵌套的最后一个方面我们看看sass如何处理组合选择器比如、和~的使用。你将看到这种场景下你甚至无需使用父选择器标识符。
子组合选择器和同层组合选择器、和~
上边这三个组合选择器必须和其他选择器配合使用以指定浏览器仅选择某种特定上下文中的元素。
article section { margin: 5px }
article section { border: 1px solid #ccc }你可以用子组合选择器选择一个元素的直接子元素。上例中第一个选择器会选择article下的所有命中section选择器的元素。第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。
在下例中你可以用同层相邻组合选择器选择header元素后紧跟的p元素:
header p { font-size: 1.1em }你也可以用同层全体组合选择器~选择所有跟在article后的同层article元素不管它们之间隔了多少其他元素:
article ~ article { border-top: 1px dashed #ccc }这些组合选择器可以毫不费力地应用到sass的规则嵌套中。可以把它们放在外层选择器后边或里层选择器前边:
article {~ article { border-top: 1px dashed #ccc } section { background: #eee }dl {dt { color: #333 }dd { color: #555 }}nav { margin-top: 0 }
}sass会如你所愿地将这些嵌套规则一一解开组合在一起:
article ~ article { border-top: 1px dashed #ccc }
article footer { background: #eee }
article dl dt { color: #333 }
article dl dd { color: #555 }
nav article { margin-top: 0 }在sass中不仅仅css规则可以嵌套对属性进行嵌套也可以减少很多重复性的工作。
嵌套属性
在sass中除了CSS选择器属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕但是要反复写border-styleborder-widthborder-color以及border-*等也是非常烦人的。在sass中你只需敲写一遍border:
nav {border: {style: solid;width: 1px;color: #ccc;}
}嵌套属性的规则是这样的:把属性名从中划线-的地方断开在根属性后边添加一个冒号:紧跟一个{ }块把子属性部分写在这个{ }块中。就像css选择器嵌套一样sass会把你的子属性一一解开把根属性和子属性部分通过中划线-连接起来最后生成的效果与你手动一遍遍写的css样式一样:
nav {border-style: solid;border-width: 1px;border-color: #ccc;
}对于属性的缩写形式你甚至可以像下边这样来嵌套指明例外规则:
nav {border: 1px solid #ccc {left: 0px;right: 0px;}
}这比下边这种同等样式的写法要好:
nav {border: 1px solid #ccc;border-left: 0px;border-right: 0px;
}属性和选择器嵌套是非常伟大的特性因为它们不仅大大减少了你的编写量而且通过视觉上的缩进使你编写的样式结构更加清晰更易于阅读和开发。
即便如此随着你的样式表变得越来越大这种写法也很难保持结构清晰。有时处理这种大量样式的唯一方法就是把它们分拆到多个文件中。sass通过对css原有import规则的改进直接支持了这一特性。
后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
