您的位置：首页 > Web前端 > CSS

scss基础教程

2016-08-23 17:17 211 查看

细节注意：

.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用法

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航