sass揭秘之@if,@for,@each(转载)

因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习。

经过上两篇揭秘,大家心里对sass应该有了很好的认知感了,这篇文章基于前面两篇为基础,请确保你先浏览了前面的两篇文章,不然可能给你带来疑惑感觉。

  1. sass揭秘之变量
  2. sass揭秘之@mixin,%,@function

这篇文章关键是对sass判断或循环的语法熟悉下,至于逻辑这东西,和其他的语言如js,php什么的是一样一样的,没什么说头。经过前两篇的积累,也就不需要那么啰嗦了,所以只写scss代码。现在你就可以想想css如果用上这些东西会是什么样子的呢?

@if

这个@if就不用解释吧,一看都知道是条件判断。这个东西对于浏览器兼容这块可以出不少力量;然后对于写一些基础的scss,控制样式的输出也是一大利器;当然还有很多很多了,反正是个必备的好东西就是了。先来个简单的例子吧:

$lte7:true !default;//是否兼容ie6,7

//inline-block
//ie6-7 *display: inline;*zoom:1;
@mixin inline-block {
  display: inline-block;
  @if $lte7 {
    *display: inline;*zoom:1;
  }
}

如果变量$lte7为真,就输出*display: inline;*zoom:1;,这个例子看着有点熟悉吧,前面@mixin已经说了,哈哈。sass的东西其实也就是这么多,转来转去就转回来了。

既然有@if,那肯定有@else啊

$filter:false !default; //是否开启ie滤镜
//背景色半透明
@mixin bgcolor-alpha($bgcolor: rgba(0,0,0,.5)){
  color:#fff;
  @if $filter{
    filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#{ie-hex-str($bgcolor)}‘, endColorstr=‘#{ie-hex-str($bgcolor)}‘);
  }@else{
    background-color: #333;
  }
  background-color:$bgcolor;
}

这是半透明rgba背景的一段代码,高级浏览器用rgba,ie6-8如果开启滤镜用滤镜,不开启滤镜就用纯色,常用于图片下方浮现标题。至于多条件的,可以参考sass揭秘之@mixin,%,@function里面的神来之笔的@mixin prefixer

当然也不可能总是判断一个变量的真假那么简单,没有或与非的情况吧。sass的@if用not,or,and分别表示非,或,与。

$a:   false !default;
$b:   true !default;

@if not($a){
    p{
        color:red;
    }
}

div{
    font-size:14px;
    @if $a or $b{
        width:300px;
    }
}

li{
    line-height:24px;
    @if $a and $b{
        float:left;
    }
}

想想还是漏了个,sass用==,!=分别表示等于与不等于。

$radius: 5px !default;

.box-border{
   border:1px solid #ccc;
   padding:10px;

   @if $radius != 0{
        border-radius:$radius;
    }
}  

$sizeClass: small !default;

.size{
    @if $sizeClass == ‘small‘{
        padding:5px;
    }@else{
        padding:10px;
    }
}

是不是感觉很简单,本来就没什么特别的,判断和循环逻辑都是一样的,就是可能sass里面表现不一样吧。

@for

for循环有两种形式,分别为:@for $var from through 和@for $var from to 。$i表示变量,start表示起始值,end表示结束值,这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。先来个简单的:

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

上面的那个实例几乎用不着,哈哈所以其实是没什么营养的东西,只是帮助理解了原来@for是这么回事。怎么的也不能就这么忽悠大家啊,大家好不容易抽空看下文章,就这么点扯淡的东西怎么对得住呢。下面再来个营养级别的,@for应用在网格系统生成各个格子class的代码:

// class span1-$gridColumns
// span的class循环输出,通过变量$gridSpanSwitch来控制是否输出
//-----------------------------------------------------
$gridColumns:      12 !default;
$gridcolumnWidth:  60px !default;
$gridGutter:       20px !default;

%span-base{
    float:left;
    margin-left:$gridGutter / 2;
    margin-right:$gridGutter / 2;
}
@for $i from 1 through $gridColumns {
    .span#{$i} {
        @extend %span-base;
        width:($gridcolumnWidth + $gridGutter) * $i - $gridGutter;
    }
}

解析后的css:


.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
.span1 {
  width: 60px;
}
.span2 {
  width: 140px;
}
.span3 {
  width: 220px;
}
.span4 {
  width: 300px;
}
.span5 {
  width: 380px;
}
.span6 {
  width: 460px;
}
.span7 {
  width: 540px;
}
.span8 {
  width: 620px;
}
.span9 {
  width: 700px;
}
.span10 {
  width: 780px;
}
.span11 {
  width: 860px;
}
.span12 {
  width: 940px;
}

这样一循环,比一个个写爽多了吧,因为float和margin什么的都一样,所以我们使用占位选择器申明,然后@extend调用,那样就是组合申明了。当然如果你要一个更复杂的包括百分比和固定宽度切换的可以看下sassCore中的_grid.scss,这个网格系统就很强大了。

