神刀安全网

Sass实战技巧——(一)神奇的连体符 &

本系列文章旨在开发者学习后能真正把 Sass 用起来,而不是停留在理论层面。笔者希望通过分享个人工作中总结出的多个 Sass 使用技巧来帮助大家提升 CSS 编码效率
当然由于笔者能力有限,行文难免有所疏漏或欠妥之处,望大家在下方评论指出。

& 符号sass 中的意义用编程思维来理解就是 this 的意思,如果你不懂任何编程语言也没关系,你可以理解为 & 就代表它的父级元素,更通俗的说法就像是圣旨,它下面 {} 里包起来的规则就和他它父级说的话起到同样的效果。

快速入门

Sass 代码块:

.demo {     width: 800px;     & {         background-color: red;     } }

编译后的 CSS:

/* css */  .demo {     width: 800px; } .demo {     background-color: red; }

要理解上面的 sass 代码首先我们要知道 sass 有一个嵌套规则 (如果你理解 sass 的嵌套可以略过下面示例),下面是嵌套规则示例:
Sass代码块:

.demo {     width: 800px;     .sub {  //把之前的 & 换成了 .sub         background-color: red;     } }

编译后的 CSS:

/* css */  .demo {     width: 800px; } .demo .sub {     background-color: red; }

其实嵌套就是一个选择器层级的叠加,这是 Sass 的一个特点,我们可以用 {} 包裹的方式来书写子选择器,这样的语法明显更利于开发者理解和编写。

那么现在看来前面 & 符号的用法就很容易理解了,它存在于一个父级元素之内并代表着这个父级元素。那么问题来了:

我们为什么要使用 & 符号的这个功能呢?

问得很好,这也是我们本篇文章要告诉大家的技巧。来看如下情景:

情景一

一个 ul 列表,里面是各种规格一样的图标,但是里面每个图标是不一样的,类似这样:

Sass实战技巧——(一)神奇的连体符 &

我们自然会想到在每个 li 里面设置上他们不同的 background 图片路径就好了:

/* css */  li:nth-child(1) {     background: url(images/1.jpg) no-repeat center;     background-size: cover; } li:nth-child(2) {     background: url(images/2.jpg) no-repeat center;     background-size: cover; } li:nth-child(3) {     background: url(images/3.jpg) no-repeat center;     background-size: cover; } ...

这样看起来是不是很蛋疼?

那么我们完全可以使用 sass 中 & 的特性来优雅的解决这个问题:

li {     background: no-repeat center;     background-size: cover;     &:nth-child(1) {background-image: url(images/1.jpg);}     &:nth-child(2) {background-image: url(images/1.jpg);}     &:nth-child(3) {background-image: url(images/1.jpg);}     ... }

这样看起来是不是清爽了许多?而且每一个 li 的样式都写在了一个 {} 里面,单独的图片路径整齐排列好,这简直就是处女座的福音。日后无论你要修改统一样式还是单独样式都是只要找到这一段代码块直接修改就好了。

编译出来就是这样:

/* css */  li {     background: no-repeat center;     background-size: cover; }  li:nth-child(1) {     background-image: url(images/1.jpg); }  li:nth-child(2) {     background-image: url(images/1.jpg); }  li:nth-child(3) {     background-image: url(images/1.jpg); } ...

情景二

Sass实战技巧——(一)神奇的连体符 &
设计妹纸:“前端哥哥,这里边框颜色本来是 #ccc,然后鼠标悬浮过去要变红色,图标也要高亮哦~”

然后你很容易想到:

/* css */  .boder {     width: 180px;     height: 90px;     border: 1px solid #ccc; }  .boder .icon {     background: url(images/icon.png) no-repeat 0 0; }  .boder:hover {     border: 1px solid red; }  .boder:hover .icon {     background: url(images/icon.png) no-repeat 50px 40px; }

如果 css 基础好一些的同学呢一看就知道,这是在用 css 写的一个鼠标经过时改变边框颜色和背景图位置的代码。稍微照顾一下新手,这里悬浮改变边框颜色就不用说了,而改变 background 图片的位置事实上就是改变雪碧图的位置,原理是切换图片来达到高亮效果。

这么一看这代码好像还挺和谐的,但是对一个 sasser 来说这代码真的太难以阅读了!那么我们来看看 sass 是如何优美的满足设计妹妹提出的要求:

.boder {     width: 180px;     height: 90px;     border: 1px solid #ccc;     .icon {         background: url(images/icon.png) no-repeat 0 0;     }     &:hover {         border: 1px solid red; // 悬浮时自身改变样式         .icon {             background-position: 50px 40px; // 悬浮时,子元素 .icon 改变样式         }     } }

看到了吗?一个 & 符号就把所有的 hover 样式包裹起来了,这样的代码无论写起来或读起来都是酣畅淋漓。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Sass实战技巧——(一)神奇的连体符 &

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址