事例代码
.demo{
color:red;
.child{
color:black;
font-size:24px;
background: url("/static/img/logo_g.png");
}
}
$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);
&:hover{
background-color: red;
}
&.active{
width: 100px;
}
}
$map:(min:12px,mid:16px,max:18px);
.map{
width: map-get($map,min);
}
.parent{
height: 100px;
.child{
@at-root {
.grandeson{
font-size:12px;
}
}
@at-root .child{
.jump-child{
font-size:16px;
}
}
@at-root &{
.jump-child-2{
font-size:16px;
}
}
}
}
}
@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);
}
@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;
}
%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);
}
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
$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";
.test{
height:$import;
}
生成的代码
@charset "UTF-8";
.demo {
color: red; }
.demo .child {
color: black;
font-size: 24px;
background: url("/static/img/logo_g.png"); }
.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(): 获取随机数