首页 web前端 html教程 SASS - 霸气侧漏小红花

SASS - 霸气侧漏小红花

May 21, 2016 am 08:35 AM

文件后缀名
    sass有两种后缀名文件:一种后缀名为sass,不使用大括
    号和分号;另一种就是我们这里使用的scss文件,这种和我们
    平时写的css文件格式差不多,使用大括号和分号。而本教程中
    所说的所有sass文件都指后缀名为scss的文件。在此也建议使
    用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错

    导入
    sass的导入(@import)规则和CSS的有所不同,编译时会将@import
    的scss文件合并进来只生成一个CSS文件。但是如果你在sass
    文件中导入css文件如@import 'reset.css',那效果跟普通
    CSS导入样式文件一样,导入的css文件不会合并到编译后的文
    件中,而是以@import方式存在。
    所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的
    文件命名方法以_开头,如_mixin.scss。这种文件在导入的时
    候可以不写下划线,可写成@import "mixin"。

    注释
    sass有两种注释方式,一种是标准的css注释方式/* */,另一
    种则是//双斜杆形式的单行注释,不过这种单行注释不会被转译
    出来。
    
    双斜杆单行注释
    单行注释跟JavaScript语言中的注释一样,使用又斜杠(//)
    ,但单行注释不会输入到CSS中。
    
    变量
    sass的变量必须是$开头,后面紧跟变量名,而变量值和变量名
    之间就需要使用冒号(:)分隔开(就像CSS属性设置一样),如
    果值后面加上!default则表示默认值。

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

    多个参数mixin
    调用时可直接传入值,如@include传入参数的个数小于@mixin
    定义参数的个数,则按照顺序表示,后面不足的使用默认值,如
    不足的没有默认值则报错。除此之外还可以选择性的传入参数,
    使用参数名与值同时传入。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?

如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表单验证属性来验证用户输入?

如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

如何高效地在网页中为PNG图片添加描边效果?

< iframe>的目的是什么。 标签?使用时的安全考虑是什么? < iframe>的目的是什么。 标签?使用时的安全考虑是什么? Mar 20, 2025 pm 06:05 PM

< iframe>的目的是什么。 标签?使用时的安全考虑是什么?

使用IFRAME的安全性含义是什么?如何减轻它们? 使用IFRAME的安全性含义是什么?如何减轻它们? Mar 18, 2025 pm 02:51 PM

使用IFRAME的安全性含义是什么?如何减轻它们?

我如何使用html5< meter> 要在范围内显示数值数据的元素? 我如何使用html5< meter> 要在范围内显示数值数据的元素? Mar 12, 2025 pm 04:08 PM

我如何使用html5< meter> 要在范围内显示数值数据的元素?

HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

HTML5中跨浏览器兼容性的最佳实践是什么?

我如何使用html5< time> 元素以语义表示日期和时间? 我如何使用html5< time> 元素以语义表示日期和时间? Mar 12, 2025 pm 04:05 PM

我如何使用html5< time> 元素以语义表示日期和时间?

See all articles