/ 前端

为什么要用sass来写css--一个demo小实例

我在很早之前就知道世上有sass,less这些css的预处理器,可以根据他们特有的语法来编写生成css。但我始终找不到理由为什么要去学习和使用这些东西。一是不想跳出自己的舒适区,觉得css已经够用了。二来是不知道他们怎么用。我想在这篇文章里试图说服你,为什么我们要使用这些css的预处理器。

我在本文举两个sass例子,sass很简单。如果你学习过css和编程,看一下马上就能理解。如果你对sass还不熟悉,我建议你去看这两篇文章。
SASS用法指南
最详细的 Sass 基础教程指南

使用sass来实现移动适配

如果你看过我上一篇文章,你会发现,我已经在那边有提及sass。也是我了解适配移动方案使用sass可以复用大量的适配css代码,我才开始使用学习和使用sass

//定义个mixin  根据不同dpr将px值转化成相应dpr的px值
/*
@params $name 是css属性 比如 width、top 等
@params $px  像素值
*/

@mixin px2px($name, $px){
    #{$name}: round($px / 2) * 1px;
    [data-dpr="2"] & {
        #{$name}: $px * 1px;
    }
    // for mx3
    [data-dpr="2.5"] & {
        #{$name}: round($px * 2.5 / 2) * 1px;
    }
    // for 小米note
    [data-dpr="2.75"] & {
        #{$name}: round($px * 2.75 / 2) * 1px;
    }
    [data-dpr="3"] & {
        #{$name}: round($px / 2 * 3) * 1px
    }
    // for 三星note4
    [data-dpr="4"] & {
        #{$name}: $px * 2px;
    }
}

在使用的过程中,可以像这样写

@include px2px('width',200)

生成的css


width:100px;

[data-dpr="2"]  {
	width:200px;
}

// for mx3
[data-dpr="2.5"] {
	width:250px;
}

// for 小米note
[data-dpr="2.75"]  {
	width:275px
}

[data-dpr="3"]  {
	width:300px;
}

// for 三星note4
[data-dpr="4"] & {
    width:400px;
}

设置一条属性的,我们就可以减少这么多的代码。

使用sass来优雅布局

这个例子是我在开发helloworld社区官网移动版的时候遇到的,可以看一下效果先。
请自备梯子

在视频中可以看到,点击技术部的按钮,会有向摩天轮的布局旋转出来,这里其实用到的就是css3的旋转,我要说的是旋转完成之后的几个小球的布局如何实现。

其实思路也很简单,用到的就是绝对定位。不同的小球给不同的left和top值。

如果用传统的css做。怎么做?去给每一个小球设置一个值?思路是这样的,不过有很多问题.

  • 首先你要手动计算每一小球的left,top值.

  • 其次,你要适配不同的dpr像素,比如,你要dpr为2的时候设置left:200,那么在dpr为4的设备中相应的要改成400。

  • 再者,当再需要添加一个小球的时候,几乎现在所有的css代码都没用了。

还好有sass这些技术,能一一化解上面的问题。

先来看一下html的结构


<div id="technology" class="big-ball big-ball-4">
	技术部
	<div class="small-ball small-ball-1">
		<p class="small-ball-self-1">设计组</p>
	</div>
	<div class="small-ball small-ball-2">
		<p class="small-ball-self-2">前端组</p>
	</div>
	<div class="small-ball small-ball-3">
		<p class="small-ball-self-3">后台组</p>
	</div>
	<div class="small-ball small-ball-4">
		<p class="small-ball-self-4">安卓组</p>
	</div>
	<div class="small-ball small-ball-5">
		<p class="small-ball-self-5">iOS组</p>
	</div>
	<div class="small-ball small-ball-6">
		<p class="small-ball-self-6">运营组</p>
	</div>
</div>

接下我们来写sass,为了清晰的说明上面的问题,我删除了其他无关的sass代码。


$R:100;  // 技术部圆的半径
$r:50; // 技术部下的圆半径

