sass的日常使用

Posted 2021-08-11 老张在线敲代码

sass跟css的简单对比

css

由于CSS的语法不够强大，没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面的形式反复出现，导致难以维护。而动态演示语言为CSS赋予了动态语言的特性，极大的提高了样式语言的可维护性。

sass

SASS是便是一门动态样式语言，是一款款强化CSS的辅助工具，它在CSS语法的基础上，增加了变量，嵌套，混合，导入，函数的高级功能，这些拓展使CSS更加强大与优雅，有助于更好的管理样式文件，以及更高效的开发项目。

嵌套规则

sass允许样式中父级嵌套子级，层层嵌套

.box{
	widh:100%;
	height:200px;
	.auto{
				width:1200px;
				height:200px
		}
}

变量

变量支持块级作用域，在块级作用域中声明的变量只可以在当前嵌套内使用，如果外面想要使用当前变量的时候加上!global就变成了全局变量

.box{
	widh:100%;
	$height:200px !global;
	.auto{
				width:1200px;
				height:$height
		}
}

继承 @extend

如下.box1直接继承使用.box中的宽高样式属性

.box{
width:100px;
height:100px;
}
.box1{
@extend .box;
border:1px solid red;
}

混合Mixins

mixin 可以创建要在整个网站中重复使用的CSS声明组 。甚至可以传入值让mixin 更加灵活。mixin 的一个很好的用途是复用属性前缀，属性值通过参数传递。
@include 指令可以将混入（mixin）引入到具体使用中。

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

@if的使用

假设要控制一个元素隐藏或显示，我们就可以定义一个混合组，通过 @if…@else… 来判断传进参数的值来控制 display 的值。

@mixin isShow($dis: true) {
  @if $dis {
    display: block;
  } @else {
    display: none;
  }
}

.block {
  @include isShow;
}

.hidden {
  @include iShow(false);
}

循环语句 @for

语法 @for $var from <start> through <end>
 或 
@for $var from <start> to <end>
through和to的相同点与不同点?
相同点：都包含<start>值
不同点：through包含<end>值，但to不包含<end>的值**

through循环的区间是start到end之间

@for $I from 1 through 3{
	.item-#{$I}{ width: 2em * $i; }
}
//等价于
.item-1{
	width:2em;
}
.item-2{
	width:4em;
}
.item-3{
	width:6em;
}

to循环的区间是start到end-1

@for $I from 1 through 3{
	.item-#{$I}{ width: 2em * $i; }
}
//等价于
.item-1{
	width:2em;
}
.item-2{
	width:4em;
}