关于Sass
sass是最早的css预处理语言,有比less更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受,所以使用率不高,不过由于其强大的功能和Ruby on Rails 的大力推动,逐渐被更多开发者使用。
sass是采用的Ruby语言编写的一款css预处理语言,它诞生于2007年,是最早成熟css预处理语言。最初它是为了配合haml而设计的,因此有着和haml一样的缩进式风格。
sass从第三代开始,放弃了缩进式风格,并且完全向下兼容普通的css代码,这一代的sass也被称为scss。
Sass快速入门
变量sass中可以定义变量,方便统一修改和维护。
$fontStack:arial;
$fontSize:16px;
$primaryColor: #333;
body {
font-family:$fontStack;
color: $primaryColor;
font-size: $fontSize;
}
导入sass中如导入其他sass文件,最后编译为一个css文件,优于纯css的@import
创建需要导入的sass文件,默认为已经创建,这里命名为test.scss
html,body,ul,ol{
margin: 0;
padding: 0;
}
在style.scss文件中导入test.scss
@import 'reset';
body {
font-size: 100% Helvetica, sans-serif;
background-color: #efefef;
}
mixinsass中可用mixin定义一些代码片段,且可传参数,方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。
@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);
}
嵌套sass可以进行选择器的嵌套,表示层级关系,看起来很优雅整齐。
nav{
ul{
margin: 0;
padding:0;
list-style: none;
}
li{
display: inline-block;
}
a{
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
扩展/继承sass可通过@extend来实现代码组合声明,使代码更加优越简洁。
.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;
}
运算sass可进行简单的加减乘除运算等
.container{
width: 100%;
}
article[role="main"]{
float: left;
width: 600px / 960px *100%;
}
aside[role = "complimentary"]{
float: right;
width:300px / 960px * 100%;
}
颜色sass中集成了大量的颜色函数,让变换颜色更加简单。
$linkColor:#08c;
a{
text-decoration: none;
color: $linkColor;
&:hover{
color: darken($linkColor,10%);
}
}
编译好的css
html, body, ul, ol {
margin: 0;
padding: 0; }
body {
font-family: arial;
color: #333;
font-size: 16px; }
nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }
.box-border {
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333; }
.success {
border-color: green; }
.error {
border-color: red; }
.warning {
border-color: yellow; }
.container {
width: 100%; }
article[role="main"] {
float: left;
width: 62.5%; }
aside[role="complimentary"] {
float: right;
width: 31.25%; }
a {
text-decoration: none;
color: #08c; }
a:hover {
color: #006699; }
原创文章转载请注明:转载自:Sass快速入门
12