sass学习笔记
Css扩展
嵌套规则
与less相同父选择器套子选择器
父选择器 &
与less相同 用于选择父元素
属性嵌套
.funky { font: { family: fantasy; size: 30em; weight: bold; } } //避免重复书写占位符选择器%foo
注释/**/ ,//
/**/会被输出 //不输出
$version: "1.2.3"; /* This CSS is generated by My Snazzy Framework version #{$version}. */ 同过这种方法在注释中加变量SassScript
变量$
用法
$width: 5em; #main { $width: 5em !global; //通过!global声明为去全局变量 width: $width; } #sidebar { width: $width; }数据类型
SassScript的6种数据类型
数字，1, 2, 13, 10px字符串，有引号字符串与无引号字符串，”foo”, ‘bar’, baz颜色，blue, #04a3f9, rgba(255,0,0,0.5)布尔型，true, false空值，null数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serifmaps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)字符串
通过#{$val}可以将原来的字符串去引号
数组
可以通过sass的方法对数组进行操作
nth可以访问数组中的每一项append在数组中添加新值@each可以便利数组中的每一项数组分组
(1px 2px) (5px 6px)运算
== ,!=可以对任何数据类型进行运算
数字运算
+,-,*,/,%<,>,<=,>=关系运算符函数
调用
p { color: hsl(0, 100%, 50%); }变量定义!default
$content: "First content"; $content: "Second content?" !default; $new_content: "First time reference" !default; #main { content: $content; new-content: $new_content; } //设置变量默认值@-Rules与指令
@import
导入文件
以下情况不会导入文件
扩展名.css扩展名http://开头文件名url()在@import上有媒体查询
@import “foo.css”; @import “foo” screen; @import “http://foo.com/bar“; @import url(foo);
会导入.sass,.scss的文件
同时导入多个文件
@import "rounded-corners", "text-shadow";分音
如果需要导入scss,但是不需要编译为css只需要在文件名前面添加下划线 ,但是导入的的时候不需要加下划线
嵌套@import
.example { color: red; } #main { @import "example"; } //css编译 #main .example { color: red; }`不能再混合指令和控制指令中嵌套@import
@media
媒体查询可以被嵌套在css中,编译时放到放到最外层
.sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; } } //编译为css .sidebar { width: 300px; } @media screen and (orientation: landscape) { .sidebar { width: 500px; } }@extend
用于继承属性
.error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; }同样可以继承伪类样式(元素的子类也可以)
.hoverlink { @extend a:hover; } .comment a.user:hover { font-weight: bold; } //css编译为 .comment a.user:hover, .comment .user.hoverlink { font-weight: bold; }多重延伸
.error { border: 1px #f00; background-color: #fdd; } .attention { font-size: 3em; background-color: #ff0; } .seriousError { @extend .error; @extend .attention; border-width: 3px; }继续延伸
.error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; } .criticalError { @extend .seriousError; position: fixed; top: 10%; bottom: 10%; left: 10%; right: 10%; } //编译成css .error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; } .criticalError { @extend .seriousError; position: fixed; top: 10%; bottom: 10%; left: 10%; right: 10%; }选择器列
#fake-links .link { @extend a; } a { color: blue; &:hover { text-decoration: underline; } } //编译成css #fake-links .link { @extend a; } a { color: blue; &:hover { text-decoration: underline; } }@extend-Only选择器 将#或.好被替换成%
不会被编译到css中 用法和id，class选择器相同
!optional
可以让在未声明 一个选择器的时候 编译器不自动生成
@extend不能延伸@media以外的选择器
输出提示
@debug
@warn
@error
判断语句
@if
当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：
p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } }@if… @else if
$type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } }@w
