一文学会sass常用语法

前言

项目一直用的scss,但是一直没有好好学些sass的用法,一直用的只有定义变量和选择器嵌套等寥寥几个功能(捂脸).后来仔细看了一下sass中文网,感觉自己错过了一个世界…

用法

1.其中一些简单的用法

• 使用 $定义变量;
• 选择器嵌套包括使用&表示元素本身;

2.一些平时会用到的用法

2.1 属性嵌套

带有相同前缀的css属性可以用嵌套的规则书写

.text-item{
	font:{
		size:30px;
		weight:bold;
	}
	text:{
		align:center;
		indent:2em;
	}
}

// 也可以给前缀本身添加属性
.text-container{
	font:12px/24px {
		weight:600;
	}
}

2.2 插值语句

使用${}可以在选择器或属性名中使用变量
例如

$textVar:item
$widthName:width
.text-#{$textVar}{
	#{$widthName}:10px;
}

在属性值也可以使用#{},但是没有直接使用变量方便,但是可以用在一些特殊的场合,如阻止数值运算等.

2.3 数值运算

包括(+, -, *, /, %)

.text-item{
	margin-left:10px+2px;
}

编译为

.text-item{
	margin-left:12px
}

由于/本身在css中就有含义,因为只有以下几种情况/会被当做除法进行处理

1. 值是算数表达式的一部分,如1px+10px/2px;
2. 运算表达式用()包裹,如 (10px/2px) ;
3. 运算表达式中使用了变量,如$width/2

如果使用了变量,但是仍然希望不进行运算处理,可以使用#{},如
#{$width} / 2
#{$width} / #{$num}

2.4 @media

@meida在原来css的功能上扩展了可以在选择器中嵌套书写@media,不会打乱正常的书写流程

$mediaDevice :screen;

.text-item{
  width:10px;
  @media #{$mediaDevice}{
    width:20px;
  }
}

编译后

.text-item {
  width: 10px;
}
@media screen {
  .text-item {
    width: 20px;
  }
}

2.5 @extend

@extend可以在一个选择器上延伸拓展出其他选择器的样式
例如

.text1{
  color:red;
  width:100px;
  height:100px;
}
.text2{
  color:blue;
}
.text-item{
  @extend .text1,.text2;
  line-height:20px;
}

编译为

.text1, .text-item {
  color: red;
  width: 100px;
  height: 100px;
}

.text2, .text-item {
  color: blue;
}

.text-item {
  line-height: 20px;
}

有时候,我们有些样式是专门为了@extend使用的,为了不增加编译之后代码的体积,可以用%selector表示

%text{
  font:12px/24px;
}
.text-item{
  @extend %text;
  width:20px;
}

编译后

.text-item {
  font: 12px/24px;
}

.text-item {
  width: 20px;
}

如果在@media中使用@extend,需要注意些东西,@extend的选择器,必须也在同样的@media中,但是允许分开写

/* 可以 */
@media screen{
  %text{
    font:12px/24px;
  }
  .text-item{
    @extend %text;
    width:20px;
  }
}

/* 报错 */
%text{
    font:12px/24px;
  }
@media screen{ 
  .text-item{
    @extend %text;
    width:20px;
  }
}

/* 可以 */
@media screen{
  %text{
    font:12px/24px;
  }
}
@media screen{
  .text-item{
    @extend %text;
    width:20px;
  }
}

2.6 控制指令

1.@if
@if指令后接一个判断表达式,如果表达式不为false或者null,则编译后面的{}中的内容

$text:text1;
.text-item{
  @if $text==text {border:1px solid red}
  @else if $text==text1 {border:1px solid green}
  @else {border:1px solid blue}
}

编译为

.text-item {
  border: 1px solid green;
}

2.@for
@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动,使用格式

@for $var from < start > through < end > : 包含start和end
@for $var from < start > to < end > : 包含start,不包含end
例如

@for $i from 1 through 3{
  $num:$i*4;
  .m-t-#{$num}{
    margin-top:#{$num}px;
  }
}

编译

.m-t-4 {
  margin-top: 4px;
}
.m-t-8 {
  margin-top: 8px;
}
/* 如果将through改为to,将不包含下面样式 */
.m-t-12 {
  margin-top: 12px;
}

3.@each
@each 可以用于列表的循环输出,表达式为 @each $i in < List >,如下

$animals:bird,dog,cat;
@each $item in $animals{
  .item-#{$item}{
    background:url($item);
  }
}

编译之后

.item-bird {
  background: url(bird);
}
.item-dog {
  background: url(dog);
}
.item-cat {
  background: url(cat);
}

也可以一次循环多个list,循环规则如下

@each $item,$index in (bird,1),(dog,2){
  .item-#{$index}{
    background:url($item);
  }
}

也可以循环maplist

$mapList:(1:dog,2:cat,3:bird);
@each $index,$item in $mapList{
  .item-#{$index}{
    background:url($item);
  }
}

2.7 混合指令

1.mixin
可以使用mixin定义重复使用的样式,避免重复操作,使用是通过@include引入,用法如下,支持大部分sass语法

@mixin errText{
  color:red;
  text-decoration:underline;
}
.text-item{
  @include errText;
}

/* 编译之后 */
.text-item {
  color:red;
  text-decoration:underline;
}

2.参数传入
很好理解,就是在使用@include引用的时候通过传入特定的参数,生成相应的样式

@mixin btnStyle($color,$width,$lineHeight){
  color:$color;
  width:$width;
  line-height:$lineHeight;
};
.text-btn{
  @include btnStyle(blue,100px,20px)
}
/* 编译之后 */
.text-btn {
  color: blue;
  width: 100px;
  line-height: 20px;
}

当然了,在mixin上可以使用默认值(使用默认值的参数最好放在参数的后面)

@mixin btnStyle($color:red,$width:200px,$lineHeight:20px){
  color:$color;
  width:$width;
  line-height:$lineHeight;
};
.text-btn{
  @include btnStyle()
}
/* 编译之后 */
.text-btn {
  color: red;
  width: 200px;
  line-height: 20px;
}

也可以使用指定变量来传参

@mixin btnStyle($color:red,$width:200px,$lineHeight:20px){
  color:$color;
  width:$width;
  line-height:$lineHeight;
};
.text-btn{
  @include btnStyle($color:green)
}
/* 编译之后 */
.text-btn {
  color: green;
  width: 200px;
  line-height: 20px;
}

如果存在未知数量的参数,如box-shadow的参数,可以使用参数变量...的定义方式,表示将传入的参数作为list处理,这里跟ES6中的扩展运算符...很像.

@mixin boxShadow($shadow...){
  box-shadow:$shadow;
}
.text-item{
  @include boxShadow(0px 4px 5px #666, 2px 6px 10px #999)
}
/* 编译之后 */
.text-item {
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

也可以使用...使变量展开

@mixin btnStyle($color,$width,$height){
  color:$color;
  width:$width;
  height:$height;
}
$style:(red,100px,200px);
.text-btn{
  @include btnStyle($style...);
}
/* 编译之后 */
.text-btn {
  color: red;
  width: 100px;
  height: 200px;
}

2.8 函数

函数的存在是为了减少重复的表达式运算,函数的定义方式如下,参数的使用方法和mixin一样

@function functionName($var1...){
	@return 表达式	
}

用法如下

@function getNum($num){
  @return $num*2/5*10
}
.text-item{
  width:#{getNum(0.1)}px;
}
/* 编译之后 */
.text-item {
  width: 0.4px;
}

总结

sass中的功能还有很多,这里仅仅筛选出几种常用的语法,具体更多的还请参考
sass中文文档