Sass 文件 基础知识

sass文件名为.scss

可以设置变量

//sass style

$fontStack:Heletica,sans-serif;
$primaryColor:#333;

body{
　　font-family:$fontStack;
　　color:$primaryColor;
}

//css style
//-----------------------------------
body {
　　font-family: Helvetica, sans-serif;
　　color: #333;
}

嵌套 - sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐

//sass style
//-----------------------------------
nav {
　　ul {
　　　　margin: 0;
　　　　padding: 0;
　　　　list-style: none;
　　}
　　li {
　　　　display: inline-block;
　　}
　　a {
　　　　display: block;
　　　　padding: 6px 12px;
　　　　text-decoration: none;
　　}
}

//css style
//-----------------------------------
nav ul {
　　margin: 0;
　　padding: 0;
　　list-style: none;
}

nav li {
　　display: inline-block;
}

nav a {
　　display: block;
　　padding: 6px 12px;
　　text-decoration: none;
}

导入 - sass中如导入其他sass文件，最后编译为一个css文件，优于纯css的@import

//sass style
//-----------------------------------
// _reset.scss

 

html,
body,
ul,
ol {
　　margin: 0;
　　padding: 0;
}

 

//sass style
//-----------------------------------
// base.scss

@import 'reset';

body {
　　font-size: 100% Helvetica, sans-serif;
　　background-color: #efefef;
}

 

html, body, ul, ol {
margin: 0;
padding: 0;
}

body {
background-color: #efefef;
font-size: 100% Helvetica, sans-serif;
}

mixin - sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。

//sass style
//-----------------------------------
@mixin box-sizing ($sizing) {
　　-webkit-box-sizing:$sizing;
　　-moz-box-sizing:$sizing;
　　box-sizing:$sizing;
}
.box-border{
　　border:1px solid #ccc;
　　@include box-sizing(border-box);
}

 

//css style
//-----------------------------------
.box-border {
　　border: 1px solid #ccc;
　　-webkit-box-sizing: border-box;
　　-moz-box-sizing: border-box;
　　box-sizing: border-box;
}

扩展/继承 - sass可通过@extend来实现代码组合声明，使代码更加优越简洁。

//sass style
//-----------------------------------
.message {
　　border: 1px solid #ccc;
　　padding: 10px;
　　color: #333;
}

.success {
　　@extend .message;
　　border-color: green;
}

.error {
　　@extend .message;
　　border-color: red;
}

.warning {
　　@extend .message;
　　border-color: yellow;
}

 

//css style
//-----------------------------------
.message, .success, .error, .warning {
　　border: 1px solid #cccccc;
　　padding: 10px;
　　color: #333;
}

.success {
　　border-color: green;
}

.error {
　　border-color: red;
}

.warning {
　　border-color: yellow;
}

运算 - sass可进行简单的加减乘除运算等

//sass style
//-----------------------------------
.container { 100%; }

article[role="main"] {
　　float: left;
　　 600px / 960px * 100%;
}

aside[role="complimentary"] {
　　float: right;
　　 300px / 960px * 100%;
}

//css style
//-----------------------------------
.container {
　　 100%;
}

article[role="main"] {
　　float: left;
　　 62.5%;
}

aside[role="complimentary"] {
　　float: right;
　　 31.25%;
}

颜色 - sass中集成了大量的颜色函数，让变换颜色更加简单。

//sass style
//-----------------------------------
$linkColor: #08c;
a {
　　text-decoration:none;
　　color:$linkColor;
　　&:hover{
　　　　color:darken($linkColor,10%);
　　}
}

//css style
//-----------------------------------
a {
　　text-decoration: none;
　　color: #0088cc;
}
a:hover {
　　color: #006699;
}