@each

语法:@each $var in

循环一个列表里面所有的值,然后去做点什么呗,那到底做点什么呢,这是个问题。你可以先想个三分钟试试,我们现在能用@each给css赋予什么魅力。

我来扯点其他的。其实@for和@each还是很少用的,但是只要它一上场,对于css来说一般都具有神来之笔,这就是要么不出手,一出手就震惊全场。

好了,插了上面一段后,我们来说说@each的官方实例:

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url(‘/images/#{$animal}.png‘);
  }
}

解析后的css:

.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‘);
}

上面是对icon class的定义,不过icon现在大家一般都用sprite去做,所以这种单独的很少了,不过可以同样用这个来设置background-position,假设这个sprite图片是宽30px,高120px,每个icon大小为30px*30px:

$sprite: puma sea-slug egret salamander !default;

%sprite-animal{
    background: url(‘/images/animal.png‘) no-repeat;
}
@each $animal in $sprite {
    .#{$animal}-icon {
        @extend %sprite-animal;
        background-position:0 -(index($sprite,$animal)*30px);
    }
}

解析后的css:

.puma-icon, .sea-slug-icon, .egret-icon, .salamander-icon {
  background: url("/images/animal.png") no-repeat;
}

.puma-icon {
  background-position: -30px;
}

.sea-slug-icon {
  background-position: -60px;
}

.egret-icon {
  background-position: -90px;
}

.salamander-icon {
  background-position: -120px;
}

看起来还是比较帅的哈哈,但是sprite的图片有这么规整的还是很少的,现在有些网站搞sprite图片搞得太狠了,一般一个sprite那是包含各种大小的图片啊,不过这种网站如果维护频繁的话,那简直就是挖了天坑啊。

除了上面的sprite的运用,我们再来说个拍案叫绝的吧。自从bootstrap以后,框架遍地开花,而估计每个里面都会有的就是按钮的样式,而按钮的样式一般都要分颜色,大小吧,甚至按钮组。每个颜色一个class,每个大小还一个class,可是我们实际用的时候呢,估计能用个三分之一就不错了,反正最后就是那些定义好的按钮的样式远远超过了我们的需求,多大的浪费啊。

现在我们借用sass的@each就能帮我们控制这个问题,实用出发,需要什么就生成什么,不铺张不浪费。

//$btnColorClass: (primary #0078E7 #fff) (green $green #fff);
$btnColorClass: (primary #0078E7 #fff) (blue #00A3CF #fff) (orange #F47837 #fff) !default;

@mixin btn-color($bgColor:#e6e6e6, $textColor:#333){
    color:$textColor;
    background-color: $bgColor;
    border:1px solid darken($bgColor, 5%);
    border-color:lighten($bgColor, 2%) darken($bgColor, 5%) darken($bgColor, 5%) lighten($bgColor, 2%);

    &:hover{
        background-color: darken($bgColor,5%);
        color:$textColor;
    }
}

@each $colorClass in $btnColorClass{

  $class:      nth($colorClass,1);
  $bgColor:    nth($colorClass,2);
  $textColor:  nth($colorClass,3);

  .btn-#{$class}{
    @include btn-color($bgColor,$textColor);
  }
}

解析后的css:

.btn-primary {
  color: white;
  background-color: #0078e7;
  border: 1px solid #006bce;
  border-color: #007df1 #006bce #006bce #007df1;
}
.btn-primary:hover {
  background-color: #006bce;
  color: white;
}

.btn-blue {
  color: white;
  background-color: #00a3cf;
  border: 1px solid #008fb5;
  border-color: #00abd9 #008fb5 #008fb5 #00abd9;
}
.btn-blue:hover {
  background-color: #008fb5;
  color: white;
}

.btn-orange {
  color: white;
  background-color: #f47837;
  border: 1px solid #f3681f;
  border-color: #f57f41 #f3681f #f3681f #f57f41;
}
.btn-orange:hover {
  background-color: #f3681f;
  color: white;
}

轻松搞定,我们默认有三个颜色,现在如果我们要搞自己的颜色,直接按照第一篇sass揭秘之变量来重新定义下变量就ok了,这里你可以直接去掉那段注释//$btnColorClass: (primary #0078E7 #fff) (green $green #fff);就会解析成这两种class。现在你除了发表感叹“真牛B”之外,你也许还会想这是怎么出来的。不明觉厉啊。

下面详细展开下:

其实这里的核心就是$btnColorClass这个变量,也许你以前看到的就是一个变量对应一个值,如果你看了前面两篇文章,你会看到一个变量对应两个或多个值,而这里又升级了,对应了好多个啊,而且还是有组织的。简单来说这就跟js的数组差不多,相当于数组里面还有数组。

