1、声明变量
[声明变量符 变量名称 : 变量值] eg: $width300:300px;
2、变量调用
$width300:300px; //声明
.main{
width:$width300; //调用
}
3、局部变量和全局变量
定义在局部的变量不会影响其他的元素,注意:在局部变量后面加上!global
,在其声明的下面的代码才能访问到。
$width300:300px; //声明全局变量
.main{
width:$width300; //调用全局变量
}
//----------------
em{
$colorRed:red; //声明局部变量
a{
color:$colorRed; //调用局部变量
}
}
//----.box中声明了global变量,那么,在其下面的bottom样式中能够调用$colorRed,top中不能调用$colorRed2----------
span{
.top{
color:#fff
}
.box{
$colorRed2:red !global; //声明局部变量
a{
color:$colorRed2; //调用局部变量
}
}
.bottom{
color:$colorRed2;
}
}
4、嵌套
Sass 提供了选择器嵌套功能,但这也并不意味着你在 Sass 中的嵌套是无节制的,因为你嵌套的层级越深,编译出来的 CSS 代码的选择器层级将越深,不易维护。
4.1. 选择器嵌套
Sass 中还提供属性嵌套,CSS 有一些属性前缀相同,只是后缀不一样,比如:border-top/border-right
,与这个类似的还有 margin、padding、font
等属性
nav {
a {
color: red;
header & {
color:green;
}
}
}
4.2. 属性嵌套
嵌套属性的规则是这样的:把属性名从中划线-的地方断开,在根属性后边添加一个冒号:,紧跟一个{ }块,把子属性部分写在这个{ }块中。
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
//-------------------
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
// 对于属性的缩写形式,你甚至可以像下边这样来嵌套,指明例外规则
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
4.3. 伪类嵌套
借助 & ,“&”——父选择器: 符号通常用来代替父元素选择器。
span{
color:red;
}
span:hover{
color:green;
}
//------------------
span{
color:red;
&:hover{
color:green;
}
}
5、混合器
如果页面中有几处样式类似,比如字体颜色,在scss中就可以使用变量来统一处理。
5.1. 声明
使用 “@mixin” 声明一个混合器。
5.1.1 不带参数的混合器
@mixin border-radius{
-webkit-border-radius: 5px;
border-radius: 5px;
}
5.1.2 带参数的混合器
@mixin border-radius($radius:5px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
5.2. 调用
在 Sass 中通过 @mixin 关键词声明了一个混合器,其匹配了一个关键词“ @include ”来调用声明好的混合器。
// 声明
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
//调用
button {
@include border-radius;
}
5.3. 混合器的参数
5.3.1 传一个不带值的参数
// 传一个不带值的参数时,则会在调用的时候可以给这个混合器传一个参数值
@mixin border-radius($radius){
-webkit-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(3px);
}
5.3.2 传一个带值的参数
给参数赋值了一个初始值。
@mixin border-radius($radius:3px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
// 如果其中一个地方不一样则可以指定给混合器传值
.box {
@include border-radius(10px);
}
5.3.3 混合器的不足
生成冗余的代码块。
6、继承
scss中是通过关键词 “@extends” 来继承已存在的类样式。
.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;
}
7、占位符 %placeholder
通过 @extend 调用的占位符,编译出来的代码会将相同的代码合并在一起,提高编译速度,优化网站。
// SCSS
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
8、计算、
在css中通常使用calc()来进行数值计算,在scss中则不用。不仅可以对数值进行计算,颜色也可以。
width: 100px + 100px + 100px; //加法
width: 100px - 100px + 100px; //减法
width: 100px * 100 //乘法,注scss的乘法和除法是带单位的
width: (100px/3) //注意这里需要带括号,如果不带括号会当场分割数值
width: $width / 3 //也可以不带括号,但是里面计算的一定要有声明的变量,因为这个语法css不认识,那么就会被解析成SCSS
width: 100 % 3px //SCSS也支持取模运算
$red:#ff0000;
p{
color : $red + #888; //#ff8888
}
div{
color :$red + #111; //#ff1111
}