码迷,mamicode.com
首页 > 编程语言 > 详细

强悍的 CSS 扩展语言 -- Sass

时间:2015-03-28 18:42:53      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:

<div class = ‘testBorder‘>
   <p>
        <input/>       
    </p>
</div>

假设上面这 3 个 DOM 元素有这样的需求, div 去边框, p 显示边框, input 只显示底部边框, 而且统一用 !important 关键字提高样式的优先权;

如果手写纯 CSS 会是这样:

.testBorder{
   border:none !important;   
}
.testBorder p{
   border:1px solid !important;
}
.testBorder p input{
   border-width:0 0 1px 0 !important;
   border-style: solid !important;   
}

会发现,有重复的代码".testBorder", ".testBorder p", "!important"。 这只是简单的需求,如果项目庞大对样式的需求复杂,这样手写 CSS 和搬砖真没区别;

而换用 Sass 来写:

$imp: !important; /*定义变量*/
.testBorder
{ border:none $imp; p{ border:1px solid $imp; input{ border-width:0 0 1px 0 $imp; border-style:solid $imp; } } }

 代码可嵌套了;

 

CSS 是层叠样式表,不是语言,缺乏编程语言中强大的特性:变量、函数、运算、循环、判断、继承等;

而它的扩展语言 Sass 就支持这些特性,Sass 让我们用编程方式来写 CSS 代码从而提高效率节约程序员的时间;

Sass 的官网:http://sass-lang.com/,  里面文档非常精确齐全,都不用再看其它介绍文章了,显示得多余。文档虽然是鸡肠,但都是比较常用的单词,且还有例子,基本能看明白;

下面就最近自己常用的 Sass 知识点做下简要的记录,方便以后复习;

1.变量

定义变量 "$[name]: [value];"

$columnCount: 5; /*数字*/
$columnWidth: 100px;/*样式*/
$columnClassName: ‘column‘;/*字符串*/
$domTypeArr: (‘input‘,‘select‘,‘div‘);/*数组*/
$canExtend:true; /*布尔*/

 

2.函数、判断

定义函数: "@function [funcName]([parameters]){//doSth}"

调用方式: [functionName]([parameter]);

@function extendWidth($width){
   @if($width < 1){
      @return 50px;
   }@else{
      @return $width * 50px;
   }
}

上面加粗的代码就是判断,和 js 的判断一样,区别只是关键字前面要加 @字符,如 @if  @else

 

3.混合指令 @Mixin , 循环for

Mixin 不知怎么翻译,搜了一遍翻译为 "混合指令", 作用是把一串 css 包在一起,供调用;

定义: "@mixin [mixinName]([parameters]){//sth css}", ([parameter]) 括号和parameter 是可选的,即没有参数时可不加括号(); 

调用方式: @include [mixinName]([parameter])

@mixin push($pushWidth){
   $_extendPushWidth: $pushWidth + 10px; /*定义内部变量*/
   margin-left: $_extendPushWidth;
}

@mixin column($columnIndex,$pushWidth:null){
   float:left;/*css*/
   border:1px solid;
   width:floor(extendWidth($columnIndex)); /*调用 extendWidth 用户函数计算宽度,再调用Sass 内置的数学函数 floor 获取整数*/
   @if($pushWidth != null){
      @include push($pushWidth); /*调用混合指令(mixin) push 生成 margin-left*/
   }
}

@mixin generateTable{
   .my-table{/*css class*/
      max-width:400px;
      @for $i from 1 through $columnCount{ /*$totalColumns 是上面的全局变量*/
          .#{$columnClassName}#{$i}{
         background-color:rgba(255,0,0,$i/10);
             @include column($i,5);/*调用mixin column 生成 column 样式*/
          }
      }
   }
}

.my-form{
   width:500px;
   @include generateTable();
}

注意: mixin 与函数的主要区别:mixin 相当于一段代码块,和函数一样可在其它地方重复调用,它不像函数那样返回一个值,它是返回一个代码块,调用前要加关键字 @include;

@for $i from 1 through $columnCount{ } 这是 for 循环,把 $i 从 1 开始递增到 $columnCount;

