sass语法初学

来源:转载

参考地址:

sass Functions

Sass基础——Sass函数

sass语法

@charset "utf-8";@import "test2";// sass style// --------------------------$fontSize : 12px;// 默认变量$fontColor : #333 !default;$fontColor : #555;//特殊变量$borderDirection : top!default;body {font-size: $fontSize;background: #eee;color: $fontColor;// 应用与复杂的情况}//应用于class或者属性.border-#{$borderDirection}{border-#{$borderDirection} : 1px red solid;}//list类型$px : 0px 3px 2px 1px;$ps : 0px 2px, 2px 0px;$linkColor : red black;a.btn{color: nth($linkColor, 1);&:hover{color: nth($linkColor, 2);}div{width: 300px;height: 200px;}}$bs : 1;//map类型$head : (h1: 2em, h2: 1.5em, h3: 1em);@each $header, $size in $head{#{$header}{font: #{$size} / #{$bs};}}//属性嵌套.content-box{margin:{left: 10px;right: 2px;}}// 跳出循环.parent{color:$fontColor;@at-root .child{ color:red; }}// @at-root (without:all)@media print{.parent1{color:#aaa;@at-root (without:media) {.children{color:red;}}//保留了父级,但是跳出media}}// @at-root与 & 结合使用.parent2{@at-root .child2 &{color:red;}}//无参数[email protected] center-box{margin-top: 10px;}.demo{@include center-box;}//有参数[email protected] hasArguments($opacity: 50, $width: 100px){opacity: $opacity / 100;width: $width;}.opacity{@include hasArguments(100, 200px);}.opacity2{@include hasArguments($width:10px);}// @content的使用@mixin max($width){@media screen and (max-width: $width){@content;}}@include max(600px){body{font-size: $fontSize;}}//继承// 占位选择器%ir{border-color: red;}%cl{@if lte7{*zoom:1;}&:after{content: "";display: block;width: 0px;clear: both;visibility: hidden;}}.header{h1{@extend %cl;width: 100px;}}.ir{ @extend %cl; }$black : #000!default;$type : y;// 自定义函数@function decrease($p){@return 100 - $p;}.box1{color: lighten($black, 30%);width: decrease(10);}$samllFontSize: $fontSize - 2px !default;p{@if $type == monster{color: red;}@else if $type == y{color: #fff;}}//三目运算$w : if(true, 1px, 2px);.w{width: $w;}// to不包括最后一个值@for $i from 8 through 10{.item-#{$i}{font-size: 10 + $i;}}@for $j from 0 to 2{.item-#{$j}{font-size: 10 + $j;}}// @each循环$animal-list : puma, sea-lug, egret, salame;@each $v in $animal-list{.#{$v}-icon{background-image:url(./images/#{$v}.png);}}// 多字段循环$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);@each $animal, $color, $cursor in $animal-data{.#{$animal}-icon{background: url(./images/#{$animal}.png);}}// 多个字段map数据循环$headings : (p : 12px, h2 : 20px);@each $name, $value in $headings{#{$name}{font-size: $value;}}



分享给朋友:
您可能感兴趣的文章:
随机阅读: