sass 基础

最新推荐文章于 2024-04-22 14:31:37 发布

夏葵sai

最新推荐文章于 2024-04-22 14:31:37 发布

阅读量250

点赞数

本文链接：https://blog.csdn.net/Sai_Hikaru/article/details/116053311

版权

scss 文件

.header {
	span {
		color: red;
		&:active {
			color: green;
		}
		&:hover {
			color: blue;
		}
	}
}

sass 文件

.header
	span
		color: red
		&:active
			color: green
		&:hover
			color: blue

sass 中使用变量，运算，函数

$small-font: 14px + 3px;
$text-color: #555;
$default-font: 'microsoft yahei';

.title {
	color: lighten($text-color, 20%);
	font-family: $default-font;
}
.subtitle {
	color: darken($text-color, 20%);
	font-size: $small-font;
}
.text {
	color: $text-color;
	font-size: $small-font;
}

sass 的引入

/* main.scss */
@import 'viriables';
@import 'header';
@import 'content';

/* viriable.scss */
$color: red;
$content-color: orange;
$font-size: 12px;

/* header.scss */
.header {
	color: $color;
}
/* content.scss */
.content {
	color: $content-color;
}

mixin 用法

/* _mixin.scss */
@mixin singleline-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* main.scss */
@import 'mixin';
.text {
  width: 600px;
  @include singleline-ellipsis;
}
.content-text {
  width: 1000px;
  @include singleline-ellipsis;
}

带参数

/* _mixin.scss */
@mixin singleline-ellipsis($width) {
  width: $width;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* main.scss */
@import 'mixin';
.text {
  @include singleline-ellipsis(600px);
}
.content-text {
  @include singleline-ellipsis(1000px);
}

媒体查询与 mixin

@mixin ipad {
  @media screen and (min-width: 768px) {
    @content;
  }
}

.header {
  width: 1000px;
  @include ipad {
    width: 500px;
  }
}
.footer {
  color: red;
  @include ipad {
    color: blue;
  }
}