sass笔记-2|Sass基础语法之让样式表更具条理性和可读性

CloudDeveloper 发布于2019-08-30 13:10 / 3428人阅读

摘要：这个时候小明如果仅仅引入不想改，那么就是这个值，如果他想改，就可以在任何一处重新声明这个变量，那么就会变成小明的值。

这一篇主要详述保持sass条理性和可读性的3个最基本方法——嵌套、导入和注释。

零. 变量

变量本身的作用是为了保持属性值的可维护性，把所有需要维护的属性值放在同一个地方，快速更改，处处生效，可谓售后无忧。

1.变量声明

变量用"$"符号开头进行声明，任何可以用作CSS属性值的东西都可以用作sass变量的值，单个值、空格分开的多个值、逗号分开的多个值都可以：

$primary-color: #233;
$general-border: 1px solid #ffffd;

变量一般声明在sass源代码的开头处，CSS规则块外（花括号外面），便于寻找和维护，不过有时候你也想将变量声明在规则块内，这也是没有问题的，只是这样就只能在块内使用，类似“块作用域”。

2.变量使用

凡是CSS属性的标准值可存在的地方，变量都可以使用，而且变量可以被引用在另一个变量的声明中：

$primary-color: #233;
$general-border: 1px solid $primary-color;

可能还见到过形如#{$val}这样去用变量的，用#{和}包裹，这其实是把变量看成一个表达式在用，这样的用法叫插值，这个在sass高级特性中再述。

一. 嵌套——层次

嵌套规则就像洋葱，一层一层，很有层次感，即可读性和条理性。最常见的选择器嵌套，就是一层层打开，一般被包含选择器作为包含选择器的后代选择器展开：

/*sass*/
li{
    float:left;
    a{
        color: #c33;
    }
}
/*生成的css*/
li{
    float:left;
}
li a{
    color:#c33;
}

1. 父选择器标识符&

父选择器标识符&可以放在任何一个选择器可以出现的地方，代表的就是字面意思——父选择器，为什么要有这个东西呢？因为不想无脑化被当做后代展开，最常见的比如当嵌套伪类选择器时：

li{
    float:left;
    a{
        color: #233;
        &:hover{
            color:#c33;
        }
    }
}
/*这样生成的CSS是这样的*/
li{
    float:left;
}
li a{
    color:#233;
}
/*注意这里的a选择器和伪类选择器间没有空格，&被父选择器直接替换*/
li a:hover{
    color:#c33
}

当包含父选择器标识符的嵌套规则打开时，不会简单当做后代选择器拼接，而是&被父选择器直接替换。

伪类是一种常用用法，当然这个“飙师傅”——&——也可以放在选择器后面（记得遇到&打开时不是被正常拼接，可以替换）：

#content aside{
    color:red;
    body.ie & { color:green }
}
/*输出的css是这样的*/
#content aside{
    color:red;
}
body.ie #content aside { color:green }

2. 复杂选择器嵌套

群组选择器，如h1,h2,h3{ a{...} }或者div{ h1,h2,h3{...} }，sass会正确处理，分别打开组合h1 a, h2 a, h3 a{...}，div h1, div h2, div h3{...}

子组合选择器和同层选择器：>、+和~ ，sass都会正确处理，不管它们是在选择器前还是后

3. 属性嵌套

写背景样式时写一堆background-XX很烦吧，属性嵌套可以帮你减少一些工作量。把属性名从中划线的地方断开，在根属性后边添加一个冒号，紧跟一个花括号块，把子属性写在花括号中：

div{
    background:{
        image: url(./img/233.png);
        repeat: no-repeat;
        size: contain;
    }
}

二. 导入——@import

Sass的@import和CSS的不一样。CSS的@import，只有在执行到的时候才去下载其他CSS文件，这就影响了页面加载；而Sass的@import在生成CSS文件的时候就把相关文件导入进来了。

1.sass的@import语法

Sass的@import并不需要指明被导入文件的全名，即可以省略.sass或者.scss扩展名。

此外，每个sass文件一般会被输出成CSS文件，但其实当我们用@import引入sass文件时，我们仅仅希望生成一个总体的css文件，不需要每个sass文件都被输出成css，这样的文件被称作"sass局部文件"，即不会被多带带编译输出成css，用来被引入。

Sass局部文件需要以下划线开头，当用@import引入时，不仅可以省略扩展后缀，也可以省略开头的下划线。

