scss用法总结

已经用了scss很久了,有时间来归纳一下。

1. 基本用法

1.1 变量

scss最普遍的用法就是变量,变量以$开头,赋值方法与css属性的写法一样:

$width = 50px
.box {
  width:$width
}

变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换成全局变量可以添加!global声明:

.box {
  $width:50px !global;
  width:$width
}
.sidebar {
  width:$width
}

编译为

.box {
  width:50px
}
.sidebar {
  width:50px
}

1.2 计算功能

所有数据均支持相等运算 == 或 != ,此外,每种数据类型也有其各自支持的运算方式

1.2.1 数字运算

scss支持数字的加减乘除、取整等运算,如果在必要会在不同单位间转换值。

.sidebar {
  width:10*(11px+2px)
}

编译后为:

.sidebar {
  width:10*(11px+2px)
}

1.2.2 颜色值运算

颜色值的运算是分段计算进行的,也就是分别计算红色,绿色。以及蓝色的值:

.sidebar {
  color:#010203 + #040506
}

计算01+04 = 05 02+05 = 07 03+06 = 09,然后编译为

.sidebar {
  color:#050709
}

1.2.3 字符串运算

+可以用于连接字符串

p {
  content: "今天吃了#{10+2}个苹果"
}

编译为

p {
  content: "今天吃了12个苹果"
}

1.2.4 布尔运算

支持布尔型的and or 以及 not 运算

1.3 嵌套

Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,例如:

div {
  width: 100px;
  .text {
   color: red
  }
  可以用 & 代表嵌套规则外层的父选择器
  &:hover {
    backgroud: blue
  }
}

1.4 注释 /* / 与 // (Comments: / */ and //)

Sass 支持标准的 CSS 多行注释 /* */,以及单行注释 //,前者会 被完整输出到编译后的 CSS 文件中,而后者则不会,例如:

/*
 * 这行注释会完整输出
 */
 .blue{
  	backgroud:blue
 }
 // 这行注释会被注释
 .red {
  	color:red
 }

2.代码的重用

2.1 继承@extend

有时候我们会为了给同一种样式,加上特殊的样式。

<div class="car my-car"></div>

这样做会带来了很多不变:比如加重维护负担,导致 bug,或者给 HTML 添加无语意的样式。使用 @extend 可以避免上述情况,告诉 Sass 将一个选择器下的所有样式继承给另一个选择器

.car {
  color:blue;
  width:20px;
  height:20px
}
.my-car{
  @extend .car;
  color:red
}

2.2 混合指令 @mixin

用于定义可重复的样式,避免了无语义的class

@mixin size($width:null,$height:null) {
  width:$width;
  height:$height
}
.box{
  @includes size(20px,10px);
  color:red
}

2.3 插入文件 @import

@import
Sass 拓展了 @import 的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

@import 'foo.scss' 

3.1 循环语句

@while指令重复输出格式值直至表达式返回结果为flase。

$i = 6
@while $i>0 {
  item-#{$i}:{width:($i+11)px}
  $i = $i - 2
}

编译后为

item-6 {
  width: 17 px;
}
item-4 {
  width: 15 px;
}
item-2 {
  width: 13 px;
}

3.2 自定义函数

scss支持自定义函数,与mixin大致相同。一个函数可以包含多个语句,需要调用@return返回结果。

$width:10px;
$height:20px;

@function getWidth($n){
  @return ($width+$height)/$n
}

#app{
  width: getWidth(2);
}

自定义函数也可以使用关键词参数,上面的例子也可以这样写:

#app{
  width: getWidth($n:2);
}

编译后为

#app{
  width: 15px;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值