前端都会去了解的让前端飞HTML5

Sass 笔记

2017-07-24  本文已影响38人  简不简单_都好

http://www.w3cplus.com/sassguide/
http://www.ruanyifeng.com/blog/2012/11/compass.html

基本特性

<!--处理css3的前缀兼容轻松便捷 @mixin语法后面有介绍(ctrl + F)-->
@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);
}

安装

  1. 首先安装依赖环境ruby
  2. 打开ruby的cmd,执行 gem install sass命令安装sass
  3. 命令 sass style.scss style.css转译sass为css文件
    转译比较蛋疼,需要以管理员身份打开cmd或者打开ruby的cmd doss窗口,否则系统不识别sass命令(难道需要重启?待确认)
  4. 单文件监听 sass --watch style.scss:style.css
  5. 文件夹监听命令 sass --watch sassFileDirectory:cssFileDirectory

工具

注意 遇到中文无法监听通过的解决办法

  1. 进入【ruby安装目录\lib\ruby\gems\2.2.0\gems\sass-3.x.xx\lib\sass】;
    打开【engine.rb】文件添加 Encoding.default_external = Encoding.find('utf-8'),放在所有的 require "xxx"后面;
  1. sass内部最前边加上 @charset "UTF-8";

语法

参考文档:http://www.w3cplus.com/sassguide/syntax.html

  1. 文件后缀名: sass(不适用大号和分号的语法,不推荐使用)和scss(类似css的语法,推荐)

  2. 导入@import "ScssFileNameWithoutSuffix": 编译时会将@import的scss文件合并进来只生成一个CSS文件,可以使用引用文件中定义的变量(把变量定义在一个文件,作为公共文件导入),可以减少浏览器http请求!

  3. 注释:终于支持//行注释了,css只支持块状注释/*...*/

  4. 变量

    • 一般变量 $varName: value;(可以全局使用)
    • 默认变量 $varName: value !default;(根据需求来覆盖:重新声明即可)
    • 特殊变量 如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用
    $borderDirection: top !default; 
    .border-#{$borderDirection}{
        border-#{$borderDirection}:1px solid #ccc;
    }
    
    • 全局变量 在变量值后面加上!global即为全局变量。(这个目前还用不上,等待新版本的sass设计好全局变量和局部变量的问题)
    • 多值变量 list map (看例子)
 $linkColor: #08c #333 !default; //第一个值为默认值,第二个鼠标滑过值
 a {
    color:nth($linkColor,1);
    &:hover{
        color:nth($linkColor,2);
        }
 }
  1. 嵌套(Nesting)
    • 选择器嵌套:在一个选择器中嵌套另一个选择器来实现继承
    • 属性嵌套:属性拥有同一个开始单词...可以这么写
.fakeshadow {
    border: {
        style: solid;
        left: {
          width: 4px;
          color: #888;
        }
        right: {
          width: 2px;
          color: #ccc;
        }
    }
}
- @at-root sass3.3.0中新增的功能,跳出所有的被嵌套选择器
- @keyframes @media 等...
  1. 混合(mixin): 使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开(注意不用逗号的可能是一个list参数),也可以给参数设置默认值。声明的@mixin通过@include来调用

     <!--sass style-->
    @mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
        border-bottom:$border;
        padding-top:$padding;
        padding-bottom:$padding;  
    }
    .imgtext-h li{
        @include horizontal-line(1px solid #ccc);
    }
    .imgtext-h--product li{
        @include horizontal-line($padding:15px);
    }
    
    <!--to css style-->
    .imgtext-h li {
        border-bottom: 1px solid #cccccc;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .imgtext-h--product li {
        border-bottom: 1px dashed #cccccc;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    
  2. 继承:选择器继承可以让选择器继承另一个选择器的所有样式,并联合声明。使用关键词@extend,后面紧跟需要继承的选择器。
    占位选择器%:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了@extend去继承相应的样式,都会解析出来所有的样式。占位选择器以%标识定义,通过@extend调用

  3. 内置函数:用的最多应该是颜色函数(lighten减淡和darken加深,其调用方法为lighten($color,$amount)和darken($color,$amount))

  4. 自定义函数: @fuction,@return

    $baseFontSize:      10px !default;
    $gray:              #ccc !defualt;        
    
    // 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%);
    }
    
  5. 运算:对数值型的Value(如:数字、颜色、变量等)进行加减乘除四则运算

  6. 条件语句 @if @else if @else ;
    三目运算:if($condition, $if_true, 三个参数分别表示:条件,条件为真的值,条件为假的值。

``` css
$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 style
//-------------------------------
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green; 
}
```
  1. for循环
    @for $var from <start> through <end>
    @for $var from <start> to <end>
    $i表示变量,start表示起始值,end表示结束值
    这两个的区别是关键字through表示包括end这个数,to则不包括end这个数。
``` css
//sass style 
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//to css style 
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}
```
  1. each循环 (可以参考css精灵生成的sass代码,雷同呢~~)
    @each $var in <list or map>
    $var表示变量,list和map表示list类型数据和map类型数据
``` css
//sass style 
$animal-list: puma, sea-slug, egret;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

//css style 
.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'); 
}
```

``` css
//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}
```
  1. 列表项
上一篇下一篇

猜你喜欢

热点阅读