sass复习 sass复习

变量声明用美刀

$blue:#1875e7; div{ color:$blue; }

变量镶嵌在字符串之中,必须写在#{}

$side:left; .rounded{ border-#{$side}:1px solid $blue; }

局部变量和全局变量即定义的位置
嵌套可以使用&表示父元素选择器
属性嵌套,注意冒号

.box{ border:{ left:1px solid #000; top:2px solid #333; bottom:2px solid #666; } }

混合宏:可以重用的代码块

@mixin fl{ float:left; } //通过使用@include来调用混合宏 .box2{ @include fl; }

占位符

%mt5 { margin-top:5px; } .blcok{ @extend %mt5; }

继承

.class1{ color:red; } .class2{ @extend .class1; }

使用运算符

$num: '1' + '1'; .box3{ top:10px+ 10px; left:10px-2px; right:100px * 2; bottom:(100px/2); //这里/除号在css中有特殊意义,需要在外面加() }

【sass复习】条件判断@if

@mixin blockOrHidden($boolean:true) { @if $boolean { display: block; } @else { display: none; } } .block1 { @include blockOrHidden; }

sass复习