.big-ball{
    position: absolute;
}

  .small-ball{
    position: absolute;
    z-index: -1111;
    left: 0;
    top: 0;
    visibility: hidden;
    /*
    定下小圆显示时的left值
    */
    $l: 2*$r; // 初始left值  
   
     /*
    根据小圆的数量可以确定小圆圆心与大圆圆心的夹角大小
    在根据$l 和 $r $R 得出 $top相对应的值
    当小圆数量改变的时候 只要重新给出相应的公式就可以
    最理想的方式是夹角参数也相应的出现在公式里
    那么公式就更加方便修改
  
    */
    $t:($R+2*$r)*1.73/3-$r; // 初始top值  其中 根号3 约等于1.73
    //  px2rem是一个mixin 用于将px值转化为相应的rem值
    //  详见上一篇文章 《移动端适配记》
    @include px2rem('width',2*$r);  
    @include px2rem('height',2*$r);
    
    &.show-small{
    	// 添加show-small类名的时候  设置初始的left 和top值
    	// js控制添加或删除类名
      @include px2rem('left',-$l);
      @include px2rem('top',-$t);
   		
   		// 使用sass的循环遍历 给不同的小球设置不同的值
      @for $i from 1 through 6{
      	 // 设置旋转的origin座标 这是技术部大圆的圆心
        $x: 2*$r+$R;
        $y: $t+$R;
        &.small-ball-#{$i}{
        	// 调用座标点  因为要适配不同的手机  所以原点的座标值在不同的dpr设备下也不同 该mixin 封装在后面
          @include origin($x,$y);
          // 不同的小球旋转的角度 = $i*60deg
          -webkit-transform: rotate($i*60deg);
          -moz-transform: rotate($i*60deg);
          transform: rotate($i*60deg);
          // 过渡设置
          -webkit-transition:all .5s ease-in;
        	-moz-transition:all .5s ease-in;
        	transition:all .5s ease-in;
        }
      }
      @for $i from 1 through 6{
      	// 把小球以自己的旋转回正确的角度
        $x: center;
        $y: center;
        >.small-ball-self-#{$i}{
          -webkit-transform-origin:$x $y;
          -moz-transform-origin:$x $y;
          transform-origin:$x $y;
          -webkit-transform: rotate($i*60deg*-1);
          -moz-transform: rotate($i*60deg*-1);
          transform: rotate($i*60deg*-1);
        }
      }
    }
  }
  
//  origin mixin
@mixin origin($x:0,$y:0){
  -webkit-transform-origin:$x/2*1px $y/2*1px;
  -moz-transform-origin:$x/2*1px $y/2*1px;
  transform-origin:$x/2*1px $y/2*1px;

  [data-dpr="2"] & {
    -webkit-transform-origin:$x*1px $y*1px;
    -moz-transform-origin:$x*1px $y*1px;
    transform-origin:$x*1px $y*1px;
  }
  // for mx3
  [data-dpr="2.5"] & {
      -webkit-transform-origin:($x*2.5/2)*1px ($y* 2.5/2)*1px;
      -moz-transform-origin:($x*2.5/2)*1px ($y* 2.5/2)*1px;
      transform-origin:($x*2.5/2)*1px ($y* 2.5/2)*1px;
  }
  // for 小米note
  [data-dpr="2.75"] & {
      -webkit-transform-origin:($x*2.75/2)*1px ($y* 2.75/2)*1px;
      -moz-transform-origin:($x*2.75/2)*1px ($y* 2.75/2)*1px;
      transform-origin:($x*2.75/2)*1px ($y* 2.75/2)*1px;
  }
  [data-dpr="3"] & {
    -webkit-transform-origin:($x*3/2)*1px ($y* 3/2)*1px;
    -moz-transform-origin:($x*3/2)*1px ($y* 3/2)*1px;
    transform-origin:($x*3/2)*1px ($y* 3/2)*1px;
  }
  // for 三星note4
  [data-dpr="4"] & {
    -webkit-transform-origin:($x*4/2)*1px ($y*4/2)*1px;
    -moz-transform-origin:($x*4/2)*1px ($y*4/2)*1px;
    transform-origin:($x*4/2)*1px ($y*4/2)*1px;
  }
}

小结

我无法想像如果不用sass,将会手动添加多少类似重复的代码,完成之后,维护成本的开销又增加多少。
所以,在追求技术的路上,要多尝试,也许会踩很多坑,也许一时的学习成本会有点高,但总的技术方向永远是前进的,拥抱发展回带动发展的思路,从宏观上看,热心学习新技术的往往更加适应未来的发展。

以上。