所以，假设我们有一个"_nav.scss"和一个"article.scss"需要引入，那么我们仅仅这么写就够了:

@import "nav"
@import "article"

而且，sass的@import命令可以写在CSS规则内，这会使生成的CSS规则直接被插入到导入的地方。你可以把@import命令看做一个宏，写在哪里，那里就被要导入的sass文件源代码替换。

2. 导入后可定制

导入机制能让你的sass根据某种依据分成几个板块（如根据不同的区域），那么导入某个sass文件，这个文件完全决定了这部分的样式，如颜色、字体、字号等。

而你想让导入后，还能修改一些值以定制自己需要的样式，比如颜色、大小等，尤其是当小明想导入你的sass文件时，可能被导入的样式设置不能很好满足他自己的需求，这个时候有两种做法：

小明在导入后，重新去声明一遍想修改的变量，并且给一个新的值，写在后面的值会覆盖前面的；

你在你的sass源文件中用!default修饰变量值从而设置变量默认值，再发布出去给别人用，如$link-color:red !default。这个时候小明如果仅仅引入不想改，那么就是这个值，如果他想改，就可以在任何一处重新声明这个变量，那么就会变成小明的值。

两种方式都要重新声明，是不是“脱裤子放屁”呢？嗯，有点这个意思！区别在于：

变量值后面用!default修饰，就有了默认值，这个变量不管在哪里被声明，就会用声明的值，这意味着，你可以在引入含有需要修改变量值的sass文件前，声明这个变量为你要的值，后面引入的文件中的值不会覆盖你声明的变量值。

3. 怎么回到CSS原生的@import机制

下面的任一情况都会导致使用CSS原生的@import机制：

被导入文件的名字以.css结尾；

被导入文件的名字是一个URL地址；

被导入文件的名字是CSS的url()值。

三. 注释——看得见和看不见

Sass的注释有两种形式，一种是来自CSS的注释风格，用*和`*`包裹，这种注释当Sass文件被编译输出css时是会输出的，

另一种注释方式是，以//开头的单行注释，这被称为静默注释，因为这样的注释在被编译输出css时是不会被输出到CSS文件中的，此外，这种注释写起来简单快捷啊。

四. 小结

保持条理性和可读性的3种基本方式，拆分不同板块的Sass文件，然后通过@import引入；嵌套选择器和属性，不但可以帮助增加层次和条理，还能减少打字量（变相减少了打字出错）；注释永远是一个好习惯。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115362.html

sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

摘要：输出的是这样的可以看到，当用继承的样式时，和也完全套用了的样式，而且你会发现，规则并没有被重复输出，而且这样的方式更符合我们对于这几个选择器的认知如果你之前用过面向对象编程的话。 Sass学习笔记持续整理中，开篇不讲怎么安装，sass是什么，这些搜索引擎会告诉你，我们从sass的作用开始讲起，知道sass用来干什么，有什么作用，我们才能相信用sass的好处，并且时时刻刻想着sass的设...

xiaolinbang 2019-08-30 13:10 评论0 收藏0
sass笔记-3|Sass基础语法之样式复用和保持简洁

摘要：区别在于，类是在中运用的，混合器是在样式表中使用的。基本用法选择器继承，用去继承一个选择器定义的所有样式。继承背后的基本实现思路背后最基本的想法是，如果继承了，那么样式表中的任何一处选择器都会用这一选择器组进行替换和打开。上一篇详述了Sass如何嵌套、导入和注释这3个基本方式来保持条理性和可读性，这一篇更进一步地阐述sass保持样式复用和简洁的方式——混合器和选择器继承——这两种方式...

SmallBoyO 2019-08-30 13:12 评论0 收藏0
Sass快速入门学习笔记

摘要：在中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。这个过程中，用了两步，每一步都是像打开俄罗斯套娃那样把里边的嵌套规则块一个个打开。与此类似，会命中元素和类名为的元素。这种选择器称为群组选择器。1. 使用变量; sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一次的属...

appetizerio 2019-04-23 13:44 评论0 收藏0
CSS、Sass、Scss，以及sass和scss的区别

摘要：即元素脱离文档流的布局，在页面的任意位置显示绝对定位脱离文档流的布局，遗留下来的空间由后面的元素填充。相对定位不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。 1、描述 CSS 指层叠样式表 (Cascading Style Sheets) Sass (Syntactically Awesome StyleSheets)，是由buby语言编写的一款css预处理...

caozhijian 2019-08-30 11:16 评论0 收藏0