SASS简介及使⽤⽅法
⼀、什么是Sass
Sass(Syntactically Awesome StyleSheets)是css的⼀个扩展开发⼯具，它允许你使⽤变量、条件语句等，使开发更简单可维护。这⾥是官⽅⽂档。
⼆、基本语法
1）变量
sass的变量名必须是⼀个$符号开头，后⾯紧跟变量名。
//sass 样式
$red: #f00;
div {
color: $red;
}
// 编译为css后
div {
color:#f00;
}
特殊变量：如果变量嵌套在字符串中，则需要写在 #{} 符号⾥⾯，如：
$top: top;
div {
margin-#{$top}: 10px; /* margin-top: 10px; */
}
默认变量：仅需在值后⾯加⼊ !default即可，默认变量⼀般⽤来设置默认值，当该变量出现另外⼀个值时，⽆论定义先后，都会使⽤另外⼀个值，覆盖默认值
$color: red;
$color: blue !default;
div {
color: $color; /* color:red; */
}
多值变量：多值变量分为list类型和map类型，list有点像js对象中的数组，map类型像js中的对象
list : 可通过空格，逗号或⼩括号分割多个值，使⽤ nth($变量名, $索引)取值
//⼀维数据
$px: 5px 10px 20px 30px;
//⼆维数据，相当于js中的⼆维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
/
/ 例⼦
$px: 10px 20px;
div {
margin:nth($px, 1) 0 0 nth($px, 2); /* margin:10px 0 0 20px; */
}
map: 数据以key和value组成，格式：$map: (key1: value1, key2: value2); 通过map-get($map, $key);
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
2）计算功能
sass允许使⽤算式。
div {
padding: 2px * 4px;
margin: (10px / 2);
font-size: 12px + 4px;
}
3）嵌套
标签嵌套
// sass 样式
div {
color: #333;
a {
font-size:14px;
&:hover {
text-decoration:underline; }
}
}
// 编译后css
div {
color: #333;
}
div a {
font-size:14px;
}梦到手机被偷
div a:hover {
text-decoration:underline;
}
属性嵌套：
//sass 样式
.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
谁动了我的奶酪读后感color: #ccc;
}
}
}
/
/css 编译后样式
.fakeshadow {
鼓励
border-style: solid;
border-left-width: 4px;
border-left-color: #888;
border-right-width: 2px;
border-right-color: #ccc;
}
4）注释
sass有两种注释风格
标准css注释： /* 注释 */，会保留到编译后的⽂件中，压缩则删除
单⾏注释： // 注释
在标准注释 /*后⾯加⼊⼀个感叹号，表⽰重要注释，压缩模式也会保留注释，⽤于版权声明等。
/*! 重要注释 */
5）继承
sass 中，选择器继承可以让选择器继承另⼀个选择器的所有样式
// sass样式
h1 {
font-size:20px;
}
div {
@extend h1;
color:red;
}
// css编译后样式
我的面具h1 {
font-size:20px;
}
div {
font-size:20px;
color:red;
}
使⽤占位符选择器 %
从sass3.2.0后，就可以定义占位选择器%，这个的优势在于，不调⽤不会有多余的css⽂件
// sass样式
%h1 {
font-size:20px;
}
div {
@extend %h1;
color:red;
}
// css编译后样式
div {
font-size:20px;
color:red;
}
相称的读音6）混合(mixin)
sass中使⽤@mixin声明混合，可以传递参数，参数名义$符号开始，多个参数以逗号分开，如果参数有多组值，那么在变量后⾯加三个点表⽰，如： $
//sass 样式
@mixin opacity($opacity:50) {
opacity: $opacity / 100;
filter: alpha(opacity=$opacity);
}
.opacity{
@include opacity; //参数使⽤默认值 50/100 = 0.5
}
.opacity-80{
@include opacity(80); //传递参数 80/100 = 0.8
}
// css编译后样式
.opacity{
opacity: 0.5;
filter: alpha(opacity=50);
}
// ---------------------
/
/ 多参数
@mixin center($width, $height) {
position: absolute;
left:50%;
top:50%;
width:$width;
height:$height;
margin:(-$height / 2) 0 0 (-$width / 2);
}
div {
@include center(200px, 100px);
}
// css编译后样式
div {
position: absolute;
left:50%;
top:50%;
width:200px;
height:100px;
margin:-50px 0 0 -100px;
}
// -------------------
/
/多组值
@mixin box-shadow($) {
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
div {
@include box-shadow(0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4));
}
// css编译后样式
div {
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);
box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);
}
@content：在sass3.2.0中引⼊，可以⽤来解决css3中 @meidia 或者 @keyframes 带来的问题。它可以使@mixin接受⼀整块样式，接收的样式从@content开始
//sass 样式
@mixin max-screen($res){
残花
@media only screen and ( max-width: $res )
{
@content;
}
}
@include max-screen(480px) {
body { color: red }
}
//css 编译后样式
@media only screen and (max-width: 480px) {
body { color: red }
}
使⽤@content解决@keyframes关键帧的浏览器前缀问题
// 初始化变量
$browr: null;
// 设置关键帧
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
$browr: '-webkit-'; @content;
}
@-moz-keyframes #{$name} {
$browr: '-moz-'; @content;
}
@-o-keyframes #{$name} {
$browr: '-o-'; @content;
}
@keyframes #{$name} {
$browr: ''; @content;
}
}
// 引⼊
@include keyframes(scale) {
100% {
#{$browr}transform: scale(0.8);
}
}
// css编译后
@-webkit-keyframes scale {
-webkit-transform: scale(0.8);
}
@-moz-keyframes scale {
-moz-transform: scale(0.8);
}
@-o-keyframes scale {
-o-transform: scale(0.8);
}
@keyframes scale {
transform: scale(0.8);
}
7）颜⾊函数
sass提供了⼀些内置的颜⾊函数
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
8）引⼊外部⽂件
使⽤ @import 命令引⼊外部⽂件，引⼊后，可使⽤外部⽂件中的变量等。@import "_ba.scss";
正方体的表面积三、⾼级⽤法
1）函数 function
sass允许⽤户编写⾃⼰的函数，以@function开始
$fontSize: 10px;
@function pxTorem($px) {
@return $px / $fontSize * 1rem;
}
div {
好写的作文题目font-size: pxTorem(16px);
}
// css编译后样式
div {
font-size: 1.6rem;
}
