sass语法总结

事例代码

.demo{  color:red;  .child{    color:black;    font-size:24px;    background: url("/static/img/logo_g.png");  }}/********************************scss语法*****************************************///变量使用$color: #000000;$width: 12px;$imgPath:'/public/img/';$marginCenter:0px auto 0px auto;$fontSize:12px 14px 16px 18px 24px;.bg-color{    background-color: $color;    width: $width;    .child{        width:100px - $width;//注意预算前后符号加空格        background: url(#{$imgPath}logo.png) no-repeat center;        margin:$marginCenter;        font-size:nth($fontSize,1);//从1开始并非0开始计数        &:hover{//伪类必须再前面加上&,意思在当前的类（.child）后面加上:hover            background-color: red;        }        &.active{            width: 100px;        }    }    $map:(min:12px,mid:16px,max:18px);    .map{        width: map-get($map,min);//对map进行key->value取值    }    //嵌套    .parent{        height: 100px;        .child{            @at-root {//跳出到最完成                .grandeson{                    font-size:12px;                }            }            @at-root  .child{//指明跳出那一层嵌套                .jump-child{                    font-size:16px;                }            }            @at-root  &{//好像是哪里也没跳出去    .bg-color .parent .child .jump-child-2 { font-size: 16px; }                .jump-child-2{                    font-size:16px;                }            }            //@at-root (without: ...)和@at-root (with: ...) 暂时没弄   这个是跳出@media的        }    }}//minxin使用@mixin btn {    border:0px none;    display:inline-block;    &:active{        outline:0px none;    }}@mixin backColor($color:#ffffff){    background-color: $color;}@mixin color($color){    color:$color;}.submit{    font-size:12px;    @include btn;    @include backColor(#000000);    @include backColor();//使用默认值    @include color(#545454);}//@content@mixin max-screen($res){    @media only screen and ( max-width: $res )    {        @content;    }}@include max-screen(960px) {    body { font-size: 62.5% }}//继承.input-area{    width: 100%;    display: inline-block;}.submit-area{    @extend .input-area;    min-height:30px;}//%占位符 上面的问题 产生了.input-area这个类，有的时候也许不希望产生//结果是产生了两个.submit-area-1  一个是继承的结果一个新写入的%base{  //好像还不能出现-之类的字符    color: transparent;    text-shadow: none;    background-color: transparent;    border: 0;}.submit-area-1{    @extend %base;    min-height:30px;}//函数@function max($param1,$param2){    @if($param1>$param2){        @return $param1;    }@else {        @return  $param2;    }}.max-value{    font-size:max(12px,24px);}//判断简洁写法//if(true, 1px, 2px) => 1px//if(false, 1px, 2px) => 2px//循环@for $i from 1 through 3 {//包含3    .item-#{$i} { width: 2em * $i; }}@for $i from 1 through 3 {//不包含3    .item-#{$i} { width: 2em * $i; }}//each 循环$animal-list: puma, sea-slug, egret, salamander;@each $animal in $animal-list {    .#{$animal}-icon {        background-image: url('/images/#{$animal}.png');    }}$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);@each $animal, $color, $cursor in $animal-data {    .#{$animal}-icon {        background-image: url('/images/#{$animal}.png');        border: 2px solid $color;        cursor: $cursor;    }}$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $header, $size in $headings {    #{$header} {        font-size: $size;    }}//导入@import "./inport.scss";//相对于当前scss路径.test{    height:$import;}

生成的代码

@charset "UTF-8";.demo {  color: red; }  .demo .child {    color: black;    font-size: 24px;    background: url("/static/img/logo_g.png"); }/********************************scss语法*****************************************/.bg-color {  background-color: #000000;  width: 12px; }  .bg-color .child {    width: 88px;    background: url(/public/img/logo.png) no-repeat center;    margin: 0px auto 0px auto;    font-size: 12px; }    .bg-color .child:hover {      background-color: red; }    .bg-color .child.active {      width: 100px; }  .bg-color .map {    width: 12px; }  .bg-color .parent {    height: 100px; }    .grandeson {      font-size: 12px; }    .child .jump-child {      font-size: 16px; }    .bg-color .parent .child .jump-child-2 {      font-size: 16px; }.submit {  font-size: 12px;  border: 0px none;  display: inline-block;  background-color: #000000;  background-color: #ffffff;  color: #545454; }  .submit:active {    outline: 0px none; }@media only screen and (max-width: 960px) {  body {    font-size: 62.5%; } }.input-area, .submit-area {  width: 100%;  display: inline-block; }.submit-area {  min-height: 30px; }.submit-area-1 {  color: transparent;  text-shadow: none;  background-color: transparent;  border: 0; }.submit-area-1 {  min-height: 30px; }.max-value {  font-size: 24px; }.item-1 {  width: 2em; }.item-2 {  width: 4em; }.item-3 {  width: 6em; }.item-1 {  width: 2em; }.item-2 {  width: 4em; }.item-3 {  width: 6em; }.puma-icon {  background-image: url("/images/puma.png"); }.sea-slug-icon {  background-image: url("/images/sea-slug.png"); }.egret-icon {  background-image: url("/images/egret.png"); }.salamander-icon {  background-image: url("/images/salamander.png"); }.puma-icon {  background-image: url("/images/puma.png");  border: 2px solid black;  cursor: default; }.sea-slug-icon {  background-image: url("/images/sea-slug.png");  border: 2px solid blue;  cursor: pointer; }.egret-icon {  background-image: url("/images/egret.png");  border: 2px solid white;  cursor: move; }h1 {  font-size: 2em; }h2 {  font-size: 1.5em; }h3 {  font-size: 1.2em; }.test {  height: 100px; }<br>

常用的数学计算

      percentage($value)：将一个不带单位的数转换成百分比值；      round($value)：将数值四舍五入，转换成一个最接近的整数；      ceil($value)：将大于自己的小数转换成下一位整数；      floor($value)：将一个数去除他的小数部分；      abs($value)：返回一个数的绝对值；      min($numbers…)：找出几个数值之间的最小值；      max($numbers…)：找出几个数值之间的最大值；      random(): 获取随机数