强化CSS 的辅助工具-SCSS的魅力初体验

一. 初识SCSS

在SCSS的官方网站上,他自身的定义是:SCSS 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,

什么意思呢?其实就是在CSS的基础上添加了一些新的功能,简单理解就是强化了CSS的一款工具而已,增加了一些新的语法,让使用更加方便,功能更加强大。

二. 真假SCSS

我们经常听到SCSS和SASS,总会混淆 二者,感觉二者并没有什么太大的区别,或者完全是一样的?那么他们到底是什么,有什么区别?

其实,SASS有两种语法格式。

SCSS是其中一种,这种是在CSS3语法的基础上进行拓展,所以所有的CSS3语法在SCSS中都是通用的,当然CSS的大多数的写法也是支持的,就算是早期的IE滤镜写法也支持,而这种格式以.scss作为拓展名。

另外一种就是被叫做缩进格式,也就是最早的SASS,这是一种简称,是一种简化格式,它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性,这样做比 SCSS 更容易阅读,书写也更快速。当然缩进格式也可以使用 SASS 的全部功能,只是与 SCSS 相比是用的不同的表达方式在某些地方。

所以我们现在通常说的一般都是SCSS。

三. SCSS强大之处

我们说到SCSS增加了很多的功能,这也是SCSS的魅力所在,那么我们今天就简单了解一下SCSS强大的拓展功能有哪些吧。

1. 嵌套规则

我们CSS是不能嵌套的,但是SCSS允许实现嵌套的,内层的样式将他外层的选择器作为父选择器。也就是说:

.parent{

color:red;

.children{

line-height: 40px;

}

}

代表的CSS代码就是:

.parent{

color:red;

}

.parent .children{

line-height: 40px;

}

可以看出通过嵌套功能我们能让我们的代码结果更加清晰,CSS结构更加容易管理,且避免了重复输入父选择器。

2. 父选择器 &

在我们使用嵌套规则的时候,我们使用是很方便的,但是遇到要选择父选择器的时候,应该怎么办?比如当给某个元素设置hover样式的时候。

也就是说使用如下:

.parent{

color:red;

&:hover .children{

background: pink;

}

}

代表的CSS代码,就是如下的形式:

.parent{

color:red;

}

.parent:hover .children{

background: pink;

}

转化后的 CSS 文件中 & 将被替换成嵌套外层的父选择器。但是如果含有多层嵌套,那么最外层的父选择器会一层一层向下传递:

3. 属性嵌套

我们经常见到很多的属性有相同的前缀,比如文本属性,font-family, font-size, font-weight 都以 font 作为属性的前缀,为了方便我们使用,SASS允许将属性嵌套在命名空间中。

例如:

.example {

font: {

family: “微软雅黑”;

size: 30px;

weight: bold;

}

}

代表的CSS代码就是:

.example {

font-family: “微软雅黑”;

font-size: 30px;

font-weight: bold;

}

4. 占位符选择器 %foo

大家对于占位符选择器一定很陌生,但是大家一定听过id选择器,说类选择器,他们的写法分别是# 或者. ,那么其实占位符选择器也就是一个符号而已,%代表的就是我们占位符选择器,但是他必须通过@extend指令调用。

但是具体的用法大家现在可以不用管,我们后期会更加详细给大家讲解,现在大家只用记住当占位符选择器单独使用的时候,是不会编译到CSS文件中。

四. SCSS魅力提炼

感受之后,有没有觉得我们的SCSS非常的简单,是我们懒人必备神器,且结构更加清晰,理解更加容易?那么总的来说,SCSS美在如下几点:

1. SCSS可以自定义输出格式。

2. 完全兼容CSS3,在CSS基础上增加了变量、嵌套、混合等功能。

3. 提供了控制指令。

4. 通过函数可以进行颜色值与属性值的运算。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180502A0SXY200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券