scss基础教程

最新推荐文章于 2024-08-11 02:47:29 发布

vcxiaohan2

最新推荐文章于 2024-08-11 02:47:29 发布

阅读量1.8k

点赞数 1

分类专栏： scss

本文链接：https://blog.csdn.net/u011500781/article/details/52292617

版权

scss 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

细节注意：

	.a {
		$w1: 16px;
		$w2: 6px;
		top: $w1-$w2;/* 错误写法 */
		top: $w1+(-$w2);/* 正确写法 */
	}

scss编译工具：koala

示例目录结构：

文件内容详细：

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
    <title>scss</title>

    <link rel="stylesheet" href="css/app.css">
</head>
<body>
    <div class="a">
        1
        <div class="b">
            2
            <div class="d">5</div>
        </div>
        3
    </div>
    <div class="c">4</div>
<script>
</script>
</body>
</html>

variable.scss:

$bgcolor: grey;

mixin.scss:

@mixin border($color: yellow, $p: 10px) {
	display: inline-block;
	border: 2px solid $color;
	padding: $p;
}

app.scss:

/**
 * MAIN
 * app
 *
 * BASE
 * variable
 * mixin
 *
 */
@import "variable", "mixin";//调用

* {
	margin: 0;
	padding: 0;
}
div {
	@include border($color: red);
}
.a {
	padding: 5px;
	background: $bgcolor;
	.b {
		color: hsl(270, 100%, 50%);
		.d {
			font: {
				size: 30px;
				weight: bold;
				family: "Microsoft Yahei";
			}
		}
	}
}
.c {
	@extend .b;
}

%e {
	background: purple;
}
.c {
	@extend %e;
}

app.css(该文件由koala自动编译生成):

/**
 * MAIN
 * app
 *
 * BASE
 * variable
 * mixin
 *
 */
* {
  margin: 0;
  padding: 0;
}

div {
  display: inline-block;
  border: 2px solid red;
  padding: 10px;
}

.a {
  padding: 5px;
  background: grey;
}
.a .b, .a .c {
  color: #7f00ff;
}
.a .b .d, .a .c .d {
  font-size: 30px;
  font-weight: bold;
  font-family: "Microsoft Yahei";
}

.c {
  background: purple;
}

参考文章：

sass语法

关于sass那些事，sass用法