Sass学习实践笔记（三）

最新推荐文章于 2024-09-13 10:53:53 发布

FED_AF

最新推荐文章于 2024-09-13 10:53:53 发布

阅读量244

点赞数

分类专栏： sass 文章标签： sass

本文链接：https://blog.csdn.net/FED_AF/article/details/106505286

版权

sass 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、@if条件判断

sass:

// @if指令根据条件返回样式块，可以配合@else if和@else一起使用。
// 假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @if...@else... 来判断传进参数的值来控制 display 的值。如下所示：
@mixin blockOrHidden($boolean: true)
	@if $boolean
		@debug "$boolean is #($boolean)"
		display: block
	@else
		@debug "$boolean is #($boolean)"
		display: none
.block
	@include blockOrHidden
.hidden
	@include blockOrHidden(false)

css:

.block {
  display: block;
}

.hidden {
  display: none;
}

/*# sourceMappingURL=style.css.map */

二、@for循环

sass:

// @for循环语句有两种语法：
// @for $i from <start> throuth <end>
// @for $i from <start> to <end>
// $i表示循环变量，start表示起始值，end表示结束值
// 两种语法的区别是through包括end，而to不包括end
@for $i from 1 through 3
	.item-#{$i}
		width: 2em * $i
@for $i from 1 to 3
	.col-#{$i}
		width: 2em * $i
$grid-prefix: span !default
$grid-width: 60px !default
$grid-gutter: 20px !default
%grid
	float: left
	margin-left: $grid-gutter / 2
	margin-right: $grid-gutter / 2
@for $i from 1 through 12
	.#{$grid-prefix}#{$i}
		width: $grid-width * $i + $grid-gutter * ($i - 1)
		@extend %grid

css:

.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

.col-1 {
  width: 2em;
}

.col-2 {
  width: 4em;
}

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.span1 {
  width: 60px;
}

.span2 {
  width: 140px;
}

.span3 {
  width: 220px;
}

.span4 {
  width: 300px;
}

.span5 {
  width: 380px;
}

.span6 {
  width: 460px;
}

.span7 {
  width: 540px;
}

.span8 {
  width: 620px;
}

.span9 {
  width: 700px;
}

.span10 {
  width: 780px;
}

.span11 {
  width: 860px;
}

.span12 {
  width: 940px;
}

/*# sourceMappingURL=style.css.map */

三、@while循环

sass:

// @while指令只要@while后面的条件为true就会执行，直到表达式值为false时停止循环。
$types: 4
$type-width: 20px
@while $types > 0
	.while-#{$types}
		width: $type-width + $types
	$types: $types - 1

css:

.while-4 {
  width: 24px;
}

.while-3 {
  width: 23px;
}

.while-2 {
  width: 22px;
}

.while-1 {
  width: 21px;
}

/*# sourceMappingURL=style.css.map */

四、@each循环

sass:

// @each循环就是去遍历一个列表，然后从列表中取出对应的值。语法格式为：
// @each $var in <list>
$list: adam john wynn mason kuroir
.author-bio
	@each $author in $list
		.photo-#{$author}
			background: url("/images/avatars/#{$author}.png") no-repeat

css:

.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat;
}
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat;
}
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat;
}
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat;
}
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat;
}

/*# sourceMappingURL=style.css.map */