lorraine

什么是SASS?

By: lorraine 2019-03-17 149 views

CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

 

通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性。

 

优点:    

 可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。

SASS变量: sass的变量必须是$开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样),如果值后面加上!default则表示默认值。

 

普通变量:定义之后可以在全局范围内使用。

默认变量:sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可。默认变量的价值在进行组件化开发的时候会非常有用。

特殊变量:一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

多值变量 :

多值变量分为list类型和map类型,简单来说list类型有点像js中的数组,而map类型有点像js中的对象。

1. list数据:

可通过空格,逗号或小括号分隔多个值,可用nth($var,$index)取值

 

2.map数据:

以key和value成对出现,其中value又可以是list。可通过map-get($map,$key)取值

全局变量:

在变量值后面加上!global即为全局变量。目前变量机制 :在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)

sass的嵌套(Nesting)包括两种:一种是选择器的嵌套;另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

优点:增强了sass文件的结构性和可读性。在选择器嵌套中,可以使用&表示父元素选择器

混合(Mixin):

sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin通过@include来调用。

@content:

可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式,接受的样式从@content开始。

继承:@extend,后面紧跟继承的选择器。

占位选择器%:

这种选择器的优势在于:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了@extend去继承相应的样式,都会解析出来所有的样式。占位选择器以%标识定义,通过@extend调用。

SASS中的函数:

以@fuction开始。实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以lighten减淡和darken加深为最,其调用方法为lighten($color,$amount)和darken($color,$amount),它们的第一个参数都是颜色值,第二个参数都是百分比。

条件判断以及循环:@if···@else···

for循环:

@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示变量,start表示起始值,end表示结束值,这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。

@each循环:

SASS编译方法:自动化编译、 GUI编译、命令编译自动化编译是最简单常用的方法;但是有一个缺点:命令只能一次性编译。每次保存“.scss”文件之后,都得重新执行一次命令。所以编译 Sass 时,开启“watch”功能,这样只要你的代码进行任保修改,都能自动监测到代码的变化,并且给你直接编译出来:例如:sass  –watch   +要编译的文件路径   : 编译好的文件路径

 

本篇文章来源于微信公众号: 印象IT

印象资源网- 版权声明©
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长进行删除!
2. 本站提供教程视频、源码、模板、插件等等其他资源,需要技术服务可以联系管理员。
3. 如有链接无法下载、失效或广告,请联系管理员处理!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需,请大家谅解,谢谢。
5.联系客服邮箱(1):810023272@qq.com
联系客服邮箱(2):578561952@qq.com
6.联系客服QQ:点击我和交流
印象资源网 » 什么是SASS?

发表评论

提供最优质的资源集合

了解详情