//SCSS
p {
font: 10px/8px; // 純 CSS,不是除法運(yùn)算
$width: 1000px;
width: $width/2; // 使用了變量,是除法運(yùn)算
width: round(1.5)/2; // 使用了函數(shù),是除法運(yùn)算
height: (500px/2); // 使用了圓括號(hào),是除法運(yùn)算
margin-left: 5px + 8px/2px; // 使用了加(+)號(hào),是除法運(yùn)算
}
p {
font: 10px/8px; // 純 CSS,不是除法運(yùn)算
$width: 1000px;
width: $width/2; // 使用了變量,是除法運(yùn)算
width: round(1.5)/2; // 使用了函數(shù),是除法運(yùn)算
height: (500px/2); // 使用了圓括號(hào),是除法運(yùn)算
margin-left: 5px + 8px/2px; // 使用了加(+)號(hào),是除法運(yùn)算
}
2016-03-25
Sass包含6種數(shù)據(jù)類型:1)數(shù)字: 如1、2、10px;2)字符串:有引號(hào)字符串或無引號(hào)字符串,如"foo"、'bar'、baz;
3)顏色:如blue、#04a3f9、rgba(255,0,0,0.5);4)布爾型:如true、false;
5)空值:如null;6)值列表:用空格或者逗號(hào)分開,如1.5em 1em 0 2em 、Helvetica, Arial,sans-serif。
SassScript也支持其他CSS屬性值,如Unicode范圍,或!important聲明。Sass不會(huì)特殊對(duì)待這些屬性值,一律視為無引號(hào)字符串(unquoted strings)。
3)顏色:如blue、#04a3f9、rgba(255,0,0,0.5);4)布爾型:如true、false;
5)空值:如null;6)值列表:用空格或者逗號(hào)分開,如1.5em 1em 0 2em 、Helvetica, Arial,sans-serif。
SassScript也支持其他CSS屬性值,如Unicode范圍,或!important聲明。Sass不會(huì)特殊對(duì)待這些屬性值,一律視為無引號(hào)字符串(unquoted strings)。
2016-03-25
%mt5 {
margin-top: 5px;
}
.btn {
@extend %mt5;
}
margin-top: 5px;
}
.btn {
@extend %mt5;
}
2016-03-25
//SCSS
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
.btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
.btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}
2016-03-25
nav {
a {
color: red;
header & {
color:green;
}
}
}
a {
color: red;
header & {
color:green;
}
}
}
2016-03-24
$color:orange !default;
.block {
color: $color;
}
em {
$color: red;
a {
color:$color ;
}
}
.block {
color: $color;
}
em {
$color: red;
a {
color:$color ;
}
}
2016-03-24
$brand-primary:darken(#428bca,6.5%);
$btn-primary-color:#fff !default;
$btn-primary-bg:$brand-primary !default;
$btn-primary-bdr:darken($btn-primary-bg,5%)!default;
$width:400px;
.btn-primary{background-color:$btn-primary-bg;color:$btn-primary-color;border:1px solid $btn-primary-bdr;width:$width;}
$btn-primary-color:#fff !default;
$btn-primary-bg:$brand-primary !default;
$btn-primary-bdr:darken($btn-primary-bg,5%)!default;
$width:400px;
.btn-primary{background-color:$btn-primary-bg;color:$btn-primary-color;border:1px solid $btn-primary-bdr;width:$width;}
2016-03-24
把單位提出來就不會(huì)認(rèn)為是除法
.col {
font: (5*2)px / 8px;
font: 5px*2px / 8px;
font: 5px*2 / 8px;
font: 10px/8px;
}
.col {
font: 10 px/8px;
font: 1.25px;
font: 1.25;
font: 10px/8px; }
.col {
font: (5*2)px / 8px;
font: 5px*2px / 8px;
font: 5px*2 / 8px;
font: 10px/8px;
}
.col {
font: 10 px/8px;
font: 1.25px;
font: 1.25;
font: 10px/8px; }
2016-03-17