sass在线编译—-学习用
变量
声明变量
默认变量
在默认变量之前重新声明下变量会覆盖默认变量。在进行组件化开发的时候会非常有用。
$baseLineHeight:1.5 !default;
局部变量和全局变量
//SCSS
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
color: $color;//调用全局变量
}
em {
$color: red;//定义局部变量
a {
color: $color;//调用局部变量
}
}
span {
color: $color;//调用全局变量
}
嵌套
选择器嵌套
css
nav a {
color:red;
}
header nav a {
color:green;
}
对于sass
nav {
a {
color: red;
header & {
color:green;
}
}
} //& 代表嵌套规则外层的父选择器,这里代表nav。
属性嵌套
css
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
sass
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
伪类嵌套
css
.box:before {
content: "伪元素嵌套";
}
sass
.box{
&:before {
content:"伪元素嵌套";
}
}
混合宏
简单理解就是,可以重用的代码块。
声明
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
调用
button {
@include border-radius;
}
传参
这是ass 的混合宏强大的地方
@mixin border-radius($radius: 10px){
-webkit-border-radius: $radius;
border-radius: $radius;
} //10px是默认值(缺省值)
.box {
@include border-radius(3px);
}
继承
关键词 @extend
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
占位符 %placeholder
%placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。
%mt5 {
margin-top: 5px;
}
.btn {
@extend %mt5;
}
混合宏 VS 继承 VS 占位符
- 混合宏不会自动合并相同的样式代码,造成代码的冗余,但是它可以传参数,所以,如果代码块中涉及到变量,建议使用混合宏来创建相同的代码块。
- 继承的代码块可以合并到一起,无需用变量且有一个基类时,用继承。
- 占位符。不需要传变量时用。
插值语句 #{}
在选择器或属性名中使用变量:
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
可以在 @extend 中使用插值
%updated-status {
margin-top: 20px;
background: #F00;
}
.selected-status {
font-weight: bold;
}
$flag: "status";
.navigation {
@extend %updated-#{$flag};
@extend .selected-#{$flag};
}
Sass运算
运算时碰到不同类型的单位时,编译也会报错
加减乘与JS一样
除法符号/
在 CSS 中已做为一种符号使用。所以用的时候加括号
.box {
width: (100px / 2);
}
如果/
是另一个数学表达式的一部分,或者有变量参与运算的话,不加括号也可以。