这里补充个知识,sass的列表值大致有三种形式分隔,分别为空格,逗号和小括号。空格比较常见,逗号还好了,我们说的第一个@each的官网案例,$list就是以逗号分隔的。

现在转回来,我们这个$btnColorClass,使用了两种分隔,空格和小括号,我们@each循环先得到用小括号分隔的,然后再在@each里面通过nth取得小括号里面用空格分开的列表值。说完了,就这么简单,突然发现把变量说完了,这个答案就解开了。

@if,@for,@each就算讲完了,当然还有一个@while,暂时还没太用它,也没什么特别的,所以就不说了,以后有用到绝妙之处再来说。

经过这三篇sass揭秘文章,大家对sass的了解也应该深入许多了,是不是发现它原来还有如此的迷人魅力。揭秘到这里,其实大家现在可以去分析下sassCore的源码了,其实这三篇文章里面好多东西都是从sassCore里面抽出来的,sassCore本身的代码比这些可能要复杂点,但是如果你对着三篇文章理解没问题的,sassCore源码也不会是问题,如有问题可在群中提问

sass揭秘暂时到此为止,休息一段时间,如果反响比较好的话,将继续为大家说下sass实战,包括给我以前写的那篇浅析sass死亡在团队合作中 文章一个答案。

如需转载,烦请注明出处:http://www.w3cplus.com/preprocessor/sass-advanced-application.html

时间: 2024-10-13 23:31:12

sass揭秘之@if,@for,@each(转载)的相关文章

sass揭秘之@mixin,%,@function

因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习. 在阅读本文章之前,请先确认你已经阅读了上篇文章sass揭秘之变量,不然会给你带来疑惑的感觉. 其实很多人之所以对sass或less感兴趣,就是因为他们能使用变量和这个@mixin功能,而后面的%和@function知道的人就比较少了.所以说@mixin这个东西还是很有诱惑力的,没办法,广告做得好啊,大明星.这里之所以把%和@function和@mixin放在一起,当然并非无

sass揭秘之变量

全局变量和局部变量 要了解sass或less的变量,有必要先了解下js的变量定义,先来一段js的代码: var a = 1; (function(){ a = 5; })(); console.log(a);//5 上面这段代码,匿名函数里面的a因为没有使用var关键字来定义,所以当我们在函数外打印a的时候,得到的是5,改变了一开始定义的1 var a = 1; (function(){ var a = 5; })(); console.log(a);//1 而这段代码,匿名函数里面的a使用了v

sass语法基础知识

文件后缀名 sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号.而本教程中所说的所有sass文件都指后缀名为scss的文件.在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错. //文件后缀名为sass的语法 body background: #eee font-size:12px p background: #0982c1 //文件后缀名为scss的语法 b

SASS学习笔记2 —— 语法

sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种是scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号.在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错. 所有的sass导入文件都可以忽略后缀名.scss.一般来说基础的文件命名方法以_开头,如_mixin.scss.这种文件在导入的时候可以不写下划线,可写成@import "mixin". 被导入sass文件a.scss: body { background: #

SASS组件开发

*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { margin: 15px 0; } /* HEAD

sass判断语句

@if判断 @if可一个条件单独使用,也可以和@else结合多条件使用 scss.style css.style 三目判断 语法为:if($condition, $if_true, $if_false) . 三个参数分别表示:条件,条件为真的值,条件为假的值. scss.style css.style for循环有两种形式,分别为: 1.@for $var from <start> through <end> 2.@for $var from <start> to &l

Sass 安装到使用

sass学习 Sass 可以通过以下三种方式使用:作为命令行工具:作为独立的 Ruby 模块 (Ruby module):或者作为 Rack-enabled 框架的插件(例如 Ruby on Rails 与 Merb). 1.安装 ruby安装 由于SASS是在Ruby环境下运行,所以首先需要在自己的电脑上安装Ruby. 1.在Mac系统下,Ruby一般已内置在其中,查看是否安装:ruby -v 2.在windows系统下,先到官网下载个ruby在安装的时候,请勾选Add Ruby execut

【转载】2014 IT公司校招应届生待遇大揭秘

2014 IT公司校招应届生待遇大揭秘 公司名称        职位类别        待遇(校招年份) 百度                  开发类                13K*14.6 + 800饭补(400+20*20) (2014) (注:今年百度相对比较多的人拿了special)                  测试类.前端类      12K*14.6 + 800饭补(400+20*20)  (2014)                  产品本硕           

Sublime插件支持Sass编译和Babel解析ES6 &amp; .sublime-build文件初探(转载自imwtr)

原文请看:http://www.cnblogs.com/imwtr/p/6010550.html 用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方便的工具,不用配置太多 哈哈哈哈但我还是更喜欢用ST 如果要将Sass编译成css文件,安装相应的编译工具就行,然后在命令行直接sass a.scss:b.css 编译就行了 要将ES6解析成ES5的语