函数
创新互联公司公司2013年成立,先为银州等服务建站,银州等地企业,进行企业商务咨询服务。为银州企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。sass定义了很多函数可供使用,当然你也可以自己定义函数,以@fuction开始。sass的官方函数链接为:sass fuction,实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以lighten减淡和darken加深为最,其调用方法为lighten($color,$amount)和darken($color,$amount),它们的第一个参数都是颜色值,第二个参数都是百分比。
//scss $baseFontSize: 10px !default; $gray: #ccc !default; // pixels to rems @function pxToRem($px) { @return $px / $baseFontSize * 1rem; } body{ font-size:$baseFontSize; color:lighten($gray,10%); } .test{ font-size:pxToRem(16px); color:darken($gray,10%); } //css body { font-size: 10px; color: #e6e6e6; } .test { font-size: 1.6rem; color: #b3b3b3; }
运算
sass具有运算的特性,可以对数值型的Value(如:数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格,不然会出错。
//scss $baseFontSize: 14px !default; $baseLineHeight: 1.5 !default; $baseGap: $baseFontSize * $baseLineHeight !default; $halfBaseGap: $baseGap / 2 !default; $samllFontSize: $baseFontSize - 2px !default; //grid $_columns: 12 !default; // Total number of columns $_column-width: 60px !default; // Width of a single column $_gutter: 20px !default; // Width of the gutter $_gridsystem-width: $_columns * ($_column-width + $_gutter); //grid system width
条件判断及循环
@if判断
@if可一个条件单独使用,也可以和@else结合多条件使用
//scss $lte7: true; $type: monster; .ib{ display:inline-block; @if $lte7 { *display:inline; *zoom:1; } } p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } } //css .ib { display: inline-block; *display: inline; *zoom: 1; } p { color: green; }
三目判断
语法为:if($condition, $if_true, $if_false) 。三个参数分别表示:条件,条件为真的值,条件为假的值。
if(true, 1px, 2px) => 1px if(false, 1px, 2px) => 2px
for循环
for循环有两种形式,分别为:@for $var from
$i表示变量,start表示起始值,end表示结束值,
这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。
//scss @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } //css .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }
@each循环
语法为:@each $var in
其中$var表示变量,而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。
单个字段list数据循环
//scss $animal-list: puma, sea-slug, egret, salamander; @each $animal in $animal-list { .#{$animal}-icon { background-p_w_picpath: url('/p_w_picpaths/#{$animal}.png'); } } //css .puma-icon { background-p_w_picpath: url("/p_w_picpaths/puma.png"); } .sea-slug-icon { background-p_w_picpath: url("/p_w_picpaths/sea-slug.png"); } .egret-icon { background-p_w_picpath: url("/p_w_picpaths/egret.png"); } .salamander-icon { background-p_w_picpath: url("/p_w_picpaths/salamander.png"); }
多个字段list数据循环
//scss $animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move); @each $animal, $color, $cursor in $animal-data { .#{$animal}-icon { background-p_w_picpath: url('/p_w_picpaths/#{$animal}.png'); border: 2px solid $color; cursor: $cursor; } } //css .puma-icon { background-p_w_picpath: url("/p_w_picpaths/puma.png"); border: 2px solid black; cursor: default; } .sea-slug-icon { background-p_w_picpath: url("/p_w_picpaths/sea-slug.png"); border: 2px solid blue; cursor: pointer; } .egret-icon { background-p_w_picpath: url("/p_w_picpaths/egret.png"); border: 2px solid white; cursor: move; }
多个字段map数据循环
//scss $headings: (h2: 2em, h3: 1.5em, h4: 1.2em); @each $header, $size in $headings { #{$header} { font-size: $size; } } //css h2 { font-size: 2em; } h3 { font-size: 1.5em; } h4 { font-size: 1.2em; }
后续详情学习,可参照大漠老师的博客
http://www.w3cplus.com/sassguide/syntax.html
创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。