sass 常用备忘案例详解
这篇文章主要介绍了sass 常用备忘案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
一、变量
所有变量以$开头
1 2 3 4 | $font_size: 12px ; .container{ font-size : $font_size; } |
如果变量嵌套在字符串中,需要写在#{}中
1 2 3 4 | $side : left ; .rounded { border-#{$side}: 1px solid #000 ; } |
二、嵌套
层级嵌套
1 2 3 4 5 6 | .container{ display : none ; .header{ width : 100% ; } } |
属性嵌套,注意,border后需要加上冒号:
1 2 3 4 5 | .container { border : { width : 1px ; } } |
可以通过&引用父元素,常用在各种伪类
1 2 3 4 5 | .link{ &:hover{ color : green ; } } |
三、mixin
简单理解,是可以重用的代码块,通过@include 命令
1 2 3 4 5 6 7 | // mixin @mixin focus_style { outline : none ; } div { @include focus_style; } |
编译后生成
1 2 | div { outline : none ; } |
还可指定参数、缺省值
1 2 3 4 5 6 7 8 9 10 | // 参数、缺省值 @mixin the_height($h: 200px ) { height : $h; } .box_default { @include the_height; } .box_not_default{ @include the_height( 100px ); } |
编译后生成
1 2 3 4 5 | .box_default { height : 200px ; } .box_not_default { height : 100px ; } |
四、继承
通过@extend,一个选择器可以继承另一个选择器的样式。例子如下
1 2 3 4 5 6 7 8 | // 继承 .class 1 { float : left ; } .class 2 { @extend .class 1 ; width : 200px ; } |
编译后生成
1 2 3 4 5 | .class 1 , .class 2 { float : left ; } .class 2 { width : 200px ; } |
五、运算
直接上例子
1 2 3 4 5 6 7 | .container{ position : relative ; height : ( 200px / 2 ); width : 100px + 200px ; left : 50px * 2 ; top : 50px - 10px ; } |
编译后生成
1 2 3 4 5 6 | .container { position : relative ; height : 100px ; width : 300px ; left : 100px ; top : 40px ; } |
插入文件
用@import 来插入外部文件
1 | @import "outer.scss" ; |
也可插入普通css文件
1 | @import "outer.css" ; |
自定义函数
通过@function 来自定义函数
1 2 3 4 5 6 | @function higher ($h){ @return $h * 2 ; } .container{ height : higher ( 100px ); } |
编译后输出
1 2 3 | .container { height : 200px ; } |
注释
两种风格的注释
1 | // 单行注释,编译后消失 |
1 | /* 标准的CSS注释,会保留到编译后的代码中 */ |
如果重要的注释,压缩编译后还想保留,可在 /* 后面加上 !
1 2 3 | /*! 重要注释,压缩编译也不会消失 */ |
参考:
http://www.ruanyifeng.com/blog/2012/06/sass.html
到此这篇关于sass 常用备忘案例详解的文章就介绍到这了
原文链接:https://www.cnblogs.com/chyingp/p/sass-basic.html