如果要循环一个数组或集合,要用到 @each $var in [array]{}

 

把上面三段代码 copy 到一个文件(如 test.scss), 在命令窗口中调用 sass 命令:

sass c:\test.sass c:\test.css

生成的 css :

@charset "GBK";
/*数字*/
/*样式*/
/*字符串*/
/*数组*/
/*布尔*/
.my-form {
  width: 500px; }
  .my-form .my-table {
    /*css class*/
    max-width: 400px;
    /*$totalColumns 是上面的全局变量*/
    /*$totalColumns 是上面的全局变量*/
    /*$totalColumns 是上面的全局变量*/
    /*$totalColumns 是上面的全局变量*/
    /*$totalColumns 是上面的全局变量*/ }
    .my-form .my-table .column1 {
      background-color: rgba(255, 0, 0, 0.1);
      float: left;
      /*css*/
      border: 1px solid;
      width: 50px;
      /*调用 extendWidth 用户函数计算宽度,再调用Sass 内置的数学函数 floor 获取整数*/
      /*定义内部变量*/
      margin-left: 15px;
      /*调用混合指令(mixin) push 生成 margin-left*/
      /*调用mixin column 生成 column 样式*/ }
    .my-form .my-table .column2 {
      background-color: rgba(255, 0, 0, 0.2);
      float: left;
      /*css*/
      border: 1px solid;
      width: 100px;
      /*调用 extendWidth 用户函数计算宽度,再调用Sass 内置的数学函数 floor 获取整数*/
      /*定义内部变量*/
      margin-left: 15px;
      /*调用混合指令(mixin) push 生成 margin-left*/
      /*调用mixin column 生成 column 样式*/ }
    .my-form .my-table .column3 {
      background-color: rgba(255, 0, 0, 0.3);
      float: left;
      /*css*/
      border: 1px solid;
      width: 150px;
      /*调用 extendWidth 用户函数计算宽度,再调用Sass 内置的数学函数 floor 获取整数*/
      /*定义内部变量*/
      margin-left: 15px;
      /*调用混合指令(mixin) push 生成 margin-left*/
      /*调用mixin column 生成 column 样式*/ }
    .my-form .my-table .column4 {
      background-color: rgba(255, 0, 0, 0.4);
      float: left;
      /*css*/
      border: 1px solid;
      width: 200px;
      /*调用 extendWidth 用户函数计算宽度,再调用Sass 内置的数学函数 floor 获取整数*/
      /*定义内部变量*/
      margin-left: 15px;
      /*调用混合指令(mixin) push 生成 margin-left*/
      /*调用mixin column 生成 column 样式*/ }
    .my-form .my-table .column5 {
      background-color: rgba(255, 0, 0, 0.5);
      float: left;
      /*css*/
      border: 1px solid;
      width: 250px;
      /*调用 extendWidth 用户函数计算宽度,再调用Sass 内置的数学函数 floor 获取整数*/
      /*定义内部变量*/
      margin-left: 15px;
      /*调用混合指令(mixin) push 生成 margin-left*/
      /*调用mixin column 生成 column 样式*/ }

 

效果:

<div class="my-form">
    <div class="my-table">
        <div class="column1">column1</div>
        <div class="column2">column2</div>
        <div class="column3">column3</div>
    </div>

技术分享

4.导入其它sass 文件:

@import test.scss;

 

很明显用 Sass 来写 css, 不但代码量倍数级减少,且优雅简洁易于维护和扩展;

其实 sass 语法有点像 js ,如果会 js,举一反三学起来很容易;

 

window 下的编译环境:

先按装 Ruby, 下载地址:http://rubyinstaller.org/downloads/

再安装 Sass, 

gem install sass

 

就可以用 sass 命令进行编译了:

sass input.scss output.css

 

sass 还有一个好牛叉的插件: compass, 先看下官网:http://compass-style.org/, 有时间 再作整理;

 

强悍的 CSS 扩展语言 -- Sass

标签:

原文地址:http://www.cnblogs.com/dhenskr/p/4